Flutter：如何让ListView中的Row内容自适应宽度而非占满全屏？

问题根源在于ListView的item默认会强制子元素填充父级宽度，你给Row设置MainAxisSize.min只是让Row自身自适应内容，但外层的Container还是被ListView的约束拉伸至全屏宽度。

下面是两种可行的解决方案：

方案一：给Container添加alignment属性 #

通过给Container设置alignment，可以让它收缩到子元素的实际宽度：

class HomePage extends StatelessWidget {
  HomePage({super.key});

  final List<String> list = ["apple", "banana", "cat", "dragon"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          shrinkWrap: true,
          itemCount: list.length,
          itemBuilder: (context, index) {
            return Container(
              alignment: Alignment.centerLeft, // 新增：让容器收缩到子元素宽度
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.black)),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('[$index]'),
                  const SizedBox(width: 4),
                  Text(list[index])
                ],
              ),
            );
          }),
    );
  }
}

方案二：用Align组件包裹Container #

通过Align组件打破ListView的宽度约束，让容器自适应内容：

class HomePage extends StatelessWidget {
  HomePage({super.key});

  final List<String> list = ["apple", "banana", "cat", "dragon"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          shrinkWrap: true,
          itemCount: list.length,
          itemBuilder: (context, index) {
            return Align(
              alignment: Alignment.centerLeft, // 指定对齐方向
              child: Container(
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.black)),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text('[$index]'),
                    const SizedBox(width: 4),
                    Text(list[index])
                  ],
                ),
              ),
            );
          }),
    );
  }
}

两种方案的核心都是打破ListView对item的宽度填充约束，让容器的尺寸由内部内容决定，从而实现列表项自适应内容宽度的效果。

内容的提问来源于stack exchange，提问作者dev.farmer