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参考指南

点击跳转