Flutter中如何将ListView.separated承载的Filter Chips改为自动换行布局

问题根因 #

• 你当前代码的核心逻辑是使用ListView.separated并设置scrollDirection: Axis.horizontal，外层还嵌套了固定高度的Container，这套结构本身就是为横向滚动设计的，没有任何自动换行的机制。
• 之前尝试使用Wrap出现芯片堆叠的问题，通常是两个原因：一是没有移除原有横向滚动的约束容器，二是没有配置spacing/runSpacing参数，导致芯片之间没有预留间距被挤压在一起。

修复方案 #

1. 删除原有包裹横向ListView的固定高度Container，以及整段横向滚动的ListView.separated逻辑。
2. 替换为Wrap组件，配置水平间距、垂直行间距参数，将所有FilterChip作为Wrap的子元素直接传入即可，Wrap会自动根据屏幕可用宽度计算换行位置。

修改后的完整代码 #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  var data = ['Chip 1', 'Chip 2', 'Chip 3', 'Chip 4', 'Chip 5'];
  var selected = [];

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.black87,
        ),
        leading: IconButton(
          icon: Icon(Icons.close),
        ),
        centerTitle: true,
        title: Text(
          'Screen',
          style: TextStyle(
            color: Colors.black87,
            fontWeight: FontWeight.bold,
          ),
        ),
        backgroundColor: Colors.green,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Center(
              child: Row(
                children: <Widget>[
                  Text(
                    "Label 1",
                  ),
                ],
              ),
            ),
            SizedBox(height: size.height * 0.02),
            // 替换原横向ListView的逻辑为Wrap组件
            Wrap(
              spacing: size.width * 0.03, // 水平方向芯片间距
              runSpacing: size.height * 0.02, // 换行后上下行的垂直间距
              children: data.asMap().entries.map((entry) {
                int index = entry.key;
                String chipLabel = entry.value;
                return FilterChip(
                  padding: EdgeInsets.all(10),
                  label: Text(
                    chipLabel,
                    style: TextStyle(fontSize: 20),
                  ),
                  onSelected: (bool value) {
                    setState(() {
                      if (selected.contains(index)) {
                        selected.remove(index);
                      } else {
                        selected.add(index);
                      }
                    });
                  },
                  selected: selected.contains(index),
                  selectedColor: Colors.deepOrange,
                  labelStyle: TextStyle(
                    color: Colors.white,
                  ),
                  backgroundColor: Colors.green,
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

关键注意事项 #

• 不要给Wrap设置固定高度，它会根据子元素的数量自动计算整体高度，外层已有的SingleChildScrollView会支撑纵向滚动，不会出现内容溢出的问题。
• 如果需要调整芯片对齐方式，可以给Wrap添加alignment: WrapAlignment.start参数，从左到右排布即可实现均匀分行，不会出现之前的堆叠问题。

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