Flutter中如何实现跨多列的整行高亮着色？

你当前的布局结构是外层Row嵌套两个Column（左右各一列），这种设计会让每行的左右部分属于独立的Column组件，自然没法实现跨列的无间隙整行高亮——左右列的行宽度仅由自身内容决定，且Column之间的间距会导致高亮块断开。

正确的思路是切换布局层级：把外层容器改成Column，每个子项是包含该行左右内容的完整Row，这样每行就是一个独立的整体，给需要高亮的Row包裹背景容器即可覆盖整列。

示例代码 #

// 模拟数据
final int rowCount = 5;
final int highlightedRowIndex = 2; // 要高亮的行索引
final List<String> leftColumnData = ['左行1', '左行2', '左行3', '左行4', '左行5'];
final List<String> rightColumnData = ['右行1', '右行2', '右行3', '右行4', '右行5'];

// 布局实现
Column(
  children: List.generate(
    rowCount,
    (index) => Container(
      width: double.infinity, // 强制撑满父容器宽度
      color: index == highlightedRowIndex ? Colors.yellow[200] : null,
      child: Row(
        children: [
          // 左列：可固定宽度或按比例分配
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
              child: Text(leftColumnData[index]),
            ),
          ),
          // 右列：与左列按比例分配宽度
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
              child: Text(rightColumnData[index]),
            ),
          ),
        ],
      ),
    ),
  ),
)

关键细节 #

• 用Container包裹整行Row，通过width: double.infinity确保高亮背景铺满整个行宽
• 左右列用Expanded（带flex参数）实现宽度均分，或用SizedBox固定列宽，保证行列对齐无间隙
• 通过索引判断动态切换背景色，实现按需高亮

如果需要更接近原生表格的样式，也可以直接使用Flutter的DataTable组件，它原生支持整行高亮，且列对齐逻辑更完善：

DataTable(
  columns: const [
    DataColumn(label: Text('左列')),
    DataColumn(label: Text('右列')),
  ],
  rows: List.generate(
    rowCount,
    (index) => DataRow(
      color: MaterialStateProperty.resolveWith<Color?>(
        (Set<MaterialState> states) {
          return index == highlightedRowIndex ? Colors.yellow[200] : null;
        },
      ),
      cells: [
        DataCell(Text(leftColumnData[index])),
        DataCell(Text(rightColumnData[index])),
      ],
    ),
  ),
)

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