31

ボタンのスタイルを変更したいのですが、ここのスレッドとインターネット上の記事のほとんどは、Javaコードを使用してそれを行う方法を示していますが、これは本当に良い解決策とは思えません。 FXML のみ (Css なし) を使用して、テキストと画像を含むボタンを設定しますか?

4

3 に答える 3

51

fxmlのみを使用したソリューション

tarrsalah が指摘しているように、これを行うには css を使用することをお勧めしますが、必要に応じて fxml で行うこともできます。

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Button layoutX="104.0" layoutY="81.0" mnemonicParsing="false" text="Love&#10;Potion">
      <font>
        <Font size="30.0" />
      </font>
      <graphic>
        <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
          <image>
            <Image url="http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png" />
          </image>
        </ImageView>
      </graphic>
    </Button>
  </children>
</AnchorPane>

SceneBuilderで上記を取得するには、 を の上ImageViewにドラッグするButtonと、ボタンのグラフィックとして自動的に設定されます。次に、 を選択ImageViewし、SceneBuilder プロパティ ペインの ImageView の画像フィールドに画像の URL を入力します。

上記の fxml を SceneBuilder で開くと、下の画像が表示されます。

ラブポーション

代替 CSS 属性

-fx-background*属性への代替 css 。

  • -fx-graphic
  • -fx-padding
  • -fx-content-display
  • -fx-graphic-text-gap

これらは単に異なるものであり、あなたがやろうとしていることに必ずしも適しているとは限りません。どちらを使うかは好みの問題です。これらの設定は、設定よりも使いやすいと思い-fx-background*ます。それらはより制限的ですが、構文とオプションは私にとって理解しやすく、それらの意味はLabeledの JavaDoc API にマップされます。

属性の詳細な説明は、css リファレンス ガイドにあります。

fxml に埋め込まれたグラフィックを設定するスタイルの例を次に示しますが、tarrsalah のサンプルのように、スタイル情報を別の css スタイルシートに分離する方が常に優れています。

<Button layoutX="138.0" layoutY="226.0" mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png')" text="Love&#10;Potion">
  <font>
    <Font size="20.0" />
  </font>
</Button>

Java コードのみを使用してボタンに画像を追加するための関連ソリューション

于 2013-05-02T17:23:59.960 に答える