手拉手JavaFX布局

原创

QGS

发布于 2024-01-24 22:52:25

1820

发布于 2024-01-24 22:52:25

文章被收录于专栏：QGS星球

FlowPane布局

Flowpane是一个容器。它在一行上排列连续的子组件，并且如果当前行填充满了以后，则自动将子组件向下推到一行

public class FlowPanedemo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("FlowPanedemo");
        FlowPane flowPane = new FlowPane();
        //设置控件的垂直水平间距
        flowPane.setHgap(10);
        flowPane.setVgap(10);
        Button button1 = new Button("button1");
        Button button2 = new Button("button2");
        button2.setPrefSize(100,100);
        Text text = new Text();
        text.setText("hello world");
        text.setFill(Color.RED);
        //复选框
        CheckBox checkBox = new CheckBox();
        checkBox.setText("123");
        RadioButton radioButton = new RadioButton();
        radioButton.setText("radiobuttion");
        TextField textField = new TextField();
        textField.setText("111");
        flowPane.getChildren().addAll(button1,button2,text,checkBox,radioButton,textField);
        Scene scene = new Scene(flowPane,500,300);
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch();
    }
}

HBox水平布局

边框样式：

1. border-style边框样式(hidden隐藏、none无边框、dotted电线、dashed虚线、soild实线、double两个边框、groove3D沟槽边框、ridge3D脊边框、inset3D嵌入边框、outset3D突出边框)

缩写：

①border-style: 上右下左;

②border-style: 上左右下;

③border-style: 上下左右;

④border-style: 上下左右;

border-width边框宽度(5px、medium):可以单独设置一边的宽度。

border-top-width上边框、border-bottom-width下边框、border-right-width有边框、border-left-width左边框。

border-color边框颜色: 可以单独设置一边的颜色。

border-top-color、border-bottom-color、border-right-color、border-left-color

缩写：

①border: 5px solid red;

②border-top:5px solid red ;

③border-bottom:5px solid red ;

④border-right:5px solid red ;

⑤border-left:5px solid red ;

轮廓

轮廓样式：轮廓是在边框外面的一层，其用法同边框。

outline-style

outline-color

outline-width

缩写：outline:green dotted thick ;

边距

边距：（百分数、em、px）

margin-top

margin-bottom

margin-right

margin-left

缩写：margin: 上右下左;

填充

填充：（百分数、em、px）

padding-top

padding-bottom

padding-left

padding-right

缩写：padding: 上右下左;

尺寸

尺寸：（百分数、em、px）

包括height、width

height、max-height、min-height

width、max-width、min-width

//设置控件间的间距

hbox.setSpacing(10);

//设置内边距

Hbox.setPadding(new Insets(10));

//设置某个组件的边距

Hbos.setMargin(b1,new Insets(10))

//设置水平居中方式

Hbox.setAlignment(Pos.CENTER);

案例

public class HBoxDemo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("HBoxDemo");
        Group group = new Group();
            //创建水平布局
        HBox hbox = new HBox();
        //配置背后颜色
        hbox.setStyle("-fx-background-color: #336699;");
        hbox.setMinWidth(300);
        hbox.setMinHeight(50);
        group.getChildren().add(hbox);
        //设置控件间的间距
        hbox.setSpacing(10);
        Button button = new Button();
        button.setText("确定");
        Text text = new Text();
        text.setText("hello");
        text.setFont(Font.font("宋体",30));
        //Insets:设置偏移量 上右下左
        hbox.setMargin(button,new Insets(10,0,0,0));
        hbox.setMargin(text,new Insets(10,0,0,0));
        hbox.getChildren().addAll(button,text);
        Scene scene = new Scene(group,500,400);
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch();
    }
}

VBox垂直布局

Rectangle矩形、Label标签、TextArea文本域（输入框）、Alignment对齐

