Flutter列表子元素组合问题：生成DataTable的DataRow数据

需求说明 #

需要将嵌套列表[['Red','White','Yellow'],['40','41','42'],['Small','Big']]生成所有元素的全组合（笛卡尔积），再将每组组合转为包含TextFormField的DataRow，用于DataTable展示。

实现方案 #

1. 编写笛卡尔积生成函数

先实现一个Dart函数，输入嵌套列表，输出所有元素的全组合：

List<List<String>> generateCartesianProduct(List<List<String>> lists) {
  if (lists.isEmpty) return [[]];
  
  List<List<String>> result = [[]];
  for (var list in lists) {
    List<List<String>> temp = [];
    for (var existing in result) {
      for (var item in list) {
        temp.add([...existing, item]);
      }
    }
    result = temp;
  }
  return result;
}

2. 构建带TextFormField的DataTable

通过StatefulWidget管理输入状态，完整示例代码如下：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('组合数据表格')),
        body: const CombinationDataTable(),
      ),
    );
  }
}

class CombinationDataTable extends StatefulWidget {
  const CombinationDataTable({super.key});

  @override
  State<CombinationDataTable> createState() => _CombinationDataTableState();
}

class _CombinationDataTableState extends State<CombinationDataTable> {
  // 原始嵌套列表
  final List<List<String>> _originalLists = [
    ['Red', 'White', 'Yellow'],
    ['40', '41', '42'],
    ['Small', 'Big']
  ];
  
  // 存储每行输入框的控制器
  late List<List<TextEditingController>> _controllers;

  @override
  void initState() {
    super.initState();
    // 生成全组合并初始化控制器
    var combinations = generateCartesianProduct(_originalLists);
    _controllers = combinations.map((combo) {
      return combo.map((item) => TextEditingController(text: item)).toList();
    }).toList();
  }

  @override
  void dispose() {
    // 释放控制器资源
    for (var rowControllers in _controllers) {
      for (var controller in rowControllers) {
        controller.dispose();
      }
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: DataTable(
        columns: const [
          DataColumn(label: Text('颜色')),
          DataColumn(label: Text('尺码')),
          DataColumn(label: Text('大小')),
        ],
        rows: List.generate(_controllers.length, (rowIndex) {
          var rowControllers = _controllers[rowIndex];
          return DataRow(
            cells: [
              DataCell(TextFormField(controller: rowControllers[0])),
              DataCell(TextFormField(controller: rowControllers[1])),
              DataCell(TextFormField(controller: rowControllers[2])),
            ],
          );
        }),
      ),
    );
  }

  // 笛卡尔积生成函数
  List<List<String>> generateCartesianProduct(List<List<String>> lists) {
    if (lists.isEmpty) return [[]];
    
    List<List<String>> result = [[]];
    for (var list in lists) {
      List<List<String>> temp = [];
      for (var existing in result) {
        for (var item in list) {
          temp.add([...existing, item]);
        }
      }
      result = temp;
    }
    return result;
  }
}

关键说明 #

• 笛卡尔积函数通过迭代方式生成所有元素组合，确保覆盖所有可能的搭配。
• 使用TextEditingController管理每个输入框的状态，初始化时自动填入组合的默认值。
• 用SingleChildScrollView包裹表格，避免屏幕空间不足时出现布局溢出问题。

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