其他分享
首页 > 其他分享> > Fx 网格布局

Fx 网格布局

作者:互联网

      网格布局

 

将整个面板划分为若干个格子,每个格子的大小是一样的,每个格子中可以放置一个控件(布局),类似于表格的方式。在网格布局 中放入控件的时候,还需要指定位置

 

GridPane gridPane = new GridPane();

 

 

 

代码讲解 

 

 

 

//新建文本标签:用户名

 

Label l1 = new Label("用户名");

 

//新建输入框

 

TextField name = new TextField("请输入用户名");

 

//新建文本标签:用户密码

 

Label l2 = new Label("用户密码");

 

//新建密码框

 

PasswordField pwd = new PasswordField();

 

//登录按钮的创建

 

Button login = new Button("登录");

 

//指定位置:按照之前的位置图进行对比并完成位置推理

 

gridPane.add(l1, 0, 0);

 

gridPane.add(name, 1, 0);

 

gridPane.add(l2, 0, 1);

 

gridPane.add(pwd, 1, 1);

 

gridPane.add(login, 0, 2);

 

网格布局默认是左上角的

 

 

 

 

 

 

代码可以调整

gridPane.setAlignment(Pos.CENTER);

 

public enum Pos {

TOP_LEFT 左上 TOP_CENTER   居上

TOP_RIGHT 右上 CENTER_LEFT   居左

CENTER   居中

CENTER_RIGHT   居右

BOTTOM_LEFT   左下

BOTTOM_CENTER   居下

BOTTOM_RIGHT   右下

}

 

 可以观察到每个控件之间挨得太近了,可以使用代码将距离调整开

 

 

 gridPane.setHgap(10);  //两个格子之间的水平距离

gridPane.setVgap(10);   //两个各自之间的垂直距离

           

 

完整代码

@Override public void start(Stage primaryStage) throws IOException{

//新建布局

 GridPane gridPane = new GridPane();

//设置居中方式

gridPane.setAlignment(Pos.CENTER);

//调整间隙

gridPane.setHgap(10);

gridPane.setVgap(10);

//新建文本标签:用户名

Label l1 = new Label("用户名");

//新建输入框

TextField name = new TextField("请输入用户名");

//新建文本标签:用户密码

Label l2 = new Label("用户密码");

//新建密码框

PasswordField pwd = new PasswordField();

//登录按钮的创建

Button login = new Button("登录");

 

//添加控件进行位置绑定

gridPane.add(l1, 0, 0)

gridPane.add(name, 1, 0);

gridPane.add(l2, 0, 1);

gridPane.add(pwd, 1, 1);

gridPane.add(login, 0, 2);

//生成场景并完成布局绑定,同时设定场景大小

Scene scene = new Scene(gridPane, 300, 200);

//主容器标题设置

primaryStage.setTitle("网格登录");

//给主容器绑定场景(让场景显示出来)

primaryStage.setScene(scene);

//不要忘了这一行,让主容器显示

primaryStage.show();

接下来加入一些新的控件

单选框的使用

RadioButton men = new RadioButton("

标签:primaryStage,Fx,gridPane,布局,网格,Label,add,new,choiceBox
来源: https://www.cnblogs.com/aaabaa/p/16390572.html