public void start(Stage stage) throws Exception {
        stage.setTitle("VBoxdemo");
        Group group = new Group();
        TextArea mytestArea =new TextArea();
        HBox hbox = new HBox(50);
        hbox.setMinWidth(600);
        hbox.setMinHeight(100);
        hbox.setStyle("-fx-background-color: #336699;");
        VBox vbox = new VBox(50);
        vbox.setMinWidth(100);
        vbox.setMinHeight(400);
        vbox.setStyle("-fx-background-color: #330000;");
        Rectangle r1 = new Rectangle(200,200);
        r1.setY(300);
        r1.setX(300);
        Label lbl =new Label("VBox");
        group.getChildren().addAll(hbox,vbox,r1);
        Scene scene =new Scene(group,600,500, Color.rgb(0,0,0,0));
        stage.setScene(scene);
        stage.show();
    }
public void start(Stage primaryStage) {
        TextArea myTextArea = new TextArea();
        VBox vbox = new VBox();
        vbox.getChildren().add(myTextArea);
        //设置以后跟随外边框增长
        VBox.setVgrow(myTextArea, Priority.ALWAYS);
        Scene scene = new Scene(hbox, 320, 112, Color.rgb(0, 0, 0, 0));
        primaryStage.setScene(scene);
        primaryStage.show();
    }

Bordderpane边框窗格

JavaFX BorderPane布局、HyperLink超级链接、Hyper超级、Insets插入、

BorderPane布局顶部，底部，左，右或中心区域中的子节点。每个区域只能有一个节点。BorderPane的顶部和底部区域允许可调整大小的节点占用所有可用宽度。左边界区域和右边界区域占据顶部和底部边界之间的可用垂直空间。默认情况下，所有边界区域尊重子节点的首选宽度和高度。放置在顶部，底部，左侧，右侧和中心区域中的节点的默认对齐方式如下：

顶部: Pos.TOP_LEFT

底部: Pos.BOTTOM_LEFT

左侧: Pos.TOP_LEFT

右侧: Pos.TOP_RIGHT

中心: Pos.CENTER

案例：

public void start(Stage stage) throws Exception {
        stage.setTitle("borderpane测试");
        Image image = new Image(new FileInputStream("F:\\IDEADemo\\hello\\Snipaste_2022-10-12_20-03-32.jpg"));
        BorderPane borderPane = new BorderPane();
        borderPane.setStyle("-fx-background-color: #330000;");
        HBox top = new HBox();
        top.setMinWidth(30);
        top.setMinHeight(30);
        Text text = new Text("Welcome");
        text.setFont(Font.font("宋体", FontWeight.BOLD,30));
        top.setStyle("-fx-background-color: #336699;");
        //设置top居中
        top.setAlignment(Pos.CENTER);
        top.getChildren().addAll(text);
        VBox letf = new VBox();
        letf.setMinWidth(50);
        letf.setStyle("-fx-background-color: #226699;");
        Button b1 =new Button("改色");
        Button b2 = new Button("改色");
        Button b3 = new Button("改色");
        Button b4 = new Button("改色");
        letf.getChildren().addAll(b1,b2,b3,b4);
        VBox right = new VBox();
        Button r1 =new Button("11");
        Button r2 = new Button("22");
        Button r3 = new Button("33");
        Button r4 = new Button("44");
        right.setStyle("-fx-background-color: #111199;");
        right.setMinWidth(50);
        right.getChildren().addAll(r1,r2,r3,r4);
        HBox Bottom= new HBox();
        Hyperlink hl = new Hyperlink("www.baidu.com");
        Bottom.setMinHeight(30);
        Bottom.setStyle("-fx-background-color: #113339;");
        Button close = new Button("关闭系统");
        close.setOnAction((e)->{
            Platform.exit();
        });
        Bottom.getChildren().addAll(close,hl);
        Bottom.setAlignment(Pos.CENTER);
       GridPane Center = new GridPane();
       Center.setMinWidth(350);
        borderPane.setTop(top);
        borderPane.setLeft(letf);
       // borderPane.setRight(right);
        borderPane.setBottom(Bottom);
        borderPane.setCenter(Center);
        b1.setOnAction((e)->{
            Center.setStyle("-fx-background-color: #113339;");
        });
        b2.setOnAction((e)->{
            Center.setStyle("-fx-background-color: #222239;");
        });
        b3.setOnAction((e)->{
            Center.setStyle("-fx-background-color: #333339;");
        });
        b4.setOnAction((e)->{
            Center.setStyle("-fx-background-color: #444439;");
        });
        //获取鼠标移动坐标
        Center.addEventFilter(MouseEvent.MOUSE_MOVED, e->{
            String xy="鼠标坐标为:"+e.getX()+","+e.getY();
            text.setText(xy);
            text.setLayoutX(e.getX()+70);
            text.setLayoutY(e.getY()+70);
        });
        Scene scene =new Scene(borderPane,400,300);
        stage.getIcons().add(image);
        stage.setScene(scene);
        stage.show();
    }

