Flutter表格行数据重复问题：请求修改代码实现API数据排版

我从API获取数据，想排版成如图所示的双列表格，但当前代码运行后出现数据重复，请求修改代码消除重复。

说明

原代码 #

组件代码 #

class StarringComponent extends StatelessWidget {
  StarringComponent({Key? key}) : super(key: key);

  final List<_StarringModel> _listOfStarring = [
    _StarringModel('Michael J. Fox', 'https://www.biography.com/.image/ar_8:10%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cg_faces:center%2Cq_auto:good%2Cw_620/MTkwNTAwODA4ODM0NDI2Nzc4/gettyimages-1144626740.jpg'),
    _StarringModel('Christopher Lloyd', 'https://s3.r29static.com/bin/entry/9e6/0,0,2000,2000/x,80/2172764/image.jpg'),
    _StarringModel('Robert Zimek', 'https://media1.popsugar-assets.com/files/thumbor/XS_IeHJo2d3MzS-0CXmqOZ0Zl34/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2019/01/08/515/n/1922398/7f748b5fb07a03fd_GettyImages-1019711520/i/Charlie-Hunnam.jpg'),
    _StarringModel('Lea Thompson', 'https://www.independent.ie/migration_catalog/8bb89/25195674.ece/AUTOCROP/w620/N0217211295348219998A_1'),
  ];

  @override
  Widget build(BuildContext context) {
    return Table(children: List.generate(_listOfStarring.length, (index) => _buildTableRow(context, _listOfStarring[index].name, _listOfStarring[index].image)));
  }

  TableRow _buildTableRow(BuildContext context, String name, String image) {
    return TableRow(
      children: List.generate(2, (index) => Padding(
        padding: EdgeInsets.symmetric(vertical: 10),
        child: Row(
          children: [
            CircleAvatar(
              radius: 14,
              backgroundColor: Colors.red.withOpacity(0.4),
              backgroundImage: NetworkImage(image),
            ),
            SizedBox(width: 10),
            Flexible(
              child: Text(name,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  ),
            ),
          ],
        ),
      ))
    );
  }
}

模型代码 #

class _StarringModel {
  String name, image;

  _StarringModel(this.name, this.image);
}

问题原因 #

你的代码出现重复是因为_buildTableRow里用List.generate(2, ...)给每一行生成了两个相同的演员条目，相当于每一行的两列都是同一个人；同时你又给每个演员都生成了一行，最终导致数据重复显示。

修改后的代码 #

组件代码 #

class StarringComponent extends StatelessWidget {
  StarringComponent({Key? key}) : super(key: key);

  final List<_StarringModel> _listOfStarring = [
    _StarringModel('Michael J. Fox', 'https://www.biography.com/.image/ar_8:10%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cg_faces:center%2Cq_auto:good%2Cw_620/MTkwNTAwODA4ODM0NDI2Nzc4/gettyimages-1144626740.jpg'),
    _StarringModel('Christopher Lloyd', 'https://s3.r29static.com/bin/entry/9e6/0,0,2000,2000/x,80/2172764/image.jpg'),
    _StarringModel('Robert Zimek', 'https://media1.popsugar-assets.com/files/thumbor/XS_IeHJo2d3MzS-0CXmqOZ0Zl34/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2019/01/08/515/n/1922398/7f748b5fb07a03fd_GettyImages-1019711520/i/Charlie-Hunnam.jpg'),
    _StarringModel('Lea Thompson', 'https://www.independent.ie/migration_catalog/8bb89/25195674.ece/AUTOCROP/w620/N0217211295348219998A_1'),
  ];

  @override
  Widget build(BuildContext context) {
    // 按每2个元素一组拆分列表，生成表格行
    List<TableRow> rows = [];
    for (int i = 0; i < _listOfStarring.length; i += 2) {
      rows.add(_buildTableRow(
        context,
        _listOfStarring[i],
        // 处理列表长度为奇数的情况
        i + 1 < _listOfStarring.length ? _listOfStarring[i + 1] : null,
      ));
    }
    return Table(children: rows);
  }

  TableRow _buildTableRow(BuildContext context, _StarringModel leftItem, _StarringModel? rightItem) {
    return TableRow(
      children: [
        _buildStarringItem(leftItem.name, leftItem.image),
        // 右侧有数据则显示，否则显示空容器
        rightItem != null ? _buildStarringItem(rightItem.name, rightItem.image) : const SizedBox(),
      ],
    );
  }

  // 统一渲染单个演员条目，减少代码冗余
  Widget _buildStarringItem(String name, String image) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Row(
        children: [
          CircleAvatar(
            radius: 14,
            backgroundColor: Colors.red.withOpacity(0.4),
            backgroundImage: NetworkImage(image),
          ),
          const SizedBox(width: 10),
          Flexible(
            child: Text(
              name,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    );
  }
}

修改说明 #

• 将原逻辑改为每2个演员生成一行，避免每行重复同一个条目
• 拆分_buildStarringItem方法统一渲染单个演员条目，减少重复代码
• 兼容列表长度为奇数的情况：最后一行右侧列显示空容器，保证布局整齐

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