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,
                ),
              ),
            ],
          ),

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

颤振中的切换按钮

1 个答案: