ListView或ListView.builder内Row的mainAxisSize属性失效问题

问题原因 #

ListView的item默认会自动扩展以填充可用的水平宽度，因此你代码中的Container会占满ListView的整个宽度。即便给Row设置了mainAxisSize: MainAxisSize.min，Row也只能填满父容器（Container）的宽度，导致看起来自适应内容的效果没生效。

解决方案 #

你可以通过以下两种方式让Row自适应内容宽度：

方式一：用Align包裹Row

通过Align组件限制Row只占用自身内容的宽度，同时可以控制Row在Container中的对齐位置：

return ListView.builder(
  itemCount: 5,
  shrinkWrap: true,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.grey,
      margin: const EdgeInsets.all(2),
      child: Align(
        alignment: Alignment.centerLeft, // 可根据需求调整对齐方式
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(index.toString()),
          ],
        ),
      ),
    );
  },
);

方式二：给Container设置alignment属性

直接给Container添加alignment属性，让内部的Row按照指定对齐方式排列，同时只占用自身内容宽度：

return ListView.builder(
  itemCount: 5,
  shrinkWrap: true,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.grey,
      margin: const EdgeInsets.all(2),
      alignment: Alignment.centerLeft,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(index.toString()),
        ],
      ),
    );
  },
);

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