Flutter中如何实现Filter Chips的多行对齐排列？

问题原因 #

你当前代码里的Wrap被嵌套在Row组件内部，而Row的特性是强制子组件在单行布局，且不会给子组件提供可换行的宽度限制，导致Wrap无法触发自动换行逻辑，所有Chips只能挤在一行里。

解决方案 #

直接移除外层的Row，让Wrap作为Padding的直接子组件即可。如果需要左对齐效果，给Wrap设置alignment: WrapAlignment.start（默认就是左对齐，可省略）。另外注意代码里的items3是笔误，要改成定义好的items数组。

修改后的完整代码 #

final items = [
  "All",
  "0-2 Years",
  "2-4 Years",
  "5-7 Years",
  "8-13 Years",
  "14+ Years"
];
List<String> age = [];

// ... 其他页面代码 ...

Padding(
  padding: const EdgeInsets.only(top: 15, left: 20),
  child: Wrap(
    spacing: 8,
    runSpacing: 8,
    alignment: WrapAlignment.start, // 可选，默认左对齐
    children: items
        .map(
          (e) => FilterChip(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              backgroundColor: Colors.white,
              selectedColor: const Color(0xff6fedf6),
              label: Container(
                height: 46,
                width: 98,
                alignment: Alignment.center,
                child: Text(e),
              ),
              labelStyle: GoogleFonts.poppins(
                textStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  letterSpacing: 0.5,
                ),
              ),
              selected: age.contains(e),
              onSelected: (bool value) {
                if (age.contains(e)) {
                  age.remove(e);
                } else {
                  age.add(e);
                }
                setState(() {});
              }),
        )
        .toList(),
  ),
),

效果说明 #

• 期望效果：Filter Chips在容器宽度不足时自动换行，多行排列，每行Chips保持左对齐
• 修改后效果：即可实现上述期望的多行换行布局

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