javafx登录界面美化

JavaFX提供了丰富的UI控件和CSS样式支持，可以很方便地美化登录界面。下面是一个简单的示例：

1. 创建一个新的JavaFX项目，并在主类中添加以下代码：

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Login");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

2. 创建FXML文件，用于定义登录界面的UI组件。在FXML文件中添加以下代码：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>

<VBox alignment="CENTER" spacing="10" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <Label text="Login" style="-fx-font-size: 24px; -fx-font-weight: bold;"/>
    <GridPane hgap="10" vgap="10">
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10" />
        <RowConstraints minHeight="10" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10" vgrow="SOMETIMES" />
        <Label GridPane.columnIndex="0" GridPane.rowIndex="0" text="Username:" />
        <TextField GridPane.columnIndex="1" GridPane.rowIndex="0" />
        <Label GridPane.columnIndex="0" GridPane.rowIndex="1" text="Password:" />
        <PasswordField GridPane.columnIndex="1" GridPane.rowIndex="1" />
    </GridPane>
    <Button text="Login" style="-fx-background-color: #4CAF50; -fx-text-fill: white;"/>
</VBox>

3. 在CSS文件中定义样式，用于美化登录界面。在CSS文件中添加以下代码：

.root {
    -fx-background-color: #f2f2f2;
}

Label {
    -fx-font-size: 18px;
    -fx-font-weight: bold;
}

TextField, PasswordField {
    -fx-background-color: #ffffff;
    -fx-border-color: #cccccc;
    -fx-border-width: 1px;
    -fx-padding: 5px;
}

Button {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-font-weight: bold;
    -fx-padding: 10px;
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
}

4. 在FXML文件中引用CSS文件。在FXML文件中添加以下代码：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>

<VBox alignment="CENTER" spacing="10" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <URL value="@style.css" />
    </stylesheets>
    <Label text="Login" style="-fx-font-size: 24px; -fx-font-weight: bold;"/>
    <GridPane hgap="10" vgap="10">
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10" />
        <RowConstraints minHeight="10" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10" vgrow="SOMETIMES" />
        <Label GridPane.columnIndex="0" GridPane.rowIndex="0" text="Username:" />
        <TextField GridPane.columnIndex="1" GridPane.rowIndex="0" />
        <Label GridPane.columnIndex="0" GridPane.rowIndex="1" text="Password:" />
        <PasswordField GridPane.columnIndex="1" GridPane.rowIndex="1" />
    </GridPane>
    <Button text="Login" />
</VBox>

完成上述步骤后，运行程序，即可看到美化后的登录界面。