如何在JavaFX的单个Button中创建和设置2个标签的样式？

Question

您遇到过这种按钮吗？ 您知道如何创建它吗？

更新资料

Menai只是帮助我意识到此按钮中必须包含2个标签。 左标签具有黑色背景色和白色文本填充色，而右标签具有银色背景色和红色文本填充色。

我想知道如何创建（使用Java或.fxml）和样式（CSS）带有2个标签的按钮，类似于提供为图像的按钮。

Answer 1

在HBox使用2个Label作为Button图形。 分别为每个标签分配文本颜色/背景色：

<Button styleClass="btn2" stylesheets="@button_style.css" prefWidth="100">
    <graphic>
        <HBox>
            <children>
                <Label HBox.hgrow="NEVER" styleClass="left" text="213"/>
                <Label HBox.hgrow="ALWAYS" styleClass="right" text="2x"/>
            </children>
        </HBox>
    </graphic>
</Button>

button_style.css

.btn2 {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border;
    -fx-padding: 0;
    -fx-content-display: graphic-only;
}

.btn2 HBox {
    -fx-fill-height: true;
}

.btn2 .left, .btn2 .right {
    -fx-padding: 4;
}

.btn2 .left {
    -fx-text-fill: white;
    -fx-background-color: black;
}

.btn2:pressed .left {
    /* use different background for a pressed button */
    -fx-background-color: #555;
}

.btn2 .right {
    -fx-text-fill: red;
    -fx-background-color: -fx-body-color;
    -fx-max-width: infinity;
}

Answer 2

您可以使用CSS像这样自定义按钮

.button{
    -fx-background-color:   linear-gradient(to right, black 30%, #cccccc 20%);
    -fx-text-fill:  linear-gradient(to right,white 60%, red 20%);
    -fx-padding: 15

}