flutter：我需要在一个乐透循环中显示49个圆圈

Question

这是我的乐透游戏代码，您可以复制并对其进行测试，这是有趣的代码，但是仍然存在一些问题。我没有办法进行循环并显示49倍1圈的代码。目前，我需要复制49倍的代码，我认为这不是一个好的解决方案。现在，当我们单击蓝色圆圈时，圆圈会变色并变为红色，这表示它已被选中，并已添加到用户选择的数字数组中。但是代码似乎有不同之处，就是单击的圆圈。用一个圆圈可以正常工作，用2个圆圈不能正常工作，您能告诉我如何解决此问题吗？为了理解用户，需要在49上选择5个数字并验证

import 'package:flutter/material.dart';

class Lotto extends StatefulWidget {
  @override
  _LottoState createState() => new _LottoState();
}

class _LottoState extends State<Lotto> {

  Color color;
  void message(){

    print('Clicked');

  }
  @override
  void initState() {
    super.initState();

    color = Colors.lightBlue;
  }

  var i=1;
  var nb_num=49;
  var no_select=[];
  var no_a_select=5;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                    child : CustomScrollView(
                      primary: false,
                      slivers: <Widget>[
                        SliverPadding(
                          padding: const EdgeInsets.all(20),
                          sliver: SliverGrid.count(
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 10,
                            crossAxisCount: 5,
                            children: <Widget>[
                                GestureDetector(
                                  onTap: () {
                                  setState(() {
                                    if (color==Colors.lightBlue) {
                                      if (no_select.length<no_a_select) {
                                        color = Colors.redAccent;
                                        no_select.add(1);
                                      }
                                      else {
                                        print("Vous ne pouvez pas sélectionner plus de 5 numéros !!!");
                                      }
                                      print(no_select);
                                    }
                                    else {
                                      color = Colors.lightBlue;
                                      no_select.remove(1);
                                      print(no_select);
                                    }
                                  });
                                  },
                                  child: Container(
                                    child: ClipOval(
                                      child: Container(
                                        color: color,
                                        height: 30.0,
                                        width: 30.0,
                                        child: Center(
                                          child: new Text("1",
                                              style: TextStyle(color: Colors.white, fontSize: 24),
                                              textAlign: TextAlign.center),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              GestureDetector(
                                onTap: () {
                                  setState(() {
                                    if (color==Colors.lightBlue) {
                                      if (no_select.length<no_a_select) {
                                        color = Colors.redAccent;
                                        no_select.add(2);
                                      }
                                      else {
                                        print("Vous ne pouvez pas sélectionner plus de 5 numéros !!!");
                                      }
                                      print(no_select);
                                    }
                                    else {
                                      color = Colors.lightBlue;
                                      no_select.remove(2);
                                      print(no_select);
                                    }
                                  });
                                },
                                child: Container(
                                  child: ClipOval(
                                    child: Container(
                                      color: color,
                                      height: 30.0,
                                      width: 30.0,
                                      child: Center(
                                        child: new Text("2",
                                            style: TextStyle(color: Colors.white, fontSize: 24),
                                            textAlign: TextAlign.center),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    )
                )
            )
        );
  }
}

Answer 1

为什么不使用GridView？

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 10,
        childAspectRatio: 1.0
    ),
    itemCount: nb_num,
    itemBuilder: (context, index) {
      return GestureDetector(
                    onTap: () {message();},
                    child: ClipOval(
                      child: Container(
                        color: Colors.lightBlue,
                        height: 30.0,
                        width: 30.0,
                        child: Center(
                            child: new Text('$index',
                              style: TextStyle(color: Colors.white, fontSize: 24),
                              textAlign: TextAlign.center),
                        ),
                      ),
                    ),
                  );
    }
);