在Flutter/Dart中如何合并三个列表并在ListView表格中展示

1. 合并三个Dart列表 #

因为三个列表长度一致，按索引对应合并为每行的数据集即可：

var px = [0.1, 0.2, 0.3];
var x = [0, 1, 2];
// 注意原变量名mutiply为拼写错误，此处修正为multiply
var multiply = [0, 0.2, 0.6];

// 合并为按行存储的数据集
List<List<num>> mergedList = List.generate(px.length, (index) => [
  px[index],
  x[index],
  multiply[index],
]);

合并前建议加长度校验，避免数组越界：assert(px.length == x.length && x.length == multiply.length);

2. ListView搭载表格展示 #

提供两种常用实现方案：

方案1：使用DataTable组件 #

适合需要快速搭建标准表格的场景：

import 'package:flutter/material.dart';

class TableDemoPage extends StatelessWidget {
  TableDemoPage({super.key});

  final List<double> px = [0.1, 0.2, 0.3];
  final List<int> x = [0, 1, 2];
  final List<double> multiply = [0, 0.2, 0.6];

  @override
  Widget build(BuildContext context) {
    // 校验列表长度
    assert(px.length == x.length && x.length == multiply.length);
    // 合并列表
    List<List<num>> mergedList = List.generate(px.length, (index) => [
      px[index],
      x[index],
      multiply[index],
    ]);

    return Scaffold(
      appBar: AppBar(title: const Text('表格展示')),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          DataTable(
            border: TableBorder.all(color: Colors.grey.shade300),
            headingRowColor: MaterialStateProperty.all(Colors.grey.shade100),
            columns: const [
              DataColumn(label: Text('px')),
              DataColumn(label: Text('x')),
              DataColumn(label: Text('multiply')),
            ],
            rows: mergedList.map((row) => DataRow(cells: [
              DataCell(Text(row[0].toString())),
              DataCell(Text(row[1].toString())),
              DataCell(Text(row[2].toString())),
            ])).toList(),
          )
        ],
      ),
    );
  }
}

方案2：使用ListView.builder自定义表格 #

适合数据量大、需要自定义行样式的场景，性能更优：

@override
Widget build(BuildContext context) {
  assert(px.length == x.length && x.length == multiply.length);
  List<List<num>> mergedList = List.generate(px.length, (index) => [
    px[index],
    x[index],
    multiply[index],
  ]);

  return Scaffold(
    appBar: AppBar(title: const Text('自定义表格')),
    body: ListView.builder(
      padding: const EdgeInsets.all(16),
      // 总长度=表头+数据行数
      itemCount: mergedList.length + 1,
      itemBuilder: (context, index) {
        // 渲染表头
        if (index == 0) {
          return Container(
            color: Colors.grey.shade100,
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: const Row(
              children: [
                Expanded(child: Text('px', textAlign: TextAlign.center)),
                Expanded(child: Text('x', textAlign: TextAlign.center)),
                Expanded(child: Text('multiply', textAlign: TextAlign.center)),
              ],
            ),
          );
        }
        // 渲染数据行
        final rowData = mergedList[index - 1];
        return Container(
          padding: const EdgeInsets.symmetric(vertical: 8),
          decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: Colors.grey.shade300))
          ),
          child: Row(
            children: [
              Expanded(child: Text(rowData[0].toString(), textAlign: TextAlign.center)),
              Expanded(child: Text(rowData[1].toString(), textAlign: TextAlign.center)),
              Expanded(child: Text(rowData[2].toString(), textAlign: TextAlign.center)),
            ],
          ),
        );
      },
    ),
  );
}

内容的提问来源于stack exchange，提问作者Muhammad Awais Younas