JavaFX学习笔记（最全，最详细）

文章目录

Java: JavaFX桌面GUI开发
1、基本概念
2、最小框架代码
3、控件布局
4，初步认识stage窗口
5，stage窗口模式(StageStyle)
6，screen类的使用
7，Group容器的使用
8，Button按钮以及简单介绍设置背景颜色和外边框等问题
9，JavaFX布局（pane）
(1). Pane
(2). BorderPane
(3). HBox
(4). VBox
(5) FlowPane面板
(6), GridPane面板
用户界面设计例子

Java: JavaFX桌面GUI开发

1、基本概念

窗口 Stage
场景 Scene
布局 stackPane
控件 Button

2、最小框架代码

创建命令行应用

package com.company;import javafx.application.Application;
import javafx.stage.Stage;public class HelloWorld extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {primaryStage.show();       //显示窗口}public static void main(String[] args) {launch(args);           //启动这个程序  APPlication的方法}
}

对就是啥都没有，空白的窗体

3、控件布局

package com.company;import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;public class Main extends Application {public static void main(String[] args) {launch(args);}@Overridepublic void start(Stage primaryStage) throws Exception {// 实例化按钮Button button = new Button("这是按钮上的文字");// 创建布局控件    //其他各种布局StackPane,FlowPane,HBox,VBox,GridPane,BorderPaneStackPane stackPane = new StackPane();// 将button添加到布局stackPane.getChildren().add(button);// 创建场景 宽=400 高=400Scene scene = new Scene(stackPane, 400, 400);// 将场景添加到窗口primaryStage.setScene(scene);// 显示窗口primaryStage.show();}
}

4，初步认识stage窗口

primaryStage.setTitle("JavaFX");    //添加标题 primaryStage.getIcons().add(new Image("ico/tim.png"));    //设置图标  primaryStage.setIconified(true);       //设置最小化primaryStage.setMaximized(true);     //设置最大化primaryStage.close();      //关闭窗口rimaryStage.setResizable(false);        //设置窗口大小是否可调整primaryStage.setWidth(500); primaryStage.setHeight(500);    //设置窗口宽度和高度primaryStage.setWidth(500); primaryStage.setHeight(500);      //设置窗口最大宽高primaryStage.getWidth();<br />primaryStage.getHeight()     //获取窗口宽高primaryStage.show();     //显示窗口primaryStage.setOpacity(0.5);   //设置窗口不透明度primaryStage.setAlwaysOnTop(true);       //设置在窗口永远在最上层rimaryStage.setX(100); <br />primaryStage.setY(100);      //设置窗口的位置(左上角像素坐标)Platform.exit();          //终止JavaFX应用程序

primaryStage.setFullScreen(true);
primaryStage.setScene(new Scene(new Group()));        //设置全屏,必需设置Scene//设置高度变化监听
primaryStage.heightProperty().addListener(new ChangeListener<Number>() {@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {System.out.println("当前高度 ==>" + newValue.intValue());
}
});//设置宽度变化监听
primaryStage.widthProperty().addListener(new ChangeListener<Number>() {@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {System.out.println("当前宽度 ==>" +newValue.intValue() );
}
});//设置窗口位置X轴坐标监听
primaryStage.xProperty().addListener(new ChangeListener<Number>() { <br />@Override <br />public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {<br /> System.out.println("窗口X轴坐标= " + newValue.intValue());<br /> } <br />});//设置窗口位置Y轴坐标监听
primaryStage.yProperty().addListener(new ChangeListener<Number>() { <br /> @Override<br /> public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {<br /> System.out.println("窗口Y轴坐标= " + newValue.intValue());<br /> }<br /> });

实例代码

public class Main extends Application {@Overridepublic void start(Stage primaryStage) throws Exception{// 添加标题primaryStage.setTitle("JavaFX");// 设置图标primaryStage.getIcons().add(new Image("ico/tim.png"));// 设置最小化//primaryStage.setIconified(true);//设置最大化// primaryStage.setMaximized(true);// 关闭窗口// primaryStage.close();//设置窗口宽度和高度primaryStage.setWidth(500);primaryStage.setHeight(500);// 设置窗口大小是否可调整// primaryStage.setResizable(false);// 设置窗口最大宽高primaryStage.setMaxWidth(1000);primaryStage.setMaxHeight(1000);// 获取窗口宽高System.out.println("宽度= " + primaryStage.getWidth());System.out.println("高度= " + primaryStage.getHeight());// 设置高度变化监听primaryStage.heightProperty().addListener(new ChangeListener<Number>() {@Overridepublic void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {System.out.println("当前高度 ==>" + newValue.intValue());}});//设置宽度变化监听primaryStage.widthProperty().addListener(new ChangeListener<Number>() {@Overridepublic void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {System.out.println("当前宽度 ==>" +newValue.intValue() );}});// 设置全屏,必需设置SceneprimaryStage.setFullScreen(true);primaryStage.setScene(new Scene(new Group()));// 显示窗口primaryStage.show();}public static void main(String[] args) {launch(args);}
}

@Override
public void start(Stage primaryStage) throws Exception {// 设置窗口不透明度//primaryStage.setOpacity(0.5);// 设置在窗口永远在最前面(置顶)//primaryStage.setAlwaysOnTop(true);//设置窗口宽度和高度primaryStage.setWidth(500);primaryStage.setHeight(500);// 设置窗口的位置(左上角像素坐标)primaryStage.setX(100);primaryStage.setY(100);// 设置窗口位置X轴坐标监听primaryStage.xProperty().addListener(new ChangeListener<Number>() {@Overridepublic void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {System.out.println("窗口X轴坐标= " + newValue.intValue());}});// 设置窗口位置Y轴坐标监听primaryStage.yProperty().addListener(new ChangeListener<Number>() {@Overridepublic void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {System.out.println("窗口Y轴坐标= " + newValue.intValue());}});primaryStage.show();
}

5，stage窗口模式(StageStyle)

public class Main2 extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {Stage s1 = new Stage();s1.setTitle("s1");//纯白背景和平台装饰s1.initStyle(StageStyle.DECORATED);s1.show();Stage s2 = new Stage();s2.setTitle("s2");//透明背景且没有装饰s2.initStyle(StageStyle.TRANSPARENT);s2.show();Stage s3 = new Stage();s3.setTitle("s3");//纯白背景，无装饰。s3.initStyle(StageStyle.UNDECORATED);s3.show();Stage s4 = new Stage();s4.setTitle("s4");//纯白背景和最少平台装饰s4.initStyle(StageStyle.UNIFIED);s4.show();Stage s5 = new Stage();s5.setTitle("s5");//一个统一标准的舞台s5.initStyle(StageStyle.UTILITY);s5.show();// 终止JavaFX应用程序Platform.exit();}public static void main(String[] args) {launch();}
}

public class Main3 extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {Stage s1 = new Stage();//s1.setTitle("s1");s1.show();Stage s2 = new Stage();//s2.initOwner(s1);s2.setTitle("s2");s2.show();Stage s3 = new Stage();//阻止事件传递到任何其他应用程序窗口s3.initModality(Modality.APPLICATION_MODAL);s3.initOwner(s2);// 阻止事件传递到所有者的窗口//s3.initModality(Modality.WINDOW_MODAL);s3.setTitle("s3");s3.show();}public static void main(String[] args) {launch(args);}
}

6，screen类的使用

public class Main6 extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {// 获取屏幕对象Screen screen = Screen.getPrimary();// 获取屏幕dpidouble dpi = screen.getDpi();System.out.println("当前屏幕dpi ==>" + dpi);//获取屏幕宽高 Rectangle2D [minX = 0.0, minY=0.0, maxX=2560.0, maxY=1440.0, width=2560.0, height=1440.0]Rectangle2D rec1 = screen.getBounds();// 获取屏幕可视宽高 Rectangle2D [minX = 0.0, minY=0.0, maxX=2560.0, maxY=1400.0, width=2560.0, height=1400.0]Rectangle2D rec2 = screen.getVisualBounds();System.out.println("屏幕宽高 ==>" + rec1);System.out.println("屏幕可视宽高 ==>" + rec2);Platform.exit();}public static void main(String[] args) {launch(args);}
}

窗口结构 Stage包含 scene ,scene 包含Node

public class Main7 extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {// 打开网页HostServices host = getHostServices();host.showDocument("www.baidu.com");// 获取资源地址URL url = getClass().getClassLoader().getResource("ico/tim.png");String path = url.toExternalForm();// 结构 Stage包含 scene 包含 NodeButton button = new Button("按钮");button.setPrefWidth(200);button.setPrefHeight(100);Group group = new Group();boolean add = group.getChildren().add(button);// 场景对象Scene scene = new Scene(group);// 设置场景图上光标样式//scene.setCursor(Cursor.CLOSED_HAND);// 自定义光标scene.setCursor(Cursor.cursor(path));primaryStage.setScene(scene);primaryStage.setTitle("Javafx");primaryStage.setHeight(800);primaryStage.setWidth(800);primaryStage.show();}public static void main(String[] args) {launch(args);}
}

7，Group容器的使用

public class Main8 extends Application {// bt1按钮增加事件 自增参数int i = 0;@Overridepublic void start(Stage primaryStage) throws Exception {// 定义按钮Button bt1 = new Button("bt1");Button bt2 = new Button("bt2");Button bt3 = new Button("bt3");// 设置按钮布局位置bt1.setLayoutX(0);bt1.setLayoutY(0);// 设置按钮大小bt1.setPrefHeight(50);bt1.setPrefWidth(100);bt2.setLayoutX(200);bt2.setLayoutY(0);bt2.setPrefHeight(50);bt2.setPrefWidth(100);bt3.setLayoutX(400);bt3.setLayoutY(0);bt3.setPrefHeight(50);bt3.setPrefWidth(100);Group group = new Group();// 设置Group的不透明度//group.setOpacity(0.5);// 自动调整子节点尺寸,默认是true,设置为false是子节点宽高为0group.setAutoSizeChildren(true);// 在Grounp容器中添加按钮group.getChildren().add(bt1);group.getChildren().addAll(bt1,bt2,bt3);// 在Grounp容器中中移除按钮//group.getChildren().remove(bt1);// 清除容器中全部元素//group.getChildren().clear();// 判断坐标点是否有子组件System.out.println(group.contains(1,1));// 获取所有子组件Object[] objects = group.getChildren().toArray();for(Object o: objects){Button btn = (Button) o;btn.setPrefWidth(100);btn.setPrefHeight(100);}// 增加子节点列表监听group.getChildren().addListener(new ListChangeListener<Node>() {@Overridepublic void onChanged(Change<? extends Node> c) {System.out.println("当前子组件数量==> " +  c.getList().size());}});// bt1按钮增加事件bt1.setOnAction(new EventHandler<ActionEvent>() {@Overridepublic void handle(ActionEvent event) {Button but4 = new Button("but4");but4.setLayoutY(100);but4.setLayoutX(i);but4.setPrefHeight(100);but4.setPrefWidth(100);group.getChildren().add(but4);i = i + 100;}});Scene scene = new Scene(group);primaryStage.setScene(scene);primaryStage.setTitle("javafx");primaryStage.setHeight(800);primaryStage.setWidth(800);primaryStage.show();}public static void main(String[] args) {launch(args);}
}

8，Button按钮以及简单介绍设置背景颜色和外边框等问题

设置背景颜色

// 设置背景颜色
// Paint 颜色
// CornerRadii 圆角
//Insets 内边距
//b1.setBackground(new Background(new BackgroundFill(Color.LIGHTBLUE,new CornerRadii(10),new Insets(5,0,0,0)) ));// 背景填充
// Paint 颜色 可以直接用Color.LIGHTBLUE 获取颜色
// Paint.valueOf("#87CEEB55")  前六位颜色代码,后两位不透明度
// CornerRadii 圆角半径
//Insets 内边距
BackgroundFill bgf = new BackgroundFill(Paint.valueOf("#87CEEB55"),new CornerRadii(20),new Insets(50));
//背景对象
Background background = new Background(bgf);
// 设置背景颜色
b1.setBackground(background);

设置边框

// 设置边框Paint.valueOf("#87CEEB")
// Paint 颜色
// BorderStrokeStyle 边框描边样式
// CornerRadii 圆角半径
// 边框宽度 BorderWidths
BorderStroke bos = new BorderStroke(Color.RED,BorderStrokeStyle.SOLID,new CornerRadii(10),new BorderWidths(5));
Border border = new Border(bos);
b1.setBorder(border);

使用JavaCSS设置样式

/*常用的FXStyle*/
b2.setStyle("-fx-background-color: #1169EE20;"+ //背景颜色"-fx-background-radius: 5;"+ //背景圆角"-fx-background-insets: 0;"+ //边框到背景的距离"-fx-text-fill: #50ff23;"+ //文本颜色"-fx-font-size: 15;"+ //字体大小"-fx-font-family: 'Segoe Print';"+ //字体"-fx-border-color: #EE1169;"+ //边框颜色"-fx-border-style: SOLID;"+ //边框样式/***BorderStrokeStyle.DOTTED; // 虚线*BorderStrokeStyle.DOTTED;  // 点状*BorderStrokeStyle.NONE; // 无样式*BorderStrokeStyle.SOLID;  //实线*/"-fx-border-radius: 5;"+ //边框圆角"-fx-border-width: 2;" //边框宽度
);

设置按钮单击事件

// 设置按钮单击事件
b1.setOnAction(new EventHandler<ActionEvent>() {@Overridepublic void handle(ActionEvent event) {// 获取事件最初发生的对象Button button = (Button)event.getSource();System.out.println(button.getText());System.out.println("按钮b1被点击了.....");}
});

实例代码


```java
public class Main9 extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {// 创建按钮对象Button b1 = new Button();// 设置按钮显示文本b1.setText("这是按钮");// 设置文本字体b1.setFont(Font.font("sans-serif",40));// 设置文字颜色b1.setTextFill(Color.RED);// 设置布局位置b1.setLayoutX(100);b1.setLayoutY(100);// 设置宽高b1.setPrefWidth(400);b1.setPrefHeight(200);// 设置背景图片
//        b1.setBackground(new Background(new BackgroundImage(
//                new Image("ico\\tim.png") , null, null,
//                null, null)));// 设置背景颜色// Paint 颜色// CornerRadii 圆角//Insets 内边距//b1.setBackground(new Background(new BackgroundFill(Color.LIGHTBLUE,new CornerRadii(10),new Insets(5,0,0,0)) ));// 背景填充// Paint 颜色 可以直接用Color.LIGHTBLUE 获取颜色// Paint.valueOf("#87CEEB55")  前六位颜色代码,后两位不透明度// CornerRadii 圆角半径//Insets 内边距BackgroundFill bgf = new BackgroundFill(Paint.valueOf("#87CEEB55"),new CornerRadii(20),new Insets(50));//背景对象Background background = new Background(bgf);// 设置背景颜色b1.setBackground(background);// 设置边框Paint.valueOf("#87CEEB")// Paint 颜色// BorderStrokeStyle 边框描边样式// CornerRadii 圆角半径// 边框宽度 BorderWidthsBorderStroke bos = new BorderStroke(Color.RED,BorderStrokeStyle.SOLID,new CornerRadii(10),new BorderWidths(5));Border border = new Border(bos);b1.setBorder(border);//javafx css 设置样式Button b2 = new Button("b2");// 设置布局位置b2.setLayoutX(100);b2.setLayoutY(300);b2.setPrefWidth(400);b2.setPrefHeight(200);/*常用的FXStyle*/b2.setStyle("-fx-background-color: #1169EE20;"+ //背景颜色"-fx-background-radius: 5;"+ //背景圆角"-fx-background-insets: 0;"+ //边框到背景的距离"-fx-text-fill: #50ff23;"+ //文本颜色"-fx-font-size: 15;"+ //字体大小"-fx-font-family: 'Segoe Print';"+ //字体"-fx-border-color: #EE1169;"+ //边框颜色"-fx-border-style: SOLID;"+ //边框样式/***BorderStrokeStyle.DOTTED; // 虚线*BorderStrokeStyle.DOTTED;  // 点状*BorderStrokeStyle.NONE; // 无样式*BorderStrokeStyle.SOLID;  //实线*/"-fx-border-radius: 5;"+ //边框圆角"-fx-border-width: 2;" //边框宽度);// 设置按钮单击事件b1.setOnAction(new EventHandler<ActionEvent>() {@Overridepublic void handle(ActionEvent event) {// 获取事件最初发生的对象Button button = (Button)event.getSource();System.out.println(button.getText());System.out.println("按钮b1被点击了.....");}});Group root = new Group();root.getChildren().add(b1);root.getChildren().add(b2);Scene scene = new Scene(root);primaryStage.setTitle("javaFX");primaryStage.setHeight(800);primaryStage.setWidth(800);primaryStage.setScene(scene);primaryStage.show();}public static void main(String[] args) {launch(args);}
}

9，JavaFX布局（pane）

(1). Pane

Pane是其它布局控件类的父类，我们可以将Pane看成一个绝对布局控件，当我们将某个控件放置在Pane当中的时候，我们需要指定它的位置坐标（layoutX和layoutY）。当我们将一个控件拖拽到Pane中的时候，会自动生成layoutX和layoutY坐标。如图是使用Pane为父容器设计的一个简单界面：

<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?><Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="350.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"><children><Button layoutX="318.0" layoutY="210.0" mnemonicParsing="false" text="登录" /><Label layoutX="136.0" layoutY="104.0" text="用户名：" /><Label layoutX="136.0" layoutY="162.0" text="密 码：" /><TextField layoutX="212.0" layoutY="100.0" /><PasswordField layoutX="212.0" layoutY="158.0" /></children>
</Pane>

(2). BorderPane

BorderPane将界面分割上上下左右中5部分

BorderPane pane = new BorderPane();        //首先创建一个BorderPane对象//然后在BorderPane对象的五个区域分别放置五个CustomPane对象，
//CustomPane是自定义面板，是为了方便放置标签。
pane.setTop(new CustomPane("Top")); //放置在上面pane.setRight(new CustomPane("Right"));//放置在右边pane.setBottom(new CustomPane("Bottom"));//放置在上面pane.setLeft(new CustomPane("Left"));//放置在左边pane.setCenter(new CustomPane("Center"));//放置在中间

(3). HBox

HBox是将所有的控件放在同一行，无论有多少个控件都是放在同一行。
HBox可以水平排列控件，不换行。如图：

HBox hBox = new HBox(15);     //首先创建一个HBox对象hBox.setPadding(new Insets(15, 15, 15, 15));hBox.setStyle("-fx-background-color: gold");//然后，在面板上添加六个按钮，代码如下：
hBox.getChildren().add(new Button("one"));hBox.getChildren().add(new Button("two"));hBox.getChildren().add(new Button("three"));hBox.getChildren().add(new Button("four"));hBox.getChildren().add(new Button("five"));hBox.getChildren().add(new Button("six"));

效果

(4). VBox

VBox类似的，垂直排列控件，不换列。如图：

//VBox的布局策略与HBox类似，不过VBox是将所有的控件放在同一列。//首先创建一个VBox对象，代码如下：VBox vBox = new VBox(15);vBox.setPadding(new Insets(15, 5, 5, 5));//然后，在VBox对象中添加六个按钮，代码如下：vBox.getChildren().add(new Button("one"));vBox.getChildren().add(new Button("two"));vBox.getChildren().add(new Button("three"));vBox.getChildren().add(new Button("four"));vBox.getChildren().add(new Button("five"));vBox.getChildren().add(new Button("six"));

(5) FlowPane面板

FlowPane感觉像HBox和VBox的综合体，FlowPane可以设置一个方向水平或者垂直。默认方向为水平，那么放入FlowPane中的控件会先水平排列，如果第一行满了以后进入下一行继续水平排列。垂直方向类似的，先垂直排列，如果第一列满了以后进入第二列继续垂直排列。如图：

//首先创建一个FlowPane对象，代码如下：FlowPane pane = new FlowPane();pane.setPadding(new Insets(11, 12, 13, 14));pane.setHgap(5);//设置控件之间的垂直间隔距离pane.setVgap(5);//设置控件之间的水平间隔距离//创建两个标签对象、两个文本输入框和一个按钮对象，代码如下：Label lbName = new Label("Please input a name:");TextField tfName = new TextField();Label lbPassword = new Label("Please input a password:");TextField tfPassword = new TextField();   Button okbtn = new Button("OK");//将这几个控件添加到面板中，代码如下：pane.getChildren().addAll(lbName,tfName,lbPassword,tfPassword,okbtn);

(6), GridPane面板

它采用的布局策略是：将整个面板划分为若干个格子，每个格子的大小是一样的，每个格子中可以放置一个控件，类似于表格的方式。

GridPane pane = new GridPane();pane.setAlignment(Pos.CENTER);pane.setPadding(new Insets(11.5, 12.5, 13.5, 14.5));pane.setHgap(5.5);pane.setVgap(5.5);向面板中添加六个按钮，代码如下：pane.add(new Button("1"), 0, 0);pane.add(new Button("2"), 1, 0);pane.add(new Button("3"), 0, 1);pane.add(new Button("4"), 1, 1);pane.add(new Button("5"), 0, 2);pane.add(new Button("6"), 1, 2);

add方法的第二个和第三个参数是指定控件摆放的位置，分别表示所在的列和行，0是第一行和第一列。布局效果如下图所示：

用户界面设计例子

package ch14;import javafx.application.Application;
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.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;public class Login extends Application{public void start(Stage primaryStage) throws Exception {VBox pane = new VBox(20);pane.setAlignment(Pos.CENTER);   //设置对齐HBox pane2 = new HBox(20);pane.setAlignment(Pos.CENTER);   //设置对齐HBox pane3 = new HBox(20);pane.setAlignment(Pos.CENTER);   //设置对齐Text text1 = new Text(50,50,"学生信息管理界面");text1.setFont(Font.font("宋体",FontWeight.BOLD,FontPosture.ITALIC,24));   //设置样式Button Login = new Button("登录");Text text2 = new Text(300,300,"学号");Text text3 = new Text(50,50,"密码");Text text4 = new Text(100,50,"");TextField user = new TextField();PasswordField pwd = new PasswordField();pwd.setAlignment(Pos.CENTER);pane.getChildren().add(text1);pane2.getChildren().add(text2);pane2.getChildren().add(user);pane3.getChildren().add(text3);pane3.getChildren().add(pwd);pane.getChildren().add(pane2);pane.getChildren().add(pane3);pane.getChildren().add(Login);pane.getChildren().add(text4);Scene scene = new Scene(pane,400,400);primaryStage.setTitle("学生信息管理");primaryStage.setScene(scene);    //指定要在此阶段上使用的场景。primaryStage.show();   // 显示窗口};public static void main(String[] args){launch(args);   //启动这个程序  APPlication的方法}}

持续更新中…