如何创建换行展示剩余项而非滚动的Horizontal ListView

你要的其实不是Horizontal ListView，而是自动换行的流式布局——因为Horizontal ListView本身设计为横向滚动，要实现换行效果，得用对应平台的流式布局组件来替代，以下是各平台的具体实现：

Flutter 实现 #

直接用Wrap组件即可，它会自动根据容器宽度换行，完全不需要滚动逻辑：

Wrap(
  spacing: 8.0, // 子项之间的水平间距
  runSpacing: 8.0, // 行与行的垂直间距
  children: [
    // 你的列表项示例
    Container(width: 100, height: 50, color: Colors.blue, child: Center(child: Text('Item 1'))),
    Container(width: 120, height: 50, color: Colors.green, child: Center(child: Text('Item 2'))),
    Container(width: 90, height: 50, color: Colors.orange, child: Center(child: Text('Item 3'))),
    // 更多列表项...
  ],
)

如果一定要基于ListView改造（不推荐），可以禁用滚动并配合CustomScrollView，但Wrap是最简洁直接的方案。

Android 原生实现 #

方案1：使用FlexboxLayout（第三方库） #

添加依赖到build.gradle（Module级别）：

implementation 'com.google.android.flexbox:flexbox:3.0.0'

布局文件中使用：

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexWrap="wrap"
    app:justifyContent="flex_start">

    <!-- 列表项示例 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item 1"
        android:padding="8dp"
        android:background="@color/blue"/>
    <!-- 更多列表项 -->
</com.google.android.flexbox.FlexboxLayout>

方案2：自定义流式布局 #

如果不想依赖第三方库，可以自己继承ViewGroup，在onMeasure和onLayout方法中计算子项位置，当一行宽度不足以容纳下一个子项时自动换行。

iOS 实现 #

使用UICollectionView配合UICollectionViewFlowLayout，设置垂直滚动方向并禁用滚动：

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    private var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.minimumInteritemSpacing = 8
        layout.minimumLineSpacing = 8
        
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
        collectionView.isScrollEnabled = false // 禁用滚动
        view.addSubview(collectionView)
    }

    // 列表项数量
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    // 构建列表项
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = .blue
        // 设置cell内容
        return cell
    }

    // 设置列表项大小
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 50)
    }
}

以上方案都能实现“列表项自动换行、无滚动效果”的需求，可根据你使用的平台选择对应实现方式。

内容的提问来源于stack exchange，提问作者HOVOZOUNKOU Ebénézer