在 Flutter 中设置切换按钮之间的间隙

Question

我有这些ToggleButtons，我想让它们之间有一些间距。

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

想要的结果是这样的：

这有可能吗？

Answer 1

只需在行中放置两个或多个切换按钮即可。创建单独的布尔列表。

就像下面的代码一样：

List<bool> isSelected1 = [false];
List<bool> isSelected2 = [false];

        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ToggleButtons(
              isSelected: isSelected1,
              onPressed: (int index) {
                setState(() {
                  isSelected1[index] = !isSelected1[index];
                });
              },
              children: [
                Icon(Icons.credit_card),
              ],
            ),
            SizedBox(width: 10),
            ToggleButtons(
              isSelected: isSelected2,
              onPressed: (int index) {
                setState(() {
                  isSelected2[index] = !isSelected2[index];
                });
              },
              children: [
                Icon(Icons.money),
              ],
            ),
          ],
        ),

嗯，这不是最优雅的方式，但它可以满足您的需求。