Question

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

这是我的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;
}

现在在您的控制器中添加一个checkState方法，该方法添加或删除not-empty-and-unfocused类。在lengthProperty方法中将侦听器添加到focusedProperty和initialize中。这是您的控制器的重要部分：

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));
}

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

1 个答案: