java - 将提示文本的样式与 JFXTextField 中的文本分开

Question

我正在使用 JFoenix 库元素。我有一个简单的登录界面。 我将 JFXTextfields 与 LabelFloat 选项一起使用。当文本字段为空时，提示文本粗细正常。但是，当文本字段没有焦点且非空时，我需要将文本粗细更改为粗体并增加其大小，我还需要标签“ float ”以保持th初始字体大小和正常重量。

这是我的CSS:

.input-field-blue {
    -fx-prompt-text-fill: #a1a1a1;
    -jfx-unfocus-color : #bcbcbc;
    -fx-background-repeat : no-repeat;
    -fx-background-position: right center;
    -fx-padding : 0 -8 4 0;
    -fx-text-fill : #3fc9ee;
}
.input-field-blue:filled {
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-text-fill : #00adde;
    -jfx-unfocus-color : #00adde;
}

这是我的 fxml 文件:

<AnchorPane fx:id="backPanel" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
            prefHeight="675.0" prefWidth="1200.0" stylesheets="@../sample/sylesheet.css"
            xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="View.LoginView">
    <children>
        <Pane fx:id="frontPanel" layoutX="396.0" layoutY="164.0" prefHeight="351.0" prefWidth="450.0"
              style="-fx-background-color: #ffffff;" styleClass="front-panel">
            <children>
                <Label fx:id="hiLabel" layoutX="166.0" layoutY="43.0" styleClass="title-blue" text="Bonjour !"
                       textAlignment="CENTER"/>
                <Label fx:id="highlightLabel" layoutX="115.0" layoutY="99.0" styleClass="highlight"
                       text="Veuillez vous authentifier s’il vous plaît"/>
                <JFXPasswordField fx:id="pwd" focusColor="#3fc9ee" labelFloat="true" layoutX="77.0" layoutY="207.0"
                                  prefHeight="26.0" prefWidth="297.0" promptText="Mot de passe" unFocusColor="#bcbcbc">
                    <styleClass>
                        <String fx:value="input-field-blue"/>
                    </styleClass>
                </JFXPasswordField>
                <JFXButton fx:id="authButton" layoutX="155.0" layoutY="277.0" prefHeight="38.0" prefWidth="140.0"
                           styleClass="button-blue" text="S'authentifier" textAlignment="CENTER"/>
                <JFXTextField fx:id="userName" focusColor="#3fc9ee" labelFloat="true" layoutX="76.0" layoutY="147.0"
                              prefHeight="26.0" prefWidth="297.0" promptText="Nom d'utilisateur" unFocusColor="#bcbcbc">
                    <styleClass>
                        <String fx:value="input-field-blue"/>
                    </styleClass>
                </JFXTextField>
            </children>
        </Pane>
    </children>
    <styleClass>
        <String fx:value="back-panel"/>
        <String fx:value="back-panel-blue"/>
    </styleClass>
</AnchorPane>

我有这个界面:

但是我想要的是:

有办法做到这一点吗？

Answer 1

您应该向 CSS 添加一个自定义类，并在焦点状态或长度状态发生变化时切换该类。

将以下内容添加到您的 css 文件中:

.input-field-blue.not-empty-and-unfocused {
    -fx-font-weight: bold;
}

现在，在您的 Controller 中添加一个 checkState 方法，该方法添加或删除 not-empty-and-unfocused 类。在 initialize 方法中向 lengthProperty 和 focusedProperty 添加监听器。这是 Controller 的重要部分:

public class LoginView implements Initializable {
    @FXML
    public JFXPasswordField pwd;
    @FXML
    public JFXTextField userName;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        userName.lengthProperty().addListener((observable, oldValue, newValue) -> checkState(userName));
        userName.focusedProperty().addListener((observable, oldValue, newValue) -> checkState(userName));
        pwd.lengthProperty().addListener((observable, oldValue, newValue) -> checkState(pwd));
        pwd.focusedProperty().addListener((observable, oldValue, newValue) -> checkState(pwd));
    }

    private void checkState(TextField field) {
        if (field.isFocused() || field.getLength() == 0) {
            field.getStyleClass().remove("not-empty-and-unfocused");
        } else {
            field.getStyleClass().add("not-empty-and-unfocused");
        }
    }
}

编辑:

您可能需要考虑的另一个选项是使用自定义 PseudoClass 。因此，您必须将 css 更改为以下内容:

.input-field-blue:not-empty-and-unfocused {
    -fx-font-weight: bold;
}

在您的 Controller 中，您创建一个 PseudoClass 并稍微更改 checkState 方法:

private static final PseudoClass NOT_EMPTY_AND_UNFOCUSED = PseudoClass.getPseudoClass("not-empty-and-unfocused");

private void checkState(TextField field) {
    field.pseudoClassStateChanged(NOT_EMPTY_AND_UNFOCUSED, !(field.isFocused() || field.getLength() == 0));
}