GirdPane布局

Gird网格、pane窗格、Lines线、Visible可见的、ColumnConstraints列约束、priority优先事项、always总是、column列、

网格布局

GridPane通常用于布局：表单布局

GridPane可以在行，列或单元格级别指定约束。例如，我们可以设置包含输入文本字段的第二列，以在窗口调整大小时调整大小。

使用Java FX创建表格的时候，这个布局非常方便。

包javafx.scene.layout名为GridPane这个类提供了 11 个属性，它们是 -

alignment- 此属性可以设置位置，使用方式setAlignment()方法设置此属性的值。

放置在顶部，底部，左侧，右侧和中心区域中的节点的默认对齐方式如下：

顶部: Pos.TOP_LEFT
底部: Pos.BOTTOM_LEFT
左侧: Pos.TOP_LEFT
右侧: Pos.TOP_RIGHT
中心: Pos.CENTER

hgap- 此属性的类型为double，表示列之间的水平差距。
vgap- 属性的类型为double，它表示行之间的垂直间距。
gridLinesVisible- 此属性是布尔类型，显示表格线

案例：

public class GridPanedemo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("gridpane测试");
        BorderPane borderpane = new BorderPane();
        GridPane gridPane = new GridPane();
        gridPane.setStyle("-fx-background-color: #C0C0C0;");
        //表格实线
        gridPane.setGridLinesVisible(true);
        gridPane.setPadding(new Insets(5));
        //水平间距
        gridPane.setHgap(5);
        //垂直间距
        gridPane.setVgap(50);
        //3列
        ColumnConstraints column1 = new ColumnConstraints(100);
        ColumnConstraints column2 = new ColumnConstraints(50, 150, 300);
        ColumnConstraints column3 = new ColumnConstraints(100);
        column2.setHgrow(Priority.ALWAYS);
        gridPane.getColumnConstraints().addAll(column1, column2,column3);
        Label userNameLabel = new Label("用户名");
        TextField userNameField = new TextField();
        Label passwordLabel = new Label("密码");
        PasswordField passwordField =new PasswordField();
        Text userNameWarn = new Text("用户名不能为空");
        Text passwordWarn = new Text("密码不能空");
        Button saveButt = new Button("保存");
        // userNameLabel  列 行
        GridPane.setHalignment(userNameLabel, HPos.RIGHT);
        gridPane.add(userNameLabel, 0, 0);
        gridPane.add(userNameWarn,3,0);
        gridPane.add(passwordWarn,3,1);
        // userNameField
        GridPane.setHalignment(userNameField, HPos.RIGHT);
        gridPane.add(userNameField, 1, 0);
        // passwordLabel
        GridPane.setHalignment(passwordLabel, HPos.LEFT);
        gridPane.add(passwordLabel, 0, 1);
        // passwordField
        GridPane.setHalignment(passwordField, HPos.LEFT);
        gridPane.add(passwordField, 1, 1);
        // Save button
        GridPane.setHalignment(saveButt, HPos.RIGHT);
        gridPane.add(saveButt, 1, 2);
        borderpane.setCenter(gridPane);
        Scene scene =new Scene(borderpane,600,500);
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch();
    }
}

