Flutter如何实现ListView表头元素与列表子项对齐

当前代码无法实现对齐、占位方案冗余的原因有两点：

• 表头和列表项的Row使用了不同的主轴对齐策略：表头用MainAxisAlignment.spaceAround，列表项用MainAxisAlignment.spaceBetween，两者间距计算逻辑不同，天然无法对齐
• 手动写死SizedBox宽度预留图标位置属于硬编码，一旦图标尺寸、边距调整就要同步修改占位宽度，维护性差，且很容易出现宽度不匹配导致的错位

统一表头和列表项的列宽规则：

1. 给每一列元素包裹相同flex属性的Expanded组件，保证同位置元素占用宽度完全一致
2. 表头尾部直接放置和列表项图标尺寸完全相同的透明图标作为占位，不需要手动计算宽度
3. 表头和列表项使用完全一致的内边距，保证首列元素贴近容器边缘

修正后的可运行代码：

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

  Widget _buildCell(Widget child, {int flex = 1}) {
    return Expanded(
      flex: flex,
      child: Container(
        alignment: Alignment.centerLeft,
        child: child,
      ),
    );
  }

  Widget _listItem(index) {
    return Container(
      padding: const EdgeInsets.all(10),
      child: Row(
        children: [
          _buildCell(const Text("Test")),
          _buildCell(const Text("Test")),
          _buildCell(const Text("Test")),
          _buildCell(const Text("Test")),
          _buildCell(const Text("Test")),
          _buildCell(
            const Icon(
              Icons.create_outlined,
              color: Colors.grey,
              size: 36.0,
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    List L = [1,2,3,4];
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(50),
        child: Column(
          children: [
            Container(
              color: Colors.blue,
              height: 50,
              padding: const EdgeInsets.all(10),
              child: Row(
                children: [
                  _buildCell(const Text('Test',style: TextStyle(color: Colors.white))),
                  _buildCell(const Text('Test',style: TextStyle(color: Colors.white))),
                  _buildCell(const Text('Test',style: TextStyle(color: Colors.white))),
                  _buildCell(const Text('Test',style: TextStyle(color: Colors.white))),
                  _buildCell(const Text('Test',style: TextStyle(color: Colors.white))),
                  _buildCell(
                    const Icon(
                      Icons.create_outlined,
                      color: Colors.transparent,
                      size: 36.0,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView.separated(
                separatorBuilder: (context, index) {
                  return const Divider(thickness: 1, color: Colors.blue);
                },
                itemCount: L.length,
                itemBuilder: (_, index) {
                  return _listItem(index);
                }
              ),
            ),
          ],
        )
      )
    );
  }
}

• 对齐效果稳定：同位置元素宽度、内外边距完全一致，不会出现错位，首列元素默认左对齐贴近容器边缘，符合需求
• 维护成本低：后续调整列宽占比、图标尺寸、边距只需要修改一处配置，所有位置自动同步，不需要手动计算硬编码数值
• 扩展性强：后续需要新增/删除列、调整列对齐方式时，只需要修改单元格组件配置即可

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