Flutter 中的切换按钮

Question

我很陌生，所以如果这个问题感觉微不足道或不需要，我很抱歉！

我有一个 Toggle 小部件，它包含一个带有 5 个子级的 Row 小部件，但我还添加了 4 个 SizedBox 来创建 5 个 Container 小部件之间的差异。

我希望这 5 个容器在单击时显示不同的颜色，并存储一个与之关联的 int 值。

我关注了官方文档和 Youtube 视频，但没有走多远。 这是我的代码：

ToggleButtons(
                            isSelected: <bool>[true, false, false, false, false, false, false, false, false],
                            children: <Widget>[
                              GestureDetector(
                                child: Container(
                                    height: 85,
                                    width: 85,
                                    decoration: BoxDecoration(
                                        color: _colour,
                                        borderRadius: BorderRadius.circular(10)
                                    ),
                                    child: Padding(
                                      padding: EdgeInsets.all(8),
                                      child: Image(
                                        image: AssetImage('images/happy_icon.png'),
                                        width: 75,
                                      ),
                                    )
                                ),
                                onTap: () {
                                  setState(() {
                                    remind = 1;
                                  });
                                },
                              ),
                              SizedBox(
                                width: 8,
                              ),
// ... 3 more widgets like these

GestureDetector(
                                child: Container(
                                    height: 85,
                                    width: 85,
                                    decoration: BoxDecoration(
                                        color: _colour,
                                        borderRadius: BorderRadius.circular(10)
                                    ),
                                    child: Padding(
                                      padding: EdgeInsets.all(8),
                                      child: Image(
                                        image: AssetImage('images/sad.png'),
                                        width: 75,
                                      ),
                                    )
                                ),
                                onTap: () {
                                  setState(() {
                                    remind = 5;
                                  });
                                },
                              )
selectedColor: _selectedColour,
                            onPressed: (int index) {
                              setState(() {
                                for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
                                  if (buttonIndex == index) {
                                    isSelected[buttonIndex] = !isSelected[buttonIndex];
                                  } else {
                                    isSelected[buttonIndex] = false;
                                  }
                                }
                              });
                            },

Answer 1

尝试只使用带有子元素的Column，它们是包裹在GestureDetector 中的按钮，然后onTap() 设置颜色状态，然后保存整数。

例子：

          Column(
            children: [
              GestureDetector(
                onTap: () {
                  associatedInt = 1;
                  setState(() {
                    if(containerColor == Colors.white)
                      containerColor = Colors.blue;
                    else
                      containerColor = Colors.white;
                  });
                },
                child: Container(
                  width: 100,
                  height: 100,
                  color: containerColor,
                ),
              ),
            ],
          ),

我只使用了一个孩子，但您可以使用更多。希望这会有所帮助。