如何将 ToggleButtons 放置在 GridView 中

Question

我创建了一个具有 ToggleButtons 的 GridView。我一次可以 select 一个 ToggleButton，但我需要将 ToggleButton 排成 3 行，因此总共有 9 个 ToggleButton。为此，我将它们放在 GridView 中，但返回时出现错误 'children.length == isSelected.length': is not true。如下所示。

下面是带有 GridView 和 ToggleButtons 的代码：

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) {
    return GridView.count(
      crossAxisCount: 2,
      children: <Widget> [
        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/image6.png'),
        Image.asset('images/image7.png'),
        Image.asset('images/image8.png'),
        Image.asset('images/image9.png')
        ].asMap().entries.map((widget) {
    Container(
    height: 100,
    width: 107,
    child: ToggleButtons(
    children: [widget.value],
    onPressed: (int index) {
    setState(() {
    for (int i = 0; i < isSelected.length; i++) {
    isSelected[i] = i == index;
    }
    });
    },
    isSelected: (isSelected),
    selectedBorderColor: Color(0xff2244C7),
    borderWidth: 3,
    borderRadius: BorderRadius.all(Radius.circular(8)
    ),
    ),
    );
    }).toList(),
    );
  }
}

我附上了解决方案的图片。

Answer 1

您应该将 9 个小部件放入 ToggleButtons 的子项中。 Toggle 按钮的子项应具有与 isSelected 长度相同的小部件数量。另一个问题是，当您将 GridView 与此代码一起使用时，它会生成 81 个切换按钮，并且每 9 个按钮都位于它们自己的顶部。我建议你试试这个代码：

class Backgrounds extends StatefulWidget {
  @override
  _BackgroundsState createState() => _BackgroundsState();
}

class _BackgroundsState extends State<Backgrounds> {
  List<String> imagePath = [
    'images/image1.png',
    'images/image2.png',
    'images/image3.png',
    'images/image4.png',
    'images/image5.png',
    'images/image6.png',
    'images/image7.png',
    'images/image8.png',
    'images/image9.png'
  ];
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      scrollDirection: Axis.vertical,
      crossAxisCount: 3,
      children: List.generate(
        9,
        (index) => index == 0
            ? ToggleButtonWidget(
                isFirst: true,
                imagePath: imagePath[index],
              )
            : ToggleButtonWidget(
                imagePath: imagePath[index],
              ),
      ),
    );
  }
}

class ToggleButtonWidget extends StatefulWidget {
  final bool isFirst;
  final String imagePath;
  ToggleButtonWidget({this.isFirst = false, this.imagePath});
  @override
  _ToggleButtonWidgetState createState() => _ToggleButtonWidgetState();
}

class _ToggleButtonWidgetState extends State<ToggleButtonWidget> {
  List<bool> _isSelected;
  @override
  void initState() {
    _isSelected = [widget.isFirst ? true : false];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 107,
      child: ToggleButtons(
        children: [
          Image.asset(widget.imagePath),
        ],
        isSelected: _isSelected,
        onPressed: (int index) {
          setState(() {
            _isSelected[0] = !_isSelected[0];
          });
        },
        selectedBorderColor: Color(0xff2244C7),
        borderWidth: 3,
        borderRadius: BorderRadius.all(Radius.circular(8)),
      ),
    );
  }
}

如何将 ToggleButtons 放置在 GridView 中

How do I place ToggleButtons inside a GridView

gridview

rows

selected

togglebutton

flutter