Flutter求助：ListView内Card宽度无法自定义怎么解决？

你遇到的核心问题是：垂直滚动的ListView默认会强制子项填充自身宽度，而你的ListView宽度继承自外层Container的0.8屏幕宽度，所以你给SizedBox设置的宽度会被ListView的布局约束直接覆盖，导致Card始终占满父容器宽度。

下面给你几个可行的解决方案：

方案1：用Align包裹列表项（最直接有效） #

给每个列表项添加Align组件，指定对齐方式（比如居中），这样就能打破ListView强制子项填充宽度的约束，让SizedBox的宽度设置生效：

itemBuilder: (BuildContext context, int index) {
  return Align(
    alignment: Alignment.center, // 可根据需求调整对齐方式，比如左对齐Alignment.centerLeft
    child: SizedBox(
      width: MediaQuery.of(context).size.width * 0.6, // 设置你需要的Card宽度
      height: MediaQuery.of(context).size.height * 0.3,
      child: Card(
        color: Colors.black,
      ),
    ),
  );
},

方案2：替换ListView为Column（适合少量列表项） #

由于你已经在外层使用了SingleChildScrollView，并且给ListView设置了shrinkWrap: true和NeverScrollableScrollPhysics，其实可以直接把ListView换成Column，这样子项不会被强制拉伸，宽度设置会直接生效：

child: SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: Column(
    children: List.generate(10, (index) {
      return SizedBox(
        width: MediaQuery.of(context).size.width * 0.6,
        height: MediaQuery.of(context).size.height * 0.3,
        child: Card(
          color: Colors.black,
        ),
      );
    }),
  ),
),

注意：如果列表项数量非常多，Column的性能会比ListView差（因为会一次性渲染所有子项），但你的场景是10个，完全可以放心使用。

方案3：给Card设置margin（快速留白） #

如果你只是想让Card两侧留空白，不需要精确控制宽度，可以直接给Card添加margin，Card的宽度会自动减去左右margin的数值：

return Card(
  color: Colors.black,
  margin: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width * 0.1), // 左右各留0.1屏幕宽度的空白
  child: SizedBox(
    height: MediaQuery.of(context).size.height * 0.3,
  ),
);

以上三种方法都能解决你的问题，你可以根据自己的需求选择最合适的一种。

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