Flutter/Dart：如何从键值对映射创建带复选框的List Tile

数据映射规则 #

• API返回的Header 1 → 界面顶部的COMPETITION标题
• API返回的Cat 1 → 界面中的Competition Matrix模块
• API返回的Cat 2 → 界面中的Training Matrix模块

实现示例（Flutter） #

根据需求推荐两种实现方式，可根据交互需求选择：

方式一：可展开的矩阵模块

用ExpansionTile包裹矩阵内容，支持展开/收起查看详情：

// 定义API数据模型
class ApiData {
  final String header1;
  final List<dynamic> cat1;
  final List<dynamic> cat2;

  ApiData({required this.header1, required this.cat1, required this.cat2});
}

// 主界面实现
class CompetitionScreen extends StatelessWidget {
  final ApiData apiData;

  const CompetitionScreen({super.key, required this.apiData});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(apiData.header1), // 绑定Header1为页面标题
      ),
      body: ListView(
        children: [
          // Competition Matrix（对应Cat1）
          ExpansionTile(
            title: const Text('Competition Matrix', style: TextStyle(fontWeight: FontWeight.bold)),
            children: _buildMatrixItems(apiData.cat1),
          ),
          const Divider(height: 1),
          // Training Matrix（对应Cat2）
          ExpansionTile(
            title: const Text('Training Matrix', style: TextStyle(fontWeight: FontWeight.bold)),
            children: _buildMatrixItems(apiData.cat2),
          ),
        ],
      ),
    );
  }

  // 根据API数据生成列表项
  List<Widget> _buildMatrixItems(List<dynamic> data) {
    return data.map((item) {
      return ListTile(
        title: Text(item['title'] ?? ''),
        subtitle: Text(item['description'] ?? ''),
        // 可根据实际API返回的字段调整显示内容
      );
    }).toList();
  }
}

方式二：直接分组展示

如果不需要展开功能，直接用分组列表呈现模块内容：

class CompetitionScreen extends StatelessWidget {
  final ApiData apiData;

  const CompetitionScreen({super.key, required this.apiData});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(apiData.header1),
      ),
      body: ListView(
        children: [
          // Competition Matrix标题
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Text('Competition Matrix', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          ),
          // Cat1对应的列表项
          ...apiData.cat1.map((item) => ListTile(
                title: Text(item['title']),
                trailing: const Icon(Icons.arrow_forward_ios),
              )),
          const Divider(height: 20),
          // Training Matrix标题
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Text('Training Matrix', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          ),
          // Cat2对应的列表项
          ...apiData.cat2.map((item) => ListTile(
                title: Text(item['title']),
                trailing: const Icon(Icons.arrow_forward_ios),
              )),
        ],
      ),
    );
  }
}

补充：表格形式的矩阵展示

如果矩阵是结构化表格数据，可改用DataTable组件实现：

Widget _buildMatrixTable(List<dynamic> matrixData) {
  return DataTable(
    columns: const [
      DataColumn(label: Text('指标')),
      DataColumn(label: Text('数值')),
    ],
    rows: matrixData.map((row) {
      return DataRow(cells: [
        DataCell(Text(row['indicator'])),
        DataCell(Text(row['value'].toString())),
      ]);
    }).toList(),
  );
}

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