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

Question

你见过这种按钮吗？你知道如何着手创建它吗？

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

我想知道如何创建（Java或. fxml）和样式（CSS）按钮2标签在它类似于按钮提供的图像。

Answer 1

您可以使用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

}

Answer 2

使用HBox中的2个标签作为按钮的图形。分别为每个标签指定文本颜色/背景色：

xml prettyprint-override"><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\u样式。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;
}