JavaFX自学笔记(一)

JavaFX 自学笔记


JavaFX 平台取代了 Swing 和 AWT
主要用于开发富因特网应用
JavaFX 可以无缝地在桌面或者WEB浏览器中运行
JavaFX 为支持触摸的设备提供多点触控支持
JavaFX 具有内建的 2D、3D 动画支持,以及视频和音频的回放功能,可以作为一个应用独立运行或者在浏览器中运行

基本架构

  1. 一个 Stage 对象是一个窗体,程序启动时,一个被称为主舞台的 Stage 对象由 JVM 自动创建
  2. JavaFX 应用剧院的类比来命名 Stage 和 Scene,可以认为舞台是一个支持场景的平台,节点如同在场景中演出的演员
    在这里插入图片描述

一个最简单的窗口

public class Main extends Application {
	public static void main(String[] args) {
		//执行时自动调用 start() 方法
		launch(args);
	}
	
	@Override
	public void start(Stage primaryStage) throws Exception {
		//为主舞台设置标题
		primaryStage.setTitle("我的第一个JavaFX程序");
		//舞台上必须有场景,场景上放置组件(一般放置一个根面板)
		Scene scene = new Scene(new Pane(), 800, 600);
		//将场景设置在主舞台上
		primaryStage.setScene(scene);
		//显示主舞台
		primaryStage.show();
	}
}

可以同时打开两个窗口

public class Main extends Application {
	public static void main(String[] args) {
		//执行时自动调用 start() 方法
		launch(args);
	}
	
	@Override
	public void start(Stage primaryStage) throws Exception {
		//为主舞台设置标题
		primaryStage.setTitle("我的第一个JavaFX程序");
		//舞台上必须有场景,场景上放置组件(一般放置一个根面板)
		Scene scene = new Scene(new Pane(), 800, 600);
		//将场景设置在主舞台上
		primaryStage.setScene(scene);
		//实例化另一个舞台
		Stage stage = new Stage();
		stage.setTitle("另一个舞台");
		stage.show();
		//显示主舞台
		primaryStage.show();
	}
}

也可以定义一个舞台类,更改主舞台

public class MainStage extends Stage {
	private static int WIDTH = 800;
	private static int HEIGHT = 600;
	private Scene scene = null;
	//实例化一个按钮
	private Button button = new Button("测试按钮");
	public MainStage(){
		setTitle("自己实现的舞台对象");
		initComponents();
	}
	
	private void initComponents() {
		Pane root = new Pane();
		button.setLayoutX(100);
		button.setLayoutY(100);
		//将按钮放在面板上
		root.getChildren().add(button);
		//将面板添加在场景上
		scene = new Scene(root, WIDTH, HEIGHT);
		setScene(scene);
	}
}
public class Main extends Application {
	public static void main(String[] args) {
		//执行时自动调用 start() 方法
		launch(args);
	}
	
	@Override
	public void start(Stage primaryStage) throws Exception {
		primaryStage = new MainStage();
		primaryStage.show();
	}
}

布局面板

在这里插入图片描述

简单案例赏析

