如何改变单选按钮列表的视觉效果？

Question

我有一个下注游戏，它是一个游戏列表，用户需要在 3 个选项（只有一个选项）（1、N、2）之间进行选择，所以我在颤振中使用无线电来做。

1 - 这是我现在得到的结果：

2 - 这是我想要的结果：

我需要在不使用任何图像的情况下使用相同的收音机 1 N 2，我认为可以使用带有圆形边框的 clipoval 来实现。这里选定的收音机在背景中是红色的，所以当我点击另一个收音机时，它需要更改收音机的颜色（如果选择红色背景和白色字体，如果没有选择白色背景和红色字体） 现在这是我的整个网格代码：

import 'package:flutter/material.dart';
            import 'dart:convert';
            import 'package:http/http.dart' as http;
            import 'dart:async';
            import 'package:flutter_app/menu_member.dart';
            import 'package:flutter_app/globals.dart' as globals;
            import 'package:flutter_app/grille_lotosport.dart';

        // Create

     a Form widget.
class Affiche_grille extends StatefulWidget {
  @override
  String id;

  Affiche_grille({Key key, @required this.id}) : super(key: key);

  _Affiche_grille_State createState() {
    return _Affiche_grille_State();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.

class _Affiche_grille_State extends State<Affiche_grille> {
  @override
  final _formKey = GlobalKey<FormState>();
  List<String> radioValues = [];
  Future<List<Match>> grid;

  Future <List<Match>> Grille_display() async {
    // SERVER LOGIN API URL
    var url = 'https://www.easytrafic.fr/game_app/display_grid.php';

    // Store all data with Param Name.
    var data = {'id_grille': widget.id};

    // Starting Web API Call.
    var response = await http.post(url, body: json.encode(data),headers: {'content-type': 'application/json','accept': 'application/json','authorization': globals.token});

    // Getting Server response into variable.

    var jsondata = json.decode(response.body);

    List<Match> Matchs = [];

    for (var u in jsondata) {
      Match match = Match(u["equipe1"],u["equipe2"],u["type_prono"]);
      Matchs.add(match);
      radioValues.add("N");
    }
    return Matchs;
  }

  void initState() {
    grid = Grille_display();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(title: Text('GRILLE LOTOSPORT'),
        ),
        drawer: new DrawerOnly(),
        body:
        Container(
          child:
            FutureBuilder(
              future: grid,
              builder: (BuildContext context, AsyncSnapshot snapshot) {

              switch (snapshot.connectionState) {
                case ConnectionState.waiting:
                  return new Center(
                    child: new CircularProgressIndicator(),);
                default:
                  if (snapshot.hasError) {
                    return new Center(
                      child: new Text('Error: ${snapshot.error}'),);
                  }
                  else {
                    List<Match> values = snapshot.data;
                    return Form(
                        key: _formKey,
                        child: ListView(
                          children: <Widget>[
                            DataTable(
                              columnSpacing: 20,
                              columns: [
                                DataColumn(
                                  label: Text("Libelle Match"),
                                  numeric: false,
                                  tooltip: "",
                                ),
                                DataColumn(
                                  label: Text("1"),
                                  numeric: false,
                                  tooltip: "",
                                ),
                                DataColumn(
                                  label: Text("N"),
                                  numeric: false,
                                  tooltip: "",
                                ),
                                DataColumn(
                                  label: Text("2"),
                                  numeric: false,
                                  tooltip: "",
                                ),
                              ],
                              rows:
                              List.generate(values.length, (index) {
                                return DataRow(
                                    cells: [
                                      DataCell(
                                        Text(values[index].equipe1.toString() +
                                            " - " +
                                            values[index].equipe2.toString()),
                                      ),
                                      DataCell(
                                        Radio(
                                          value: "1",
                                          groupValue: radioValues[index],
                                          onChanged: (val) {
                                            setState(() {
                                              radioValues[index] = val;
                                            });
                                          },
                                        ),
                                      ),
                                      DataCell(
                                        Radio(
                                          value: "N",
                                          groupValue: radioValues[index],
                                          onChanged: (val) {
                                            setState(() {
                                              radioValues[index] = val;
                                            });
                                          },
                                        ),
                                      ),
                                      DataCell(
                                        Radio(
                                          value: "2",
                                          groupValue: radioValues[index],
                                          onChanged: (val) {
                                            setState(() {
                                              radioValues[index] = val;
                                            });
                                          },
                                        ),
                                      ),
                                    ]
                                );
                              }).toList(),
                            ),
                            Center(
                              child: RaisedButton(
                                color: Colors.green,
                                textColor: Colors.white,
                                padding: EdgeInsets.fromLTRB(9, 9, 9, 9),
                                child: Text('VALIDER VOTRE GRILLE'),
                                onPressed: () {
                                  Valide_grille();
                                },
                              ),
                            ),
                          ],
                        )
                    );
                  };
              };
                },
            ),
        ),
    ),
    );
  }

  Future Valide_grille() async{
    // For CircularProgressIndicator.
    bool visible = false ;
    // Showing CircularProgressIndicator.
    setState(() {
      visible = true ;
    });

    // SERVER LOGIN API URL
    var url = 'https://www.easytrafic.fr/game_app/valide_grid.php';

    var concatenate='';

    radioValues.forEach((item){
      concatenate=concatenate+item;
    });

    var id_grille=widget.id;

    // Store all data with Param Name.
    var data = {'id_membre':globals.id_membre, 'id_grille':id_grille,'result':concatenate};

    var grille_encode=jsonEncode(data);

    // Starting Web API Call.
    var response = await http.post(url, body: grille_encode,headers: {'content-type': 'application/json','accept': 'application/json','authorization': globals.token});

    print(response.body);
    // Getting Server response into variable.
    Map <String,dynamic> map2 = json.decode(response.body);

    // If the Response Message is Matched.
    if(map2["status"] == 1)
    {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: new Text(map2["message"]),
            actions: <Widget>[
              FlatButton(
                child: new Text("OK"),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Affiche_Liste_grille()),
                  );
                },
              ),
            ],
          );
        },
      );
      // Hiding the CircularProgressIndicator.
      setState(() {
        visible = false;
      });

    }else{
      // Hiding the CircularProgressIndicator.
      setState(() {
        visible = false;
      });

      // Showing Alert Dialog with Response JSON Message.
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: new Text(map2["message"]),
            actions: <Widget>[
              FlatButton(
                child: new Text("OK"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }
  }
  }

class Match {

  final String equipe1;
  final String equipe2;
  final String typeprono;

  const Match(this.equipe1, this.equipe2, this.typeprono);

}

Answer 1

我找到了解决方案，我不明白它为什么会起作用，但它现在可以用我的所有更正。我不明白为什么当我放置一个 setstate 时所有元素都正确更新，我没有在 setstate 中放任何代码但现在都更新了，这很奇怪