Java - JavaFx佈局

1. AnchorPane佈局——錨點、定位、絕對佈局

package top.onefine;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;



public class Main extends Application {
    public static void main(String[] args) {
        Application.launch(args);
//        System.out.println(System.getProperty("java.version"));
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.getIcons().add(new Image("Icon.png"));  // 設置圖標
        primaryStage.setTitle("demo");

        AnchorPane ap = new AnchorPane();

        ap.setStyle("-fx-background-color: #FFFF00");


        Button b1 = new Button("Button1");
        Button b2 = new Button("Button2");
        b1.setLayoutX(100);
        b1.setLayoutY(50);
        b2.setLayoutX(200);
        b2.setLayoutY(50);
        ap.getChildren().addAll(b1, b2);
        // 相對於父控件,如b1相對父控件AnchorPane左邊100,上邊50
        // 注:若上下左右都做設置則可以適配屏幕
//        AnchorPane.setLeftAnchor(b1, 100.0);  // 此時b1.setLayoutX(100)無效
//        AnchorPane.setTopAnchor(b1, 50.0);  // 此時b1.setLayoutY(50)無效
//        AnchorPane.setLeftAnchor(b2, 200.0);
//        AnchorPane.setTopAnchor(b2, 50.0);

        ap.setPadding(new Insets(10));  // 設置佈局內邊距

//        ap.setOnMouseClicked(new EventHandler<MouseEvent>() {
//            @Override
//            public void handle(MouseEvent event) {
//                System.out.println("點擊了!");
//            }
//        });

//        Group group = new Group();  // 容器
//        group.getChildren().addAll();

        Scene scene = new Scene(ap);  // 場景

        primaryStage.setScene(scene);

        primaryStage.show();
    }

}
package top.onefine;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;



public class Main extends Application {
    public static void main(String[] args) {
        Application.launch(args);
//        System.out.println(System.getProperty("java.version"));
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.getIcons().add(new Image("Icon.png"));  // 設置圖標
        primaryStage.setTitle("demo");

        Button b1 = new Button("Button1");
        Button b2 = new Button("Button2");
        Button b3 = new Button("Button3");
        Button b4 = new Button("Button4");

        Group group1 = new Group();  // 容器
        Group group2 = new Group();
        group1.getChildren().addAll(b1, b2);
        group2.getChildren().addAll(b3, b4);

        AnchorPane ap = new AnchorPane();

        ap.setStyle("-fx-background-color: #FFFF00");
        ap.getChildren().addAll(group1, group2);
        AnchorPane.setTopAnchor(group1, 20.0);
        AnchorPane.setLeftAnchor(group1, 20.0);
        AnchorPane.setTopAnchor(group2, 20.0);
        AnchorPane.setLeftAnchor(group2, 120.0);

        b2.setLayoutY(120);  // 相對於group1
        b4.setLayoutY(120);  // 相對於group2

        Scene scene = new Scene(ap);  // 場景

        primaryStage.setScene(scene);

        primaryStage.show();
    }

}
package top.onefine;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;



