如何在JavaFX中的单个按钮中创建和标注2个标签？

Question

你遇到过这种按钮吗？你知道怎么去创造吗？

更新

Menai刚刚帮我意识到这个Button必须有2个标签。左标签具有黑色背景颜色和白色文本填充颜色，而右标签具有银色背景颜色和红色文本填充颜色。

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

Answer 1

在Label中使用2 HBox作为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

}