在 Flutter 中设置 ToggleButtons 之间的间隙

Posted 2023-03-16

【中文标题】在 Flutter 中设置 ToggleButtons 之间的间隙

【英文标题】：Set a gap between ToggleButtons in Flutter

【发布时间】：2020-09-02 14:43:58

【问题描述】：

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

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

想要的结果是这样的：

这有可能吗？

【问题讨论】：

遗憾的是，我认为这是不可能的，所以基本上你必须自己做自定义切换按钮。但是很好的问题

我几乎没有尝试实现这一点，但仍然没有任何线索，只能自己构建它

@LonelyWolf 感谢您的建议。它帮助我保持切换按钮之间的空间。

这实际上是一个很好的问题，也是一个非常有效的用例。他们应该让这成为可能。

【参考方案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),
              ],
            ),
          ],
        ),

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

【参考方案2】：

我参加聚会有点晚了，但是任何遇到这个问题的人，我都有一个自定义解决方案要添加，按钮之间有一些框。像之前一样，我的输出看起来像：

代码：

                        ToggleButtons(
                        constraints: BoxConstraints.loose(Size.infinite),
                        direction: Axis.horizontal,
                        children: <Widget>[
                          Text('Pre-KG',
                              style: GoogleFonts.roboto(
                                  fontWeight: FontWeight.bold, fontSize: 20.0)),
                          Box(
                            color: Colors.white,
                            width: 8,
                          ),
                          Text('Junior-KG',
                              style: GoogleFonts.roboto(
                                  fontWeight: FontWeight.bold, fontSize: 20.0)),
                          Box(
                            color: Colors.white,
                            width: 8,
                          ),
                          Text('Senior-KG',
                              style: GoogleFonts.roboto(
                                  fontWeight: FontWeight.bold, fontSize: 20.0)),
                        ],
                        color: Colors.grey,
                        borderColor: Colors.white,
                        selectedColor: Colors.blue,

装箱后：

注意事项：

添加box后，需要热重启或重启，否则报错。

isSelected，列表需要在切换按钮中没有项目的值，就像我必须用 5 个值更新：

List isSelected = [false, false, false, false, false];

【讨论】：

问题是当我们选择它们被选中的框并显示颜色时