Flutter如何实现可横向滚动的Row组件？

你遇到的屏幕空白问题，核心原因是外层多嵌套了一层Row——Row在无宽度约束时会无限延伸，导致内部的SingleChildScrollView无法正确计算布局尺寸，最终显示空白。下面是两种可行的实现方案：

方案一：修正SingleChildScrollView的嵌套结构 #

直接用SingleChildScrollView作为父容器，内部放置承载子项的Row，无需额外外层Row。这样SingleChildScrollView能正确处理横向滚动的布局约束：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  padding: const EdgeInsets.symmetric(horizontal: 16), // 可选，添加左右内边距
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 第一个商品Column
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            decoration: const BoxDecoration(color: Color(0xfff1f1f1)),
            child: const SizedBox(
              width: 140.0,
              height: 150.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image(
                    width: 150,
                    image: AssetImage("images/golf_shoe.png"),
                  ),
                ],
              ),
            ),
          ),
          const Padding(
            padding: EdgeInsets.only(top: 10, left: 15),
            child: Text(
              'Golf Shoe in\nBlackkk',
              style: TextStyle(
                fontSize: 17,
                color: Color(0xff5a5a5a),
                fontWeight: FontWeight.w400,
                letterSpacing: 0.5,
              ),
            ),
          ),
          const Padding(
            padding: EdgeInsets.only(top: 10, left: 15),
            child: Row(
              children: [
                Text(
                  '\$568.00',
                  style: TextStyle(
                    fontSize: 17,
                    fontWeight: FontWeight.w500,
                    letterSpacing: 0.5,
                  ),
                ),
                SizedBox(width: 25),
                Icon(Icons.add_shopping_cart, size: 20),
              ],
            ),
          ),
          const Padding(
            padding: EdgeInsets.only(top: 10, left: 15),
            child: Text(
              'In stock',
              style: TextStyle(
                fontSize: 14,
                color: Color(0xff1e76b2),
                fontWeight: FontWeight.w500,
                letterSpacing: 0.5,
              ),
            ),
          ),
        ],
      ),
      const SizedBox(width: 20), // 子项间距
      // 可添加更多Column子项
    ],
  ),
)

关键修改点： #

• 移除最外层多余的Row，让SingleChildScrollView直接作为根容器
• 给子项添加间距，优化布局体验
• 简化冗余的Row嵌套（文本外层无需额外Row包裹）

方案二：使用ListView实现横向滚动（子项较多时推荐） #

如果商品列表项数量多，用ListView替代SingleChildScrollView+Row性能更好，支持懒加载：

ListView(
  scrollDirection: Axis.horizontal,
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  children: [
    buildProductItem(),
    const SizedBox(width: 20),
    buildProductItem(),
    // ...更多子项
  ],
)

// 抽离商品项为单独方法，方便复用
Widget buildProductItem() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        decoration: const BoxDecoration(color: Color(0xfff1f1f1)),
        child: const SizedBox(
          width: 140.0,
          height: 150.0,
          child: Center(
            child: Image(
              width: 150,
              image: AssetImage("images/golf_shoe.png"),
            ),
          ),
        ),
      ),
      const Padding(
        padding: EdgeInsets.only(top: 10, left: 15),
        child: Text(
          'Golf Shoe in\nBlackkk',
          style: TextStyle(
            fontSize: 17,
            color: Color(0xff5a5a5a),
            fontWeight: FontWeight.w400,
            letterSpacing: 0.5,
          ),
        ),
      ),
      // 其余内容和之前一致...
    ],
  );
}

动态列表可使用ListView.builder：

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: productList.length, // 商品列表长度
  padding: const EdgeInsets.symmetric(horizontal: 16),
  itemBuilder: (context, index) {
    final product = productList[index];
    return Padding(
      padding: const EdgeInsets.only(right: 20),
      child: buildProductItem(product), // 传入商品数据构建UI
    );
  },
)

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