二、

public void start(Stage stage) throws Exception {
        //舞台名称
        stage.setTitle("JavaFX Welcome");
        FileInputStream fileInputStream =new FileInputStream("F:\\IDEADemo\\hello\\Snipaste_2022-10-12_20-03-32.jpg");
        Image image =new Image(fileInputStream);
        stage.getIcons().add(image);
        GridPane grid = new GridPane();
        //grid.setBackground(new Background(new Image(fileinputStream)));
        //GridPane内容居中
        grid.setAlignment(Pos.CENTER);
        //水平间距
        grid.setHgap(10);
        //垂直间距
        grid.setVgap(10);
        //填充:距离上下左右外框
        grid.setPadding(new Insets(25, 25, 25, 25));
       // grid.setGridLinesVisible(true);
        Text scenetitle = new Text("欢迎");
        scenetitle.setFont(Font.font("宋体", FontWeight.NORMAL, 20));
        //、0列、0行、占用2列、占用1行
        grid.add(scenetitle, 0, 0, 2, 1);
        Label userName = new Label("账号:");
        grid.add(userName, 0, 1);
        TextField userTextField = new TextField();
        grid.add(userTextField, 1, 1);
        Label pw = new Label("密码:");
        grid.add(pw, 0, 2);
        PasswordField pwBox = new PasswordField();
        grid.add(pwBox, 1, 2);
        Button btn = new Button("登入");
        //登录按钮放到水平布局HBox中方便控制左右
        HBox hbBtn = new HBox(10);
        hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
        hbBtn.getChildren().add(btn);
        grid.add(hbBtn, 1, 4);
        final Text actiontarget = new Text();
        grid.add(actiontarget, 1, 6);
        btn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent e) {
                actiontarget.setFill(Color.FIREBRICK);
                actiontarget.setText("按下登录按钮");
            }
        });
        Scene scene = new Scene(grid, 300, 275);
        stage.setScene(scene);
        stage.show();
    }

FlowPane布局

public void start(Stage stage) throws Exception {
		stage.setTitle("FlowPaneDemo");
		Button button1 =new Button("button1");
		Button button2 =new Button("button1");
		Button button3 =new Button("button1");
		Button button4 =new Button("button1");
		Button button5 =new Button("button1");
		Button button6 =new Button("button1");
		FlowPane flow = new FlowPane();
		flow.setStyle("-fx-background-color:#f6d3ab");
		flow.setPadding(new Insets(10));
		//组件的水平间距
		flow.setHgap(10);
		flow.getChildren().addAll(button1,button2,button3,button4,button5,button6);
		Scene scene =new Scene(flow,300,400);
		stage.setScene(scene);
		stage.show();
	}

Titlepane布局可折叠组件

Content内容、

public void start(Stage stage) throws Exception {
        HBox h1 = new HBox();
        CheckBox c1 =new CheckBox("ok");
        CheckBox c2 = new CheckBox("on");
        h1.getChildren().addAll(c1,c2);
        TitledPane titledPane = new TitledPane("标题", h1);
        //titledPane.setAlignment(Pos.BASELINE_CENTER);
        //
        GridPane grid = new GridPane();
        grid.setVgap(4);
        grid.setPadding(new Insets(5,5,5,5));
        grid.add(new Button("按钮1"),0,0);
        grid.add(new Button("按钮2"),1,0);
        grid.add(new Button("按钮3"),0,1);
        grid.add(new Button("按钮4"),1,1);
        TitledPane titledPane1 =new TitledPane("按钮",grid);
        HBox hbox = new HBox(10);
        hbox.setPadding(new Insets(20, 0, 0, 20));
        hbox.getChildren().setAll(titledPane,titledPane1);
        hbox.setAlignment(Pos.BASELINE_CENTER);
        Scene scene = new Scene(hbox, 350, 250);
        stage.setScene(scene);
        stage.show();
}
titledPane1.setGraphic(new Button("text"));

