Flutter 如何调整 ListView.separated 子项宽度并使其居中显示

问题原因 #

ListView 默认会强制所有子项撑满交叉轴（当前场景为水平方向）的可用空间，所以直接给子项 Container 设置 width 属性不会生效。

解决方案 #

只需要在你原有 itemBuilder 返回的 Container 外层包裹一层 Center 组件即可，它会让内部 Container 按照你设置的宽度渲染，同时自动在水平方向居中。

修改后的完整代码 #

Scaffold(
  body: ListView.separated(
    itemCount: 2,
    itemBuilder: (BuildContext context,int index){
      // 外层新增Center组件
      return Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Color.fromARGB(100, 141, 166, 255),
              width: 2
            ),
            borderRadius: BorderRadius.circular(10)
          ),
          // 这里的宽度会正常生效，可根据需求调整数值
          width: 300,
          height: 80,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Test txt', style: TextStyle(fontSize: 40),)
            ],
          ),
        ),
      );
    },
    separatorBuilder: (BuildContext context, int index){
      return Container(
        height: 14,
      );
    }
  ),
);

如果不需要完全居中，想要自定义子项的对齐位置，也可以把 Center 替换成 Align 组件，通过 alignment 参数调整对齐规则。

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