创建具有适当填充和对齐的多个按钮的最佳方法

Question

我正在创建类似测验的应用程序。我的目标是从单独的按钮（框）打开每个问题。按钮的数量不是恒定的，因此我动态生成它们。 然而，我有一个问题来统一它们的大小（每个应该具有相同的宽度和高度）并设置它们和屏幕之间的空间。

我想实现与此类似的功能，但正如您所看到的，按钮的宽度各不相同，并且屏幕两侧的填充方式也不同。

所以按钮应该这样组织：

[到边缘的动态空间][按钮][按钮空间][按钮][按钮空间][.....][按钮][到边缘的动态空间].

我尝试过这样的：

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),
        ))),
        child: Text(j.toString())));
        boxes.add(const SizedBox(width: 10));
  }

  return Wrap(
    alignment: WrapAlignment.center,
    children: boxes,
  );
}

我尝试过使用 Wrap 小部件，它可以按照我想要的方式对盒子进行排序，但没有空格。如果我在按钮之间添加 sizedBox 小部件 (width: 10)，那么左边缘或右边缘就有额外的空间。它在第一行尤其明显。

Answer 1

尝试下面的代码希望对您有帮助，我使用了padLeft方法来获取单个数字ID

声明：

 List<Map<String, dynamic>> jsonList = [];
    for (int i = 1; i < 100; i++) {
      jsonList.add({"Id": i});
    }

用户界面：

Padding(
    padding: EdgeInsets.symmetric(horizontal: 5),
    child: Wrap(
      spacing: 10.0,
      runSpacing: 10.0,
      alignment: WrapAlignment.center,
      children: List.generate(
        jsonList.length,
        (index) => OutlinedButton(
          onPressed: () {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
          child: Text(
            jsonList[index]['Id'].toString().padLeft(2, "0"),
          ),
        ),
      ),
    ),
  ),

结果屏幕 -