Accordion布局手风琴布局

可以使用手风琴(accordion)控件对标题窗格进行分组。

public void start(Stage stage) throws Exception {
		Group g = new Group();
        TitledPane t1 = new TitledPane("T1", new Button("B1"));
        TitledPane t2 = new TitledPane("T2", new Button("B2"));
        TitledPane t3 = new TitledPane("T3", new Button("B3"));
        t3.setText("T3");
        t3.setContent(new Button("B3"));
        Accordion accordion = new Accordion();
        accordion.getPanes().addAll(t1, t2, t3);
        g.getChildren().add(accordion);
        //accordion事件
        accordion.expandedPaneProperty()
                .addListener((ObservableValue<? extends TitledPane> ov, TitledPane old_val, TitledPane new_val) -> {
 if (new_val != null) {
                        System.out.println(accordion.getExpandedPane().getText());
                    }
                });
        Scene scene = new Scene(g, 550, 250);
        stage.setScene(scene);
        stage.show();
	}

AnchorPane布局（锚定）

锚定布局一般配合其他布局使用

public void start(Stage stage) throws Exception {
        stage.setTitle("hello AnchorPane");
        HBox hbox =new HBox();
        Button b1 =new Button("hello");
        Button b2 = new Button("World");
        hbox.getChildren().addAll(b1,b2);
        AnchorPane acpane = new AnchorPane();
        acpane.getChildren().addAll(hbox);
        //距离顶部50，距离左边10
        AnchorPane.setTopAnchor(hbox,50.0);
        AnchorPane.setLeftAnchor(hbox,10.0);
//        AnchorPane.setBottomAnchor();
//        AnchorPane.setRightAnchor();
        Scene scene = new Scene(acpane,500,400);
        stage.setScene(scene);
        stage.show();
    }
stage.setTitle("AbchorDemo");
		Button b1 =new Button("b1");
		Button b2 =new Button("b2");
		//锚点布局
		AnchorPane anchorPane =new AnchorPane();
		anchorPane.setStyle("-fx-background-color:#e8f2fe");
		anchorPane.getChildren().addAll(b1,b2);
		//距离Top10.0--可以自动适配屏幕大小
		anchorPane.setTopAnchor(b1, 10.0);
		anchorPane.setLeftAnchor(b1, 10.0);
		anchorPane.setBottomAnchor(b2, 10.0);
		//设置内边距
		anchorPane.setPadding(new Insets(10));
		//false解除父类对b1的管理
		//b1.setManaged(false);
		//false不可见
		//b1.setVisible(false);
		//设置透明度
		b1.setOpacity(0.1);
		anchorPane.setOnMouseClicked(new EventHandler<MouseEvent>() {
			@Override
 public void handle(MouseEvent event) {
				System.out.println("被点击了");
			}
		});
		Scene scene =new Scene(anchorPane,300,400);
		stage.setScene(scene);
		stage.show();

TextFlow布局类

public void start(Stage stage) throws Exception {
		stage.setTitle("TextFlowDemo");
		Text t1 =new Text("t1");
		Text t2 =new Text("t2freagrthbagragargaefacw");
		Text t3 =new Text("t3");
		t1.setFont(Font.font(20));
		t1.setFill(Paint.valueOf("#f8f8f8"));
		TextFlow textFlow =new TextFlow();
		textFlow.setStyle("-fx-background-color:#e1e6f6");
		textFlow.getChildren().addAll(t1,t2,t3);
		//边距
		textFlow.setPadding(new Insets(10));
		Scene scene =new Scene(textFlow,300,400);
		stage.setScene(scene);
		stage.show();
		stage.widthProperty().addListener(new ChangeListener<Number>() {
			@Override
 public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
				System.out.println(textFlow.getWidth());
			}
		});
	}

