JavaFx之动态添加组件

本例主要是构建动态模板，采用VBox模式，
效果如下：
20210303103350
按钮操作 - 添加栏位
20210303103536
按钮操作 - 上移
20210303103643
按钮操作 - 下移
20210303103713

按钮添加鼠标事件setOnMouseClicked

Button addBtn = new Button("添加栏位");
addBtn.setOnMouseClicked(addBtnMouseClicked());
Button upBtn = new Button("上移");
upBtn.setOnMouseClicked(upBtnMouseClicked());
Button downBtn = new Button("下移");
downBtn.setOnMouseClicked(downBtnMouseClicked());

将内容面板content添加到滚动面板

ScrollPane scrollPane = new ScrollPane(content);
scrollPane.setPannable(true);
scrollPane.setStyle("-fx-background-color: #FFF;");
BorderPane.setAlignment(scrollPane,Pos.CENTER);

寻找面板上的组件，只有类型对应，强转也无报错

ObservableList<Node> templateAttrChildren = content.getChildren();
if (templateAttrChildren != null && templateAttrChildren.size() > 0) {
    for (Node node : templateAttrChildren) {
        CheckBox attrFieldCheckbox = (CheckBox) node.lookup("#attrFieldCheckbox");
        System.out.println(attrFieldCheckbox.getUserData());
    }
}

移动操作：先获取当前组件对象，通过原始位置index进行remove，在进行位置add

上移：当移到最上层时index=1
HBox hBox = (HBox) content.lookup("#" + checkBox.getParent().getId());
int index = content.getChildren().indexOf(hBox);
if (index > 0) {
    content.getChildren().remove(index);
    content.getChildren().add(index - 1, hBox);
}
下移：当移到最下层时index=最大值
HBox hBox = (HBox) content.lookup("#" + checkBox.getParent().getId());
int index = content.getChildren().indexOf(hBox);
if (index < content.getChildren().size() - 1) {
    content.getChildren().remove(index);
    content.getChildren().add(index + 1, hBox);
}

事件EventHandler

private EventHandler<MouseEvent> btnMouseClicked(){
    return event -> {
        System.out.println("事件执行");
    };
}

完整代码

package sample;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

/**
 * @ClassName: VBox动态添加组件
 * @Description:
 * @Author: Demon
 * @Date: 2021/3/2 16:16
 */
public class 动态添加组件 extends Application {

    private static VBox content = new VBox();
    private static String[] attrType = new String[]{"常量", "变量"};

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        // Center - 动态内容
        content.setAlignment(Pos.TOP_CENTER);
        content.setSpacing(3);
        // 加载初始数据
        getContentHbox(new AttributeVo().setAttrId("123456").setAttrName("测试1").setAttrType(0).setAttrValue("123"));
        getContentHbox(new AttributeVo().setAttrId("345678").setAttrName("测试2").setAttrType(1).setAttrValue("321"));

