JavaFx如何动态的添加组件,以及如何获取添加的组件中填写的值

动态添加组件

javafx布局

这里就只介绍了,我主要用到的两种。

VBox

   VBox布局将子节点堆叠在垂直列中。新添加的子节点被放置在上一个子节点的下面。默认情况下,VBox尊重子节点的首选宽度和高度。
  当父节点不可调整大小时,例如Group节点,最大垂直列的宽度基于具有最大优选宽度的节点。默认情况下,每个子节点与左上(Pos.TOP_LEFT)位置对齐。

HBox

   HBox布局类将JavaFX子节点放在水平行中。 新的子节点附加到右侧的末尾。默认情况下,HBox布局尊重子节点的首选宽度和高度。当父节点不可调整大小时,例如Group节点,HBox的行高度设置为子节点的最大首选高度。
   默认情况下,每个子节点与左上(Pos.TOP_LEFT)位置对齐。
我们可以通过编程方式改变HBox的布局约束,例如边框,填充,边距,间距和对齐。

下面是在SceneBuilder可视化工具上面的布局效果,
JavaFx如何动态的添加组件,以及如何获取添加的组件中填写的值_第1张图片
其中HBox部分是动态添加的部分,这一部分是利用代码实现的。

之所以这样设计的原因

  1. 想让填写的模块从上到下依次排列(VBox)
  2. 想让每一个模块内部按照从左到右的顺序进行添加(HBox)。

JavaFx如何动态的添加组件,以及如何获取添加的组件中填写的值_第2张图片
具体添加模块的代码:

当然这里面有些关于位置的设定,我是通过可视化工具,先找到差不多的位置和效果,然后根据fxml文档中节点的属性进行设置的。

    @FXML
    private VBox timebox;          //填写时间的板块
//点击添加时间
@FXML
void addtimecustom(MouseEvent event) {
    //理论上来说,下面这种方式应该也是可以的,但是不知道为什么就是出不来效果
    //AnchorPane time1 = new AnchorPane(timecustom);
    //timebox.getChildren().add(time1);

    HBox timeall = new HBox();

    TextField time = new TextField();
    time.setPrefHeight(6.0);
    time.setPrefWidth(40.0);
    time.setLayoutY(2.0);
    timeall.getChildren().add(time);

    Label time1 = new Label("  : ");
    time1.setLayoutX(53.0);
    time1.setLayoutY(-2.0);
    time1.prefHeight(28.0);
    time1.setPrefWidth(19.0);
    timeall.getChildren().add(time1);

    TextField time2 = new TextField();
    time2.setPrefHeight(6.0);
    time2.setPrefWidth(40.0);
    time2.setLayoutY(2.0);
    timeall.getChildren().add(time2);

    timebox.setSpacing(10.0);
    timebox.getChildren().add(timeall);
}

    //点击减少时间段
    @FXML
    void subtimecustom(MouseEvent event) {
        timebox.getChildren().remove(0);//这个index 0 是删除视觉上面排在第一个的。
    }

获取动态添加组件中填写的值

获取值之前,需要清楚,谁是父节点,谁是子节点。从本文的例子上面来说,VBox是HBox的父节点,HBox是TextField、Label的父节点。

清楚了这些之后就比较简单了,主要使用了getChildren()的方法,涉及到强制转换对象。

代码如下:
思路:运用了两个循环

  1. 第一个循环负责遍历VBox下面所有的HBox节点
  2. 第二个循环负责遍历HBox下面的TextField并且获取其中的值。
    List  getcustomtime(){
        //ObservableList timeNodes
        //这种写法没有问题,但是没有办法绕过中间的那个冒号
        //for (Node node : timebox.getChildren()) {
            //time = (HBox)node;
            //for (Node node1 : time.getChildren()){
                //TextField text =(TextField) node1;

            //}
        //}
        List<String> list = new ArrayList<String>();
        for(int i = 0; i <timebox.getChildren().size(); i++){
            time = (HBox) timebox.getChildren().get(i);
            StringBuilder str = new StringBuilder();
            for(int j = 0; j < time.getChildren().size(); j ++){
                if(j == 1){ str.append(":");}
                else {
                    TextField text = (TextField) time.getChildren().get(j);
                    str.append(text.getText());
                }
            }
            list.add(str.toString());
        }
        return list;
    }

效果:
JavaFx如何动态的添加组件,以及如何获取添加的组件中填写的值_第3张图片
在这里插入图片描述

参考资料

  1. https://www.yiibai.com/javafx/javafx_vbox.html
  2. https://www.yiibai.com/javafx/javafx_hbox.html

你可能感兴趣的:(javafx)