public class StackPaneDemo extends Application {
	@Override
	public void start(Stage primaryStage) throws Exception {
		//栈面板
		StackPane rootPane = new StackPane();
		rootPane.setStyle("-fx-background-color: lightcoral;-fx-border-color: darkorange;");
		Button button1 = new Button("测试按钮1");
		button1.setPrefSize(200,200);
		Button button2 = new Button("测试按钮2");
		button2.setPrefSize(100,100);
		//将组件顺时针旋转45°
		button2.setRotate(60);
		rootPane.getChildren().addAll(button1, button2);
		//栈面板中,添加控件会以层叠的方式添加
		Scene scene = new Scene(rootPane, 500, 400);
		primaryStage.setScene(scene);
		primaryStage.show();
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

流式面板

在这里插入图片描述

public class FlowPaneDemo extends Application {
	private Button[] buttons = new Button[100];
	
	@Override
	public void start(Stage primaryStage) throws Exception {
		Pane root = createRoot();
		Scene scene = new Scene(root, 800, 600);
		primaryStage.setScene(scene);
		primaryStage.show();
	}
	
	private Pane createRoot(){
		//Orientation.HORIZONTAL    垂直布局
		//Orientation.VERTICAL      水平布局
		FlowPane root = new FlowPane(Orientation.HORIZONTAL);
		//设置垂直间距
		root.setVgap(10);
		//设置水平间距
		root.setHgap(5);
		//居中
		root.setAlignment(Pos.CENTER);
		//按上、右、下、左的顺序设置页边距
		root.setPadding(new Insets(50, 20, 10, 30));
		for (int i = 0; i < buttons.length; i++){
			buttons[i] = new Button("按钮" + (i + 1));
		}
		root.getChildren().addAll(buttons);
		return root;
	}
	
	public static void main(String[] args) {
		launch();
	}
}

网格面板

在这里插入图片描述

public class GridPaneDemo extends Application {
	private Label lblUserName = new Label("用户名:");
	private Label lblPassword = new Label("密  码:");
	private Label lblEmail = new Label("Email:");
	private TextField txtUserName = new TextField();
	private PasswordField txtPassword = new PasswordField();
	private TextField txtEmail = new TextField();
	private Button btnRegister = new Button("注册");
	
	@Override
	public void start(Stage primaryStage) throws Exception {
		Pane root = createRoot();
		primaryStage.setTitle("网格布局示例");
		primaryStage.setScene(new Scene(root, 300, 200));
		primaryStage.show();
	}
	
	private Pane createRoot() {
		GridPane root = new GridPane();
		//显示网格线
		//root.setGridLinesVisible(true);
		//居中显示
		root.setAlignment(Pos.CENTER);
		//设置水平和垂直间距
		root.setHgap(10);
		root.setVgap(10);
		//在面板上3添加控件(可以自动解析行数和列数)
		root.add(lblUserName, 0, 0);
		root.add(lblPassword, 0, 1);
		root.add(lblEmail, 0, 2);
		root.addColumn(1, txtUserName, txtPassword, txtEmail);
		root.add(btnRegister, 1, 3);
		//设置某个组件在网格布局中的对齐方式
		GridPane.setHalignment(btnRegister, HPos.RIGHT);
		return root;
	}
	
	public static void main(String[] args) {
		launch();
	}
}

边框面板

在这里插入图片描述

public class BorderPaneDemo extends Application {
	@Override
	public void start(Stage primaryStage) throws Exception {
		primaryStage.setScene(createScene());
		primaryStage.show();
	}
	
	private Scene createScene() {
		return new Scene(createRoot(), 400, 400);
	}
	
	private Parent createRoot() {
		BorderPane root = new BorderPane();
		initComponents(root);
		//设置所有组件居中
		root.getChildren().forEach(e -> BorderPane.setAlignment(e, Pos.CENTER));
		return root;
	}
	
	private void initComponents(BorderPane root) {
		root.setTop(new Button("北风"));
		root.setRight(new Button("东风"));
		root.setBottom(new Button("南风"));
		root.setLeft(new Button("西风"));
		root.setCenter(new Button("中神通"));
	}
	
	public static void main(String[] args) {
		launch();
	}
}

栈面板

	private Parent createRoot() {
		StackPane stackPane = new StackPane();
		
		Pane pane1 = new Pane();        //放置在最底层的普通面板
		Pane pane2 = new Pane();
		//设置面板背景色
		pane1.setStyle("-fx-background-color: #1dd21b;");
		pane2.setStyle("-fx-background-color: #a83737;");
		//设置旋转
		pane2.setRotate(45);
		
		Rectangle rectangle = new Rectangle(240, 240);
		//设置形状Shape背景颜色时,需要使用其他方法
		rectangle.setFill(Color.web("#cdd23b"));
		
		Circle circle = new Circle(50);
		circle.setFill(Color.web("#71d266"));
		
		//默认情况下,放置在StackPane上的面板会自动铺满整个StackPane
		//所以先设置外边距
		StackPane.setMargin(pane1, new Insets(50));
		StackPane.setMargin(pane2, new Insets(100));
		stackPane.getChildren().addAll(pane1, pane2, rectangle, circle);
		return stackPane;
	}
	
	public static void main(String[] args) {
		launch();
	}
}

HBox / VBox

在这里插入图片描述

public class HBoxAndVBoxDemo extends Application {
	@Override
	public void start(Stage primaryStage) throws Exception {
		primaryStage.setTitle("水平及垂直布局面板示例");
		primaryStage.setScene(createScene());
		primaryStage.show();
	}
	
	private Scene createScene() {
		return new Scene(createRoot(), 900, 900);
	}
	
	private HBox createRoot() {
		HBox root = new HBox(5);
		root.getChildren().addAll(createLeft(), createMiddle(), createRight());
		return root;
	}
	
	private Node createMiddle() {
		VBox vBox = new VBox();
		vBox.setStyle("-fx-background-color: #7fff35");
		vBox.setPrefSize(300, 300);
		vBox.getChildren().addAll(new TextArea(), new Label("中间面板"));
		return vBox;
	}
	
	private Node createRight() {
		VBox vBox = new VBox();
		vBox.setPrefSize(300, 300);
		vBox.setStyle("-fx-background-color: #6474ff");
		Circle circle = new Circle(50);
		circle.setFill(Color.web("#ff3322"));
		//椭圆
		Ellipse ellipse = new Ellipse(120, 35);
		ellipse.setFill(Color.web("#8fffbd"));
		//多边形
		Polygon polygon = new Polygon();
		polygon.setFill(Color.web("#fff725"));
		ObservableList<Double> pointsList = polygon.getPoints();
		pointsList.addAll(160d, 5d);
		pointsList.addAll(195d, 115d);
		pointsList.addAll(300d, 115d);
		pointsList.addAll(220d, 185d);
		pointsList.addAll(250d, 300d);
		pointsList.addAll(155d, 230d);
		pointsList.addAll(60d, 300d);
		pointsList.addAll(95d, 185d);
		pointsList.addAll(0d, 115d);
		pointsList.addAll(120d, 115d);
		
		vBox.getChildren().addAll(new Rectangle(50, 20), circle, ellipse, polygon);
		return vBox;
	}
	
	private Node createLeft() {
		VBox vBox = new VBox();
		vBox.setPrefSize(300, 300);
		vBox.setStyle("-fx-background-color: #ffa54f");
		//设置外边距是给容器设置
		vBox.setPadding(new Insets(20));
		for (int i = 0; i < 50; i++){
			Text text = new Text("测试文字" + (i + 1));
			//设置内边距是给控件设置
			VBox.setMargin(text, new Insets(5, 0, 0, 0));
			vBox.getChildren().add(text);
		}
		return vBox;
	}
	
	public static void main(String[] args) {
		launch();
	}
}


版权声明:本文为weixin_47882161原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。