JavaFX + CSS 開發登陸界面

java 代碼

package application;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;


public class Login extends Application {
    /**
     * 任務目標
     *      使用javaFX 創建一個表單登錄頁面
     * */
    @Override
    public void start(Stage primaryStage) {
        try {

            /**
             * 1.使用gridpanel(網格面板)
             * */
            GridPane  grid = new GridPane();
            grid.setAlignment(Pos.CENTER); //對齊方式(居中)

            //設置grippanel屬性
            grid.setHgap(10); //水平距離
            grid.setVgap(10); //垂直距離
            grid.setPadding(new Insets(25,25,25,25)); //設置內邊距

            /*
             * 2.聲明組件 並設置組件屬性
             * */

            //頁面標題
            Text screenTitle = new Text("Welcome");
            screenTitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
            //設置頁面標題id
            screenTitle.setId("title");
            //grid.add(child, 列索引, 行索引, 跨列數, 跨行數);
            grid.add(screenTitle, 0, 0, 2, 1);

            //賬號
            Label username = new Label("User Name:");
            grid.add(username, 0, 1);

            TextField userTextField = new TextField();
            grid.add(userTextField, 1, 1);

            //密碼
            Label pw = new Label("Password:");
            grid.add(pw, 0, 2);

            PasswordField pwBox = new PasswordField();
            grid.add(pwBox, 1, 2);

            //提交 按鈕
            Button btn = new Button("Sign in");
            HBox hbBtn = new HBox(10);
            hbBtn.setAlignment(Pos.BOTTOM_RIGHT); //對齊方式(底部右側)
            hbBtn.getChildren().add(btn);
            grid.add(hbBtn, 1, 4);

            //添加一個文本框(用於顯示信息的控制)
            final Text actiontarget = new Text();
            actiontarget.setId("actiontarget");
            grid.add(actiontarget, 1, 6);


            /**
             * 3.聲明按鈕事件 
             *      點擊按鈕文本顯示信息
             * */
            btn.setOnAction(new EventHandler<ActionEvent>() {

                @Override
                public void handle(ActionEvent event) {
                    actiontarget.setFill(Color.FIREBRICK);
                    actiontarget.setText("Sign in button pressword");
                }
            });

            /**
             * 4.把容器添加到場景中  並設置場景大小
             * ps:如果不設置場景大小，默認是最小
             * */
            Scene scene = new Scene(grid,300,275);

            //場景引入css文件
            scene.getStylesheets().add(
                    Login.class.getResource("Login.css")
                    .toExternalForm());

            primaryStage.setTitle("JavaFX Welcome");
            primaryStage.setScene(scene); 
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

css 代碼

/**
 * 設置舞臺背景圖片
 */
.root {     -fx-background-image: url("1.jpg");}

/** 
 * 設置風格標籤
 * */
 .label{
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333; 
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
 }

 /*
  *設置標題文本樣式
  */
 #title{
    -fx-font-size: 32px;
    -fx-font-family: "Arial Blackt";
    -fx-fill: #818181;
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
 }

 /** 
  * 設置提示文本樣式
  * */ 
 #actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

/**
 * 設置登陸按鈕樣式
 */
 .button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

/*設置登陸按鈕懸停樣式 */
.button:hover {    -fx-background-color: linear-gradient(#2A5058, #61a2b1);}

運行結果

JavaFX CSS參考指南

點擊跳轉