利用JavaFx开发RIA桌面应用-布局说明

转载请注明来源-作者@loongshawn：http://blog.csdn.net/loongshawn/article/details/52878527

1.概要

JavaFX 带有自己的布局类，如图所示（来自 Amy Fowler 在 JavaOne 2011 的演示文稿），旨在便于对任何类型的平台和任何大小的场景进行用户界面布局，这些类位于 javafx.scene.layout 程序包中。

下图则对每种布局做了说明：

2.具体说明

本文仅对其中四个经常使用的布局作演示说明，分别是VBox、HBox、BorderPane、GridPane，当然要设计出比较优美的界面，仅仅靠这些完全不够，还需要大家自我修行，本文仅仅做一个初级的介绍，让大家对布局有一个视觉上的了解。

2.1 VBox

垂直布局，往布局中添加的控件依据添加顺序从上到下垂直排列。如下，往vbox中添加了3个标签。

VBox vBox = new VBox();Label label1 = new Label("测试1");Label label2 = new Label("测试2");Label label3 = new Label("测试3");vBox.getChildren().addAll(label1,label2,label3);

效果图：

2.2 HBox

水平布局，往布局中添加的控件依据添加顺序从左到右水平排列。如下，往hbox中添加了3个标签。

HBox hBox= new HBox();Label label1 = new Label("测试1");Label label2 = new Label("测试2");Label label3 = new Label("测试3");hBox.getChildren().addAll(label1,label2,label3);

效果图：

2.3 BorderPane

上中下左右经典布局，提供了5个方位的布局设置方式。如下，往borderPane中添加了5个标签。

BorderPane borderPane = new BorderPane();Label label1 = new Label("测试1-上");Label label2 = new Label("测试2-中");Label label3 = new Label("测试3-左");Label label4 = new Label("测试4-右");Label label5 = new Label("测试5-下");borderPane.setTop(label1);borderPane.setCenter(label2);borderPane.setLeft(label3);borderPane.setRight(label4);borderPane.setBottom(label5);

效果图：

2.4 GridPane

网格布局，可以让用户自由配置控件方位，可以设计出更美的界面。

        GridPane grid = new GridPane();        grid.setVgap(10);        grid.setHgap(10);        grid.setPadding(new Insets(50,0,0,0));        //grid.setGridLinesVisible(true);        grid.setAlignment(Pos.CENTER);        Text serverName = new Text(Constant.SERVER_NAME);        ComboBox serverNameInput = myStyleComboBox.getComboBox(1,1);        serverNameInput.setEditable(true);        serverNameInput.setMaxWidth(Double.MAX_VALUE);        grid.add(serverName,1,0,2,1);        grid.add(serverNameInput,3,0);        grid.setHgrow(serverNameInput,Priority.ALWAYS);        Text userName = new Text(Constant.USER_NAME);        ComboBox userNameInput = myStyleComboBox.getComboBox(1,2);        userNameInput.setEditable(true);        userNameInput.setMaxWidth(Double.MAX_VALUE);        grid.add(userName,1,1,2,1);        grid.add(userNameInput,3,1);        Text passWord = new Text(Constant.PASS_WORD);        PasswordField passWordInput = new PasswordField();        grid.add(passWord,1,2,2,1);        grid.add(passWordInput,3,2);        Text databaseName = new Text(Constant.DATABASE);        ComboBox databaseNameInput = myStyleComboBox.getComboBox(1,3);        databaseNameInput.getEditor().setEditable(false);        databaseNameInput.setEditable(true);        databaseNameInput.setMaxWidth(Double.MAX_VALUE);        grid.add(databaseName,1,3,2,1);        grid.add(databaseNameInput,3,3);        Text databaseConfig = new Text(Constant.DATABASE_CONFIG);        TextField databaseConfigInput = new TextField();        Button buttonOfDataPath = myStyleButton.getShadowButton(Constant.BROWSE, ImageUtil.getImageView("image/upload_file.png"));        buttonOfDataPath.getStyleClass().add("button-data");        grid.add(databaseConfig,1,4,2,1);        grid.add(databaseConfigInput,3,4);        grid.add(buttonOfDataPath,4,4);        Text searchType = new Text(Constant.SEARCH_TYPE);        ToggleGroup toggleGroup = new ToggleGroup();        RadioButton radioButtonSingle = new RadioButton();        RadioButton radioButtonBatch = new RadioButton();        toggleGroup.getToggles().addAll(radioButtonSingle,radioButtonBatch);        radioButtonSingle.setText(Constant.SINGLE_SEARCH);        radioButtonBatch.setText(Constant.BATCH_SEARCH);        grid.add(searchType,1,5,2,1);        grid.add(radioButtonSingle,3,5);        grid.add(radioButtonBatch,3,6);        CheckBox remenberPassWord = new CheckBox();        Text remenberPassWordTitle = new Text(Constant.REMENBER_PASS_WORD);        grid.add(remenberPassWord,1,7);        grid.add(remenberPassWordTitle,2,7);

效果图：

各控件在网格中的分布：

相关文章：

• 《 利用JavaFx开发RIA桌面应用-TableView操作》
• 《 利用JavaFx开发RIA桌面应用-Clipboard剪贴板操作》
• 《利用JavaFx开发RIA桌面应用-TextField替换PasswordField做密码框》
• 《利用JavaFx开发RIA桌面应用-半透明界面设计》
• 《利用JavaFx开发RIA桌面应用-加载等待界面设计》
• 《利用JavaFx开发RIA桌面应用-文件拖拽》
• 《利用JavaFx开发RIA桌面应用-改变stage的标题栏的图标》
• 《利用JavaFx开发RIA桌面应用-事件监听》
• 《利用JavaFx开发RIA桌面应用-ComboBox组合编辑框水平增长》
• 《利用JavaFx开发RIA桌面应用-布局说明》
• 《利用JavaFx开发RIA桌面应用-在线资料》