        // 初始化
        BorderPane borderPane = new BorderPane();
        borderPane.setPadding(new Insets(15,8,15,8));
        // Top
        VBox topVbox = new VBox();
        Label title = new Label("栏位列表");
        topVbox.getChildren().add(title);
        borderPane.setTop(topVbox);
        // Center
        borderPane.setCenter(getCenterPane());
        // Bottom
        HBox bottomHbox = new HBox();
        bottomHbox.setAlignment(Pos.CENTER);
        Button saveBtn = new Button("保存");
        saveBtn.setOnMouseClicked(saveBtnMouseClicked());
        bottomHbox.getChildren().add(saveBtn);
        borderPane.setBottom(bottomHbox);
        // 将内容添加到主面板
        StackPane root = new StackPane();
        root.getChildren().add(borderPane);
        primaryStage.setScene(new Scene(root, 800, 600));
        primaryStage.setResizable(false);
        primaryStage.show();
    }


    private BorderPane getCenterPane(){
        BorderPane borderPane = new BorderPane();
        // Top - 按钮
        HBox topBox = new HBox();
        topBox.setAlignment(Pos.CENTER_RIGHT);
        topBox.setPadding(new Insets(0,5,5,0));
        topBox.setSpacing(10);
        Button addBtn = new Button("添加栏位");
        addBtn.setOnMouseClicked(addBtnMouseClicked());
        Button upBtn = new Button("上移");
        upBtn.setOnMouseClicked(upBtnMouseClicked());
        Button downBtn = new Button("下移");
        downBtn.setOnMouseClicked(downBtnMouseClicked());
        topBox.getChildren().addAll(addBtn,upBtn,downBtn);
        borderPane.setTop(topBox);
        // Center - 表格内容
        borderPane.setCenter(getContent());
        return borderPane;
    }

    private BorderPane getContent(){
        System.out.println("添加初始化内容");
        BorderPane borderPane = new BorderPane();
        // Top - 栏位列表
        HBox hBox = new HBox();
        hBox.setAlignment(Pos.CENTER_LEFT);
        hBox.setPrefHeight(30.0);
        hBox.setSpacing(5);
        Label label1 = new Label("栏位名称");
        label1.setPrefWidth(220);
        label1.setAlignment(Pos.CENTER);
        Label label2 = new Label("栏位类型");
        label2.setPrefWidth(100);
        label2.setAlignment(Pos.CENTER);
        Label label3 = new Label("栏位数值");
        label3.setPrefWidth(350);
        label3.setAlignment(Pos.CENTER);
        hBox.getChildren().addAll(label1,label2,label3);
        borderPane.setTop(hBox);
        // 将内容添加到滚动面板
        ScrollPane scrollPane = new ScrollPane(content);
        scrollPane.setPannable(true);
        scrollPane.setStyle("-fx-background-color: #FFF;");
        BorderPane.setAlignment(scrollPane,Pos.CENTER);

        borderPane.setCenter(scrollPane);
        return borderPane;
    }

    /**
     * 按钮事件 - 添加栏位
     */
    private EventHandler<MouseEvent> addBtnMouseClicked(){
        return event -> {
            //添加栏位
            getContentHbox(new AttributeVo().setAttrId(UUID.randomUUID().toString()).setAttrType(0));
        };
    }

    /**
     * 动态区域操作
     * @param attributeVo 参数
     */
    private void getContentHbox(AttributeVo attributeVo){
        System.out.println("添加ID:"+attributeVo.getAttrId());
        HBox hBox = new HBox(5);
        hBox.setId(UUID.randomUUID().toString());
        hBox.setAlignment(Pos.CENTER_LEFT);
        //栏位选取
        CheckBox attrFieldCheckbox = new CheckBox();
        attrFieldCheckbox.setId("attrFieldCheckbox");
        attrFieldCheckbox.setUserData(attributeVo.getAttrId());
        attrFieldCheckbox.setMaxWidth(30);
        attrFieldCheckbox.setOnAction(event -> {
            if (attrFieldCheckbox.isSelected()) {
                ObservableList<Node> contentChildren = content.getChildren();
                if (contentChildren != null && contentChildren.size() > 0) {
                    for (Node node : contentChildren) {
                        CheckBox checkBox = (CheckBox) node.lookup("#attrFieldCheckbox");
                        checkBox.setSelected(false);
                    }
                }
                attrFieldCheckbox.setSelected(true);
            }
        });
        //栏位名称
        TextField attrName = new TextField(attributeVo.getAttrName());
        attrName.setId("attrName");
        attrName.setPrefWidth(200);
        //栏位类型
        ComboBox attrTypeComboBox = new ComboBox();
        attrTypeComboBox.setId("attrTypeComboBox");
        attrTypeComboBox.setPrefWidth(100);
        attrTypeComboBox.setItems(FXCollections.observableArrayList(attrType));
        attrTypeComboBox.getSelectionModel().select(attributeVo.getAttrType());
        //栏位数组
        TextField attrValue = new TextField(attributeVo.getAttrValue());
        attrValue.setId("attrValue");
        attrValue.setPrefWidth(350);
        //操作按钮
        Button delBtn = new Button("删除");
        delBtn.setMaxWidth(50);
        delBtn.setOnMouseClicked(event1 -> content.getChildren().removeAll(hBox));
        // 添加组件到hBox
        hBox.getChildren().addAll(attrFieldCheckbox,attrName,attrTypeComboBox,attrValue,delBtn);
        // 将hBox添加到内容面板
        content.getChildren().add(content.getChildren().size(), hBox);
    }

    /**
     * 按钮事件 - 上移栏位
     */
    private EventHandler<MouseEvent> upBtnMouseClicked(){
        return event -> {
            ObservableList<Node> contentChildren = content.getChildren();
            if (contentChildren != null && contentChildren.size() > 0) {
                for (Node node : contentChildren) {
                    CheckBox checkBox = (CheckBox) node.lookup("#attrFieldCheckbox");
                    if (checkBox.isSelected()) {
                        HBox hBox = (HBox) content.lookup("#" + checkBox.getParent().getId());
                        int index = content.getChildren().indexOf(hBox);
                        if (index > 0) {
                            content.getChildren().remove(index);
                            content.getChildren().add(index - 1, hBox);
                        }
                        break;
                    }
                }
            }
        };
    }

    /**
     * 按钮事件 - 下移栏位
     */
    private EventHandler<MouseEvent> downBtnMouseClicked(){
        return event -> {
            ObservableList<Node> contentChildren = content.getChildren();
            if (contentChildren != null && contentChildren.size() > 0) {
                for (Node node : contentChildren) {
                    CheckBox checkBox = (CheckBox) node.lookup("#attrFieldCheckbox");
                    if (checkBox.isSelected()) {
                        HBox hBox = (HBox) content.lookup("#" + checkBox.getParent().getId());
                        int index = content.getChildren().indexOf(hBox);
                        if (index < content.getChildren().size() - 1) {
                            content.getChildren().remove(index);
                            content.getChildren().add(index + 1, hBox);
                        }
                        break;
                    }
                }
            }
        };
    }

    /**
     * 按钮事件 - 保存栏位
     */
    private EventHandler<MouseEvent> saveBtnMouseClicked(){
        return event -> {
            List<AttributeVo> attributeVoList = new ArrayList<>();
            //模板栏位
            ObservableList<Node> contentChildren = content.getChildren();
            if (contentChildren != null && contentChildren.size() > 0) {
                for (Node node : contentChildren) {
                    // 获取值
                    CheckBox attrFieldCheckbox = (CheckBox) node.lookup("#attrFieldCheckbox");
                    TextField attrName = (TextField) node.lookup("#attrName");
                    ComboBox attrTypeComboBox = (ComboBox) node.lookup("#attrTypeComboBox");
                    TextField attrValue = (TextField) node.lookup("#attrValue");
                    // 赋值
                    AttributeVo attributeVo = new AttributeVo();
                    attributeVo.setAttrId(String.valueOf(attrFieldCheckbox.getUserData()));
                    attributeVo.setAttrName(attrName.getText());
                    attributeVo.setAttrType(attrTypeComboBox.getSelectionModel().getSelectedIndex());
                    attributeVo.setAttrValue(attrValue.getText());
                    attributeVoList.add(attributeVo);
                }
            }
            System.out.println(attributeVoList);
        };
    }

}

/**
 * 虚拟实体类
 */
class AttributeVo {
    private String attrId;
    private String attrName;
    private int attrType;
    private String attrValue;

    public String getAttrId() {
        return attrId;
    }

    public AttributeVo setAttrId(String attrId) {
        this.attrId = attrId;
        return this;
    }

    public String getAttrName() {
        return attrName;
    }

    public AttributeVo setAttrName(String attrName) {
        this.attrName = attrName;
        return this;
    }

    public int getAttrType() {
        return attrType;
    }

    public AttributeVo setAttrType(int attrType) {
        this.attrType = attrType;
        return this;
    }

    public String getAttrValue() {
        return attrValue;
    }

    public AttributeVo setAttrValue(String attrValue) {
        this.attrValue = attrValue;
        return this;
    }

    @Override
    public String toString() {
        return "AttributeVo{" +
                "attrId='" + attrId + '\'' +
                ", attrName='" + attrName + '\'' +
                ", attrType=" + attrType +
                ", attrValue='" + attrValue + '\'' +
                '}';
    }
}