public class Main extends Application {
    public static void main(String[] args) {
        Application.launch(args);
//        System.out.println(System.getProperty("java.version"));
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.getIcons().add(new Image("Icon.png"));  // 設置圖標
        primaryStage.setTitle("demo");
        primaryStage.setWidth(500);
        primaryStage.setHeight(500);

        Button b1 = new Button("Button1");
        Button b2 = new Button("Button2");
        Button b3 = new Button("Button3");
        Button b4 = new Button("Button4");

//        b3.setManaged(false);  // b3不受管理,即使下面設置group2是其父控件

        b4.setVisible(false);  // 設置b4不可見
        b1.setOpacity(0.3);  // 設置透明度
        Group group1 = new Group();  // 容器
        Group group2 = new Group();
        group1.getChildren().addAll(b1, b2);
        group2.getChildren().addAll(b3, b4);

        AnchorPane ap1 = new AnchorPane();
        AnchorPane ap2 = new AnchorPane();

		// 設置寬高
//        ap2.setPrefWidth();
//        ap2.setPrefHeight();

        ap1.getChildren().add(ap2);  // ap1爲ap2的父
        ap2.setStyle("-fx-background-color: #FF0000");

        ap1.setStyle("-fx-background-color: #FFFF00");
        ap1.getChildren().addAll(group1, group2);
        AnchorPane.setTopAnchor(group1, 20.0);
        AnchorPane.setLeftAnchor(group1, 20.0);
        AnchorPane.setTopAnchor(group2, 20.0);
        AnchorPane.setLeftAnchor(group2, 120.0);

        b2.setLayoutY(120);  // 相對於group1
        b4.setLayoutY(120);  // 相對於group2

        Scene scene = new Scene(ap1);  // 場景

        primaryStage.setScene(scene);

        primaryStage.show();

        // 設置寬高佔比一半
        AnchorPane.setTopAnchor(ap2, 0.0);
//        AnchorPane.setBottomAnchor(ap2, ap1.getHeight() / 2);  // 注意
        AnchorPane.setLeftAnchor(ap2, 0.0);
//        AnchorPane.setRightAnchor(ap2, ap1.getWidth() / 2);

        primaryStage.heightProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
//                AnchorPane.setBottomAnchor(ap2, newValue.doubleValue() / 2);
                AnchorPane.setBottomAnchor(ap2, ap1.getHeight() / 2);  // 注意
            }
        });

        primaryStage.widthProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
//                AnchorPane.setRightAnchor(ap2, newValue.doubleValue() / 2);
                AnchorPane.setRightAnchor(ap2, ap1.getWidth() / 2);
            }
        });

    }

}

2. HBox和VBox——水平佈局/垂直佈局

package top.onefine.client;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import top.onefine.control.MainCtl;

import java.io.IOException;
import java.net.URL;

public class Main extends Application {
    public static void main(String[] args) {
        Application.launch(args);
//        System.out.println(System.getProperty("java.version"));
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.getIcons().add(new Image("Icon.png"));  // 設置圖標
        primaryStage.setTitle("條碼識別");
//        primaryStage.setWidth(1680);
//        primaryStage.setHeight(1050);
        primaryStage.setWidth(1600);
        primaryStage.setHeight(900);
        Button button1 = new Button("按鈕1");
        Button button2 = new Button("按鈕2");
        Button button3 = new Button("按鈕3");
        Button button4 = new Button("按鈕4");
        Button button5 = new Button("按鈕5");



        HBox hBox = new HBox();  // 水平佈局
//        VBox vBox = new VBox();  // 水平佈局
        hBox.getChildren().addAll(button1, button2, button3, button4, button5);
        hBox.setPadding(new Insets(10));  // 內邊距
        hBox.setSpacing(20);  // 子組件間隔
        HBox.setMargin(button2, new Insets(20));  // 子組件外邊距
//        hBox.setAlignment(Pos.BOTTOM_CENTER);  // 設置對齊方式——底部居中
        hBox.setAlignment(Pos.CENTER);  // 設置對齊方式——居中


        Scene scene = new Scene(hBox);  // 場景
        primaryStage.setScene(scene);



        primaryStage.show();
    }

}

關於setManaged,setVisible,setOpacity:

package top.onefine.javafx;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.net.URL;

public class DemoTest extends Application {
    public static void main(String[] args) {
        Application.launch(args);
//        System.out.println(System.getProperty("java.version"));
    }