TilePane布局

public void start(Stage stage) throws Exception {
		stage.setTitle("TilePaneDemo");
		Button button1 =new Button("button1");
		Button button2 =new Button("button1");
		Button button3 =new Button("button1");
		Button button4 =new Button("button1");
		Button button5 =new Button("button1");
		Button button6 =new Button("button1");
		TilePane tile =new TilePane();
		tile.setStyle("-fx-background-color:#e1e6f6");
		tile.setMargin(button1, new Insets(10));
		tile.setHgap(10);
		//tile.setPadding(new Insets(10));
		tile.setAlignment(Pos.BASELINE_CENTER);
		tile.getChildren().addAll(button1,button2,button3,button4,button5,button6);
		Scene scene =new Scene(tile,300,400);
		stage.setScene(scene);
		stage.show();
	}

DialogPane布局

@Override
 public void start(Stage stage) throws Exception {
		stage.setTitle("DialogPaneDemo");
		BorderPane bP =new BorderPane();
		TextArea textArea =new TextArea();
		Button button =new Button("帮助");
		bP.setCenter(textArea);
		bP.setTop(button);
		button.setOnAction((e)->{
			DialogPane daPe =new DialogPane();
			Stage s =new Stage();
			s.setTitle("帮助");
			daPe.setHeaderText("hello javafx");
			daPe.setContentText("the is text");
			daPe.getButtonTypes().add(ButtonType.APPLY);
			daPe.getButtonTypes().add(ButtonType.CANCEL);
			daPe.getButtonTypes().add(ButtonType.CLOSE);
			Button apply =(Button) daPe.lookupButton(ButtonType.APPLY);
			Button close =(Button) daPe.lookupButton(ButtonType.CLOSE);
			ImageView imgImageView =new ImageView("Img/Snipaste_2022-10-17_17-14-25.jpg");
			daPe.setGraphic(imgImageView);
			//设置扩展内容
			daPe.setExpandableContent(new Text("扩展内容"));
			daPe.setExpanded(true);//默认打开
			Scene sc =new Scene(daPe,400,200);
			s.setScene(sc);
			//模态化对话框
			s.initOwner(stage);
			s.initModality(Modality.WINDOW_MODAL);
			s.show();
			apply.setOnAction(new EventHandler<ActionEvent>() {
				@Override
 public void handle(ActionEvent event) {
					System.out.println("apply");
				}
			});
			close.setOnAction(new EventHandler<ActionEvent>() {
				@Override
 public void handle(ActionEvent event) {
					System.out.println("close");
				}
			});
		});
		Scene scene =new Scene(bP,300,400);
		stage.setScene(scene);
		stage.show();
	}

TabPane和Tab切换面板组件

public void start(Stage stage) throws Exception {
		stage.setTitle("TabPaneDemo");
		AnchorPane an =new AnchorPane();
		TabPane tabPane =new TabPane();
		tabPane.setStyle("-fx-background-color: #336699");
		tabPane.setPrefWidth(300);
		tabPane.setPrefHeight(300);
		Tab tab1 =new Tab("tab1");
		Tab tab2 =new Tab("tab2");
		Tab tab3 =new Tab("tab3");
		VBox vBox =new VBox(10);
		vBox.setStyle("-fx-background-color: #f7f9ff");
		vBox.getChildren().addAll(new Button("button1"),new Button("button2"));
		tab1.setContent(vBox);
		HBox hBox =new HBox(10);
		hBox.setStyle("-fx-background-color: #f77a49");
		hBox.getChildren().addAll(new Button("button1"),new TextField("text"));
		tab2.setContent(hBox);
		tabPane.getTabs().addAll(tab1,tab2,tab3);
		an.getChildren().add(tabPane);
		Scene scene =new Scene(an);
		stage.setScene(scene);
		stage.setWidth(600);
		stage.setHeight(400);
		stage.show();
	}

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

登录后参与评论

0 条评论

热度