Flutter如何实现两行元素整体同步横向滚动的功能？

核心实现逻辑 #

你之前用Wrap实现的是纵向溢出自动换行的效果，Wrap本身不支持固定行数+整体横向滚动的特性，以下是两种可直接落地的实现方案：

方案1：同滚动容器包裹（最简方案，天然同步） #

将两行元素统一放在同一个横向滚动容器内，天然保证滚动同步，适配绝大多数场景：

import 'package:flutter/material.dart';

class TwoRowHorizontalScroll extends StatelessWidget {
  // 传入所有需要排布的子元素
  final List<Widget> children;
  // 子元素之间的间距
  final double childSpacing;
  // 两行之间的间距
  final double rowSpacing;

  const TwoRowHorizontalScroll({
    super.key,
    required this.children,
    this.childSpacing = 12,
    this.rowSpacing = 8,
  });

  @override
  Widget build(BuildContext context) {
    // 拆分元素为两行：奇数索引放第一行，偶数索引放第二行，可按需求调整拆分规则
    final List<Widget> row1 = [];
    final List<Widget> row2 = [];
    for (int i = 0; i < children.length; i++) {
      // 给每个子元素加右侧间距
      final paddedChild = Padding(
        padding: EdgeInsets.only(right: childSpacing),
        child: children[i],
      );
      if (i % 2 == 0) {
        row1.add(paddedChild);
      } else {
        row2.add(paddedChild);
      }
    }

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      // 可根据需求设置滚动物理效果
      physics: const BouncingScrollPhysics(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(children: row1),
          SizedBox(height: rowSpacing),
          Row(children: row2),
        ],
      ),
    );
  }
}

方案优势：

• 无滚动不同步问题，两行完全绑定
• 代码逻辑简单，性能损耗低

方案2：独立行绑定同一滚动控制器（适配特殊布局需求） #

如果两行需要设置不同的高度、边距、对齐规则，无法放在同一个Column内，可给两个横向滚动的ListView绑定同一个ScrollController实现同步：

import 'package:flutter/material.dart';

class TwoRowIndependentScroll extends StatefulWidget {
  final List<Widget> children;
  final double row1Height;
  final double row2Height;

  const TwoRowIndependentScroll({
    super.key,
    required this.children,
    this.row1Height = 60,
    this.row2Height = 80,
  });

  @override
  State<TwoRowIndependentScroll> createState() => _TwoRowIndependentScrollState();
}

class _TwoRowIndependentScrollState extends State<TwoRowIndependentScroll> {
  // 两行共用的滚动控制器
  final ScrollController _sharedController = ScrollController();

  @override
  void dispose() {
    _sharedController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 元素拆分逻辑和方案1一致
    final List<Widget> row1 = [];
    final List<Widget> row2 = [];
    for (int i = 0; i < widget.children.length; i++) {
      if (i % 2 == 0) {
        row1.add(widget.children[i]);
      } else {
        row2.add(widget.children[i]);
      }
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: widget.row1Height,
          child: ListView.builder(
            controller: _sharedController,
            scrollDirection: Axis.horizontal,
            // 禁用弹性滚动，避免iOS端出现滚动不同步偏差
            physics: const ClampingScrollPhysics(),
            itemCount: row1.length,
            padding: const EdgeInsets.symmetric(horizontal: 12),
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.only(right: 12),
              child: row1[index],
            ),
          ),
        ),
        const SizedBox(height: 8),
        SizedBox(
          height: widget.row2Height,
          child: ListView.builder(
            controller: _sharedController,
            scrollDirection: Axis.horizontal,
            physics: const ClampingScrollPhysics(),
            itemCount: row2.length,
            padding: const EdgeInsets.symmetric(horizontal: 12),
            itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.only(right: 12),
              child: row2[index],
            ),
          ),
        ),
      ],
    );
  }
}

注意事项：

• 两行的滚动内容总宽度必须保持一致，否则会出现其中一行滚动到终点后另一行还能继续滚动的问题
• 两行的physics属性必须设置为相同，避免滚动逻辑差异导致的不同步

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