    static boolean isManaged = false;
    static boolean isVisible = false;
    static double opacityValue = 0;

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("demo");
        Button button1 = new Button("按鈕1");
        Button button2 = new Button("按鈕2");
        Button button3 = new Button("按鈕3");
        Button button4 = new Button("按鈕4");
        Button button5 = new Button("b3.setManaged(false)");
        Button button6 = new Button("b3.setVisible(false)");
        Button button7 = new Button("b3.setOpacity(0)");
        AnchorPane ap = new AnchorPane();
        ap.setStyle("-fx-background-color: #FF9631");
        HBox hBox = new HBox();
        hBox.setPadding(new Insets(20));
        hBox.setSpacing(10);
        hBox.getChildren().addAll(button1, button2, button3, button4);
        VBox vBox = new VBox();
        vBox.setSpacing(10);
        vBox.getChildren().addAll(button5, button6, button7);
        AnchorPane.setTopAnchor(vBox, 100.0);
        AnchorPane.setLeftAnchor(vBox, 20.0);
        ap.getChildren().addAll(hBox, vBox);

        Scene scene = new Scene(ap);
        primaryStage.setScene(scene);
        primaryStage.setTitle("setManaged,setVisible,setOpacity");
        primaryStage.show();

        button5.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                button3.setManaged(isManaged);
                new Print(hBox);
                isManaged = ! isManaged;
                button5.setText("b3.setManaged(" + isManaged + ")");
            }
        });

        button6.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                button3.setVisible(isVisible);
                new Print(hBox);
                isVisible = ! isVisible;
                button6.setText("b3.setVisible(" + isVisible + ")");
            }
        });

        button7.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                button3.setOpacity(opacityValue);
                new Print(hBox);
                opacityValue = Math.random();
                button7.setText("b3.setOpacity(" + opacityValue + ")");
            }
        });
    }
}

class Print {
    Print(HBox hBox) {
        System.out.println("當前HBox裏子組件數量:" + hBox.getChildren().size());
    }
}

3. BorderPane佈局類 方位佈局

注:當上下左右沒有設置寬高的時候,只會顯示中間部分

package top.onefine.javafx;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.net.URL;

public class DemoTest extends Application {
    public static void main(String[] args) {
        Application.launch(args);
//        System.out.println(System.getProperty("java.version"));
    }

    static boolean isManaged = false;
    static boolean isVisible = false;
    static double opacityValue = 0;

    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane bor = new BorderPane();
        bor.setStyle("-fx-background-color: #FFFF00");

        AnchorPane a1 = new AnchorPane();
        a1.setStyle("-fx-background-color: #FF0000");
        a1.setPrefWidth(100);
        a1.setPrefHeight(100);
        AnchorPane a2 = new AnchorPane();
        a2.setStyle("-fx-background-color: #00FF00");
        a2.setPrefWidth(100);
        a2.setPrefHeight(100);
        AnchorPane a3 = new AnchorPane();
        a3.setStyle("-fx-background-color: #0000FF");
        a3.setPrefWidth(100);
        a3.setPrefHeight(100);
        AnchorPane a4 = new AnchorPane();
        a4.setStyle("-fx-background-color: #000000");
        a4.setPrefWidth(100);
        a4.setPrefHeight(100);
        AnchorPane a5 = new AnchorPane();
        a5.setStyle("-fx-background-color: #FFFFFF");
//        a5.setPrefWidth(100);
//        a5.setPrefHeight(100);

        Button button = new Button("按鈕");


        bor.setTop(a1);
        bor.setBottom(a2);
        bor.setLeft(a3);
        bor.setRight(a4);
//        bor.setCenter(a5);

//        a5.getChildren().add(button);
//        BorderPane.setAlignment(button, Pos.CENTER);  // 設置子組件居中
        bor.setCenter(button);
        BorderPane.setAlignment(button, Pos.CENTER);  // 設置子組件居中

        Node center = bor.getCenter();
        System.out.println(center);

        Scene scene = new Scene(bor);
        primaryStage.setScene(scene);
        primaryStage.setTitle("demo");
        primaryStage.show();
    }
}

4. FlowPane佈局類

package top.onefine.javafx;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.*;
import javafx.stage.Stage;

import java.net.URL;

