JavaFX 9实现：点击TableCell在对应行下方插入FlowPane（续）

太棒了，你已经跟着James_D的思路找对方向啦！我来把这个需求的实现细节拆解清楚，帮你完美落地这个带行内展开FlowPane的双列TableView：

1. 先搞定玩家数据模型 #

首先得定义一个包含基础展示数据和详细展开数据的玩家类，这样后续才能给TableCell和FlowPane提供数据源：

import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

public class Player {
    // 表格列要展示的基础数据
    private final StringProperty playerName = new SimpleStringProperty();
    private final SimpleIntegerProperty playerScore = new SimpleIntegerProperty();
    // FlowPane要展示的详细数据（比如技能、道具列表）
    private final ObservableList<String> playerDetails = FXCollections.observableArrayList();

    // 构造器
    public Player(String name, int score, String... details) {
        setPlayerName(name);
        setPlayerScore(score);
        playerDetails.addAll(details);
    }

    // Getter、Setter以及Property方法，这里只列关键的，自行补充完整
    public StringProperty playerNameProperty() { return playerName; }
    public ObservableList<String> getPlayerDetails() { return playerDetails; }
}

2. 核心：自定义TableRow实现展开逻辑 #

这部分是关键，通过TableRowFactory创建自定义行，监听选中状态来动态添加/移除FlowPane：

import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.layout.FlowPane;
import javafx.scene.control.Label;
import javafx.scene.paint.Color;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Insets;

// 假设你的TableView实例叫playerTable
playerTable.setRowFactory(tv -> {
    TableRow<Player> row = new TableRow<>() {
        // 提前初始化好要展示的FlowPane，避免重复创建
        private final FlowPane detailPane = new FlowPane();

        {
            // 给FlowPane设置基础样式，适配表格宽度
            detailPane.setHgap(8);
            detailPane.setVgap(4);
            detailPane.setPadding(new Insets(8));
            detailPane.setBackground(new Background(new BackgroundFill(Color.LIGHTGRAY, CornerRadii.EMPTY, Insets.EMPTY)));
            detailPane.prefWidthProperty().bind(tv.widthProperty().subtract(20));
        }

        @Override
        protected void updateItem(Player player, boolean empty) {
            super.updateItem(player, empty);
            // 先清空行的所有子组件，再重新构建
            getChildren().clear();
            
            if (empty || player == null) {
                setText(null);
                setGraphic(null);
                setPrefHeight(TableRow.USE_COMPUTED_SIZE);
            } else {
                // 先添加默认的表格行内容（会自动渲染你定义的两列TableCell）
                getChildren().add(super.getGraphic());
                
                // 如果当前行被选中，就把FlowPane加进去
                if (isSelected()) {
                    // 填充FlowPane的内容，比如玩家的详细数据
                    detailPane.getChildren().clear();
                    player.getPlayerDetails().forEach(detail -> {
                        Label detailLabel = new Label(detail);
                        detailLabel.setStyle("-fx-background-color: white; -fx-padding: 3 6; -fx-border-radius: 4;");
                        detailPane.getChildren().add(detailLabel);
                    });
                    // 把FlowPane加到行的下方
                    getChildren().add(detailPane);
                    // 调整行高，确保FlowPane能完整显示
                    setPrefHeight(getPrefHeight() + detailPane.getPrefHeight() + 10);
                } else {
                    // 未选中时恢复默认行高
                    setPrefHeight(TableRow.USE_COMPUTED_SIZE);
                }
            }
        }
    };

    // 监听行的选中状态变化，触发UI更新
    row.selectedProperty().addListener((obs, oldSelected, newSelected) -> {
        if (row.getItem() != null) {
            row.updateItem(row.getItem(), row.isEmpty());
        }
    });

    return row;
});

3. 配置TableView的两列数据 #

接下来给TableView设置两列，分别展示玩家的不同基础数据：

import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;

TableView<Player> playerTable = new TableView<>();

// 第一列：玩家姓名
TableColumn<Player, String> nameColumn = new TableColumn<>("玩家姓名");
nameColumn.setCellValueFactory(cellData -> cellData.getValue().playerNameProperty());
nameColumn.setPrefWidth(180);

// 第二列：玩家分数
TableColumn<Player, Number> scoreColumn = new TableColumn<>("当前分数");
scoreColumn.setCellValueFactory(cellData -> cellData.getValue().playerScoreProperty());
scoreColumn.setPrefWidth(120);

// 把列添加到TableView
playerTable.getColumns().addAll(nameColumn, scoreColumn);

// 模拟添加一些测试数据
playerTable.getItems().addAll(
    new Player("张三", 95, "近战输出", "暴击率+20%", "护甲穿透"),
    new Player("李四", 88, "远程辅助", "群体回血", "攻速加成")
);

4. 额外优化小技巧 #

• 样式美化：可以给选中的行加个醒目的背景色，在CSS里添加：

.table-row-cell:selected {
    -fx-background-color: #cce6ff;
}

• 多行独立展开：如果想支持同时展开多行，不要依赖行的selectedProperty，可以给Player类加一个BooleanProperty expanded属性，监听这个属性来控制FlowPane的显示/隐藏，这样点击行就能切换展开状态，不受选中状态限制。
• 性能优化：如果玩家数据量很大，建议把FlowPane的子组件做缓存，避免每次展开都重新创建Label，提升响应速度。

内容的提问来源于stack exchange，提问作者Simon