切换按钮不在 Flutter 中切换

Question

我创建了一个带有 ToggleButtons 的 GridList，但是当我尝试在彼此之间切换按钮时，没有任何反应。有任何想法吗？我有一个 isSelected 列表，我在 setState 中调用了它。布局很好，但是一旦我使用 GridView，它似乎就改变了 setState。

class Backgrounds extends StatefulWidget {

  @override
  _BackgroundsState createState() => _BackgroundsState();
}

class _BackgroundsState extends State<Backgrounds> {

  List<bool> isSelected;

  void initState() {
    isSelected = [true, false, false, false, false, false, false, false, false];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var counter = 0;
    return GridView.count(
        padding: EdgeInsets.all(12),
        crossAxisCount: 3,
        mainAxisSpacing: 0,
        crossAxisSpacing: 0,
        children: [
          Image.asset('images/image1.png'),
          Image.asset('images/image2.png'),
          Image.asset('images/image3.png'),
          Image.asset('images/image4.png'),
          Image.asset('images/image5.png'),
          Image.asset('images/image5.png'),
          Image.asset('images/image6.png'),
          Image.asset('images/image7.png'),
          Image.asset('images/image8.png')
          ].asMap().entries.map((widget) {
          final index = ++counter - 1;
          return ToggleButtons(
    onPressed: (int index) {
      print('selected');
    setState(() {
      // isSelected[index] = !isSelected[index];
    for (int i = 1; i < isSelected.length; i++) {
    isSelected[i] = i == index;
    }
    });
    },
     isSelected: [isSelected[index]],
            // isSelected: (isSelected),
    selectedBorderColor: Color(0xff2244C7),
            borderColor: Colors.transparent,
    borderWidth: 3,
    borderRadius: BorderRadius.all(Radius.circular(8),
    ),
    children: [widget.value],
    );
    }).toList());
}
}

Answer 1

问题出在切换按钮的'onPressed()'功能上。由于网格视图的列表是由地图生成的，每次切换按钮的子项列表大小为 1 时，'OnPressed()' 中的索引参数将始终给出值 0。我建议使用 'widget.key'在地图中，因为这会给出子部件的正确索引。因此网格视图代码应该是

return GridView.count(
    padding: EdgeInsets.all(12),
    crossAxisCount: 3,
    mainAxisSpacing: 0,
    crossAxisSpacing: 0,
    children: [
      Image.asset('images/image1.png'),
      Image.asset('images/image2.png'),
      Image.asset('images/image3.png'),
      Image.asset('images/image4.png'),
      Image.asset('images/image5.png'),
      Image.asset('images/image5.png'),
      Image.asset('images/image6.png'),
      Image.asset('images/image7.png'),
      Image.asset('images/image8.png')
      ].asMap().entries.map((widget) {
      final index = ++counter - 1;
      return ToggleButtons(
onPressed: (_) {
  print('selected');
setState(() {
for (int i = 0; i < isSelected.length; i++) {
// isSelected[index] = !isSelected[index];
isSelected[i] = i == widget.key;
}
});
},
 isSelected: [isSelected[widget.key]],
        // isSelected: (isSelected),
selectedBorderColor: Color(0xff2244C7),
        borderColor: Colors.transparent,
borderWidth: 3,
borderRadius: BorderRadius.all(Radius.circular(8),
),
children: [widget.value],
);
}).toList());

切换按钮不在 Flutter 中切换

Toggle Button not toggling in Flutter

gridview

toggle

togglebutton

setstate

flutter