public class DemoTest extends Application {
    public static void main(String[] args) {
        Application.launch(args);
//        System.out.println(System.getProperty("java.version"));
    }

    static boolean isManaged = false;
    static boolean isVisible = false;
    static double opacityValue = 0;

    @Override
    public void start(Stage primaryStage) throws Exception {
        Button button1 = new Button("Button1");
        Button button2 = new Button("Button2");
        Button button3 = new Button("Button3");
        Button button4 = new Button("Button4");
        Button button5 = new Button("Button5");
        Button button6 = new Button("Button6");
        Button button7 = new Button("Button7");
        Button button8 = new Button("Button8");


        FlowPane flowPane = new FlowPane();
        flowPane.setStyle("-fx-background-color: #FFFF00");
        flowPane.getChildren().addAll(button1, button2, button3, button4, button5, button6, button7, button8);

        flowPane.setPadding(new Insets(10));  // 內邊距
        FlowPane.setMargin(button5, new Insets(10));  // 設置子組件外邊距
        flowPane.setAlignment(Pos.CENTER);  // 設置子組件對齊方式居中
        flowPane.setHgap(20);  // 設置組件間的水平間距
        flowPane.setVgap(30);  // 設置組件間的垂直間距
        flowPane.setOrientation(Orientation.VERTICAL);  // 設置排列方式:垂直方向,默認水平排列

        Scene scene = new Scene(flowPane);
        primaryStage.setScene(scene);
        primaryStage.setTitle("demo");
        primaryStage.show();
    }
}

5. GridPane佈局類

package top.onefine.javafx;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.*;
import javafx.stage.Stage;

import java.net.URL;

public class DemoTest extends Application {
    public static void main(String[] args) {
        Application.launch(args);
//        System.out.println(System.getProperty("java.version"));
    }

    static boolean isManaged = false;
    static boolean isVisible = false;
    static double opacityValue = 0;

    @Override
    public void start(Stage primaryStage) throws Exception {
        Button button1 = new Button("Button1");
        Button button2 = new Button("Button2");
        Button button3 = new Button("Button3");
        Button button4 = new Button("Button4");
        Button button5 = new Button("Button5");
        Button button6 = new Button("Button6");
        Button button7 = new Button("Button7");
        Button button8 = new Button("Button8");

        GridPane gridPane = new GridPane();
        gridPane.setStyle("-fx-background-color: #FFFF00");

        // 設置組件在GridPan裏面的幾列幾行
        gridPane.add(button1, 0, 0);
        gridPane.add(button2, 1, 0);
        gridPane.add(button3, 2, 0);
//        gridPane.add(button4, 3, 0);
        gridPane.add(button5, 0, 1);
        gridPane.add(button6, 1, 1);
        gridPane.add(button7, 2, 1);
        gridPane.add(button8, 3, 1);

        gridPane.setHgap(10);  // 水平間距
        gridPane.setVgap(10);  // 垂直間距

        gridPane.setPadding(new Insets(10));  // 設置內邊距

        GridPane.setMargin(button5, new Insets(10));  // 設置某組件外邊距

        gridPane.setAlignment(Pos.CENTER);  // 對齊方式居中

        // 另一種方式
//        GridPane.setConstraints(button4, 3, 0);
//        gridPane.getChildren().addAll(button4);

        // 另一種方式
        GridPane.setRowIndex(button4, 0);
        GridPane.setColumnIndex(button4, 3);
        gridPane.getChildren().add(button4);

        // 單獨設置某一行/列的間距
        gridPane.getColumnConstraints().add(new ColumnConstraints(100));  // 設置第一列的間距
        gridPane.getRowConstraints().add(new RowConstraints(50));  // 設置第一行的間距

        Scene scene = new Scene(gridPane);
        primaryStage.setScene(scene);
        primaryStage.setTitle("demo");
        primaryStage.show();
    }
}

6. StackPane佈局類


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章