Flutter动态生成测验按钮：解决尺寸统一、内边距与对齐问题

1. 统一按钮尺寸 #

在ButtonStyle中添加fixedSize属性，直接指定按钮的宽高，确保所有按钮尺寸完全一致：

fixedSize: MaterialStateProperty.all(const Size(80, 80)), // 可根据需求调整具体数值

2. 正确处理间距问题 #

不要在循环里逐个添加SizedBox，而是利用Wrap组件自带的间距属性，同时给Wrap外层包裹Padding来控制屏幕边缘的动态间距：

修改后的完整代码 #

Widget getSectionBoxes(String id, num j) {
  List<Widget> boxes = [];

  for (int i = 0; i < questions[id].length; i++) {
    j++;
    String questionId = questions[id][i];
    
    boxes.add(OutlinedButton(
      onPressed: () {
        debugPrint(questionId);
      },
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
        ),
        fixedSize: MaterialStateProperty.all(const Size(80, 80)), // 固定按钮宽高
      ),
      child: Text(j.toString()),
    ));
    // 移除循环内的SizedBox，避免首尾出现多余间距
  }

  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), // 屏幕边缘的动态内边距
    child: Wrap(
      alignment: WrapAlignment.center,
      spacing: 10, // 按钮之间的水平间距
      runSpacing: 10, // 行与行之间的垂直间距
      children: boxes,
    ),
  );
}

关键说明 #

• fixedSize：强制所有按钮使用相同的宽高，彻底解决尺寸不一致的问题。
• Wrap的spacing和runSpacing：统一控制按钮间的水平、垂直间距，避免手动添加SizedBox导致的首尾多余间距。
• 外层Padding：灵活设置屏幕边缘的内边距，实现你需要的「屏幕边缘动态间距」效果，可根据UI需求调整EdgeInsets的数值。

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