Flutter横向滚动FilterChip间距异常问题求助

你的问题出在布局结构和Wrap的方向设置上：

• 设置Wrap(direction: Axis.vertical)会让标签垂直排列，且每个水平列会以该列中最长标签的宽度为基准对齐，导致所有标签强制占用相同的最大宽度，视觉上间距异常。
• 外层嵌套的Row是多余的，反而会限制Wrap的布局空间。

方案1：单行横向滚动（最常用的筛选标签场景） #

直接用Row替代Wrap，配合SingleChildScrollView实现横向滚动，标签宽度自适应内容，间距可控：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  padding: const EdgeInsets.symmetric(horizontal: 8), // 添加上下左右内边距优化视觉
  child: Row(
    children: listOfPackTags.map((category) {
      return Padding(
        padding: const EdgeInsets.only(right: 5), // 控制标签间的水平间距
        child: FilterChip(
          selected: selectedTags.contains(category),
          onSelected: (bool selected) {
            setState(() {
              selected ? selectedTags.add(category) : selectedTags.remove(category);
            });
          },
          label: Text(category),
          showCheckmark: false,
          selectedColor: const Color(0xFF93C3B9),
        ),
      );
    }).toList(),
  ),
)

方案2：多行横向滚动（特殊场景） #

如果确实需要标签垂直排列成多行，同时允许横向滚动，只需给Wrap添加crossAxisAlignment: WrapCrossAlignment.start，让每个标签宽度自适应，避免强制对齐到最长标签：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  padding: const EdgeInsets.all(8),
  child: Wrap(
    direction: Axis.vertical,
    alignment: WrapAlignment.start,
    crossAxisAlignment: WrapCrossAlignment.start, // 关键：取消按最大宽度对齐
    spacing: 5, // 标签垂直间距
    runSpacing: 10, // 列之间的水平间距
    children: listOfPackTags.map((category) {
      return FilterChip(
        selected: selectedTags.contains(category),
        onSelected: (bool selected) {
          setState(() {
            selected ? selectedTags.add(category) : selectedTags.remove(category);
          });
        },
        label: Text(category),
        showCheckmark: false,
        selectedColor: const Color(0xFF93C3B9),
      );
    }).toList(),
  ),
)

内容的提问来源于stack exchange，提问作者Ten Digit Grid