ListView Builder可变高度项滚动时的项数显示实现方案

针对ListView.builder中动态高度Card的项编号需求，这里提供两种简洁可行的实现方式：

方法一：Row包裹编号与Card（推荐） #

利用Row的crossAxisAlignment: CrossAxisAlignment.stretch属性，让编号区域自动匹配Card的动态高度，布局逻辑简单直观：

ListView.builder(
  itemCount: yourDataList.length,
  itemBuilder: (context, index) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 固定宽度的编号区域
        Container(
          width: 45,
          alignment: Alignment.center,
          color: Colors.grey[200],
          child: Text(
            '${index + 1}',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        // 动态高度的Card
        Expanded(
          child: Card(
            margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Text(
                yourDataList[index].content, // 动态长度的内容
                style: TextStyle(fontSize: 16),
              ),
            ),
          ),
        ),
      ],
    );
  },
)

如果需要让编号区域与Card的圆角风格统一，可以调整装饰和Card的margin、shape：

// 编号区域
Container(
  width: 45,
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: const BorderRadius.horizontal(left: Radius.circular(8)),
  ),
  child: Text('${index + 1}'),
),
// Card部分
Expanded(
  child: Card(
    margin: const EdgeInsets.only(left: 0, right: 10, top: 6, bottom: 6),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.horizontal(right: Radius.circular(8)),
    ),
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Text(yourDataList[index].content),
    ),
  ),
)

方法二：使用IntrinsicHeight适配高度 #

如果需要更精细的布局控制，可借助IntrinsicHeight强制子项高度一致，适合复杂嵌套场景：

ListView.builder(
  itemCount: yourDataList.length,
  itemBuilder: (context, index) {
    return IntrinsicHeight(
      child: Row(
        children: [
          Container(
            width: 45,
            alignment: Alignment.center,
            color: Colors.grey[200],
            child: Text('${index + 1}'),
          ),
          Expanded(
            child: Card(
              margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Text(yourDataList[index].content),
              ),
            ),
          ),
        ],
      ),
    );
  },
)

注意：IntrinsicHeight会带来轻微的性能开销，若列表项数量较多，优先选择方法一。

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