如何在Flutter中实现居中的水平ListView？

我想要实现垂直居中对齐的水平滚动列表（列表项在容器内垂直居中，视觉效果规整），但当前我的ListView呈现的是列表项顶部对齐的效果，需要调整为居中样式，请问该如何实现？

当前使用的代码：

Flexible(flex: 2,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: 10,
    itemBuilder: (context, index) {
      return const RowShoppingtile();
    },
  ),
),

解决方法 #

要实现列表项垂直居中，最直接可靠的方式是给每个列表项外层包裹Center组件：

修改后的完整代码：

Flexible(flex: 2,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: 10,
    itemBuilder: (context, index) {
      // 通过Center包裹列表项，实现垂直居中
      return const Center(child: RowShoppingtile());
    },
  ),
),

如果RowShoppingtile组件自身的布局是顶部对齐，也可以直接调整该组件内部的布局逻辑，比如使用Column并设置mainAxisAlignment: MainAxisAlignment.center，让组件内的内容垂直居中，这样就不需要额外的Center包裹。

另外也可以通过给ListView.builder设置垂直方向的内边距来调整视觉位置，但这种方式需要手动适配高度，灵活性较差：

Flexible(flex: 2,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    padding: const EdgeInsets.symmetric(vertical: 8.0), // 上下添加内边距
    itemCount: 10,
    itemBuilder: (context, index) {
      return const RowShoppingtile();
    },
  ),
),

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