Wrap组件与ListView.builder配合失效，无法实现换行布局

你的问题出在错误地将每个单选选项单独放在ListView.builder的item里，每个item对应一个Wrap：每个Wrap仅包含单选框和文本两个元素，根本不会触发换行逻辑；再加上ListView默认垂直排列item，最终就呈现出列状布局。

修正方案 #

把所有单选选项统一放在同一个Wrap组件中，让Wrap管理所有子元素的换行逻辑。如果需要滚动能力，给Wrap套一层SingleChildScrollView即可。

带滚动的实现代码 #

SingleChildScrollView(
  child: Wrap(
    crossAxisAlignment: WrapCrossAlignment.center,
    spacing: 16, // 子组件水平间距（可选）
    runSpacing: 8, // 行之间的垂直间距（可选）
    children: List.generate(medDays.length, (index) {
      return Row(
        mainAxisSize: MainAxisSize.min, // 让Row仅占用必要宽度
        children: [
          Radio(
            value: index,
            groupValue: radioCondition,
            activeColor: cardColor,
            onChanged: (val) {
              setState(() {
                radioCondition = val;
                pageCondition = true;
              });
            },
          ),
          Text(
            medDays[index].toString(),
            style: const TextStyle(fontSize: 18),
          ),
        ],
      );
    }),
  ),
)

不带滚动的实现代码 #

如果内容不会超出屏幕，直接使用Wrap即可：

Wrap(
  crossAxisAlignment: WrapCrossAlignment.center,
  spacing: 16,
  runSpacing: 8,
  children: List.generate(medDays.length, (index) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Radio(
          value: index,
          groupValue: radioCondition,
          activeColor: cardColor,
          onChanged: (val) {
            setState(() {
              radioCondition = val;
              pageCondition = true;
            });
          },
        ),
        Text(
          medDays[index].toString(),
          style: const TextStyle(fontSize: 18),
        ),
      ],
    );
  }),
)

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