Question

对于我的项目，我显示一个足球比赛列表，供用户选择（3个单选按钮，分别为“ 1”，“ N”或“ 2”）。

示例：我需要这样的足球比赛清单：

阿森纳-托特纳姆热刺1 N 2 利物浦-曼彻斯特1 N 2 PSG-多特蒙德1 N 2

1 N 2是单选按钮，每个成员都可以在每个游戏的3个值之间进行选择。问题是我看不到如何识别每个单选按钮的唯一性。我需要在最后显示一个验证按钮，该按钮允许成员保存每个选择的结果。为了简单起见，如果您在3个游戏中选择1个，我需要通过php api将“ 111”传递给外部服务器

这是我用单选按钮显示表单的代码：请注意，游戏来自列表（values.map），因此游戏数量可能会有所不同

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:async';

// Create a Form widget.
class Affiche_grille extends StatefulWidget {
  @override
  _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>();

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

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

    // Starting Web API Call.
    var response = await http.post(url, body: json.encode(data));

    // 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);
    }

    return Matchs;
  }

  List<String> radioValues = [];

  @override
  Widget build(BuildContext context) {

    final appTitle = 'MONEYFREE';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: Container(
          child:
            FutureBuilder(
              future: Grille_display(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.data == null) {
                  return Container (
                    child: Center(
                      child: Text("Loading...")
                    )
                  );
                }
                else {
                List<Match> values = snapshot.data;
                values.forEach((m){
                  radioValues.add("N");
                  //like N or something
                });
                print('valeur radio après initialisation');
                print(radioValues);
                return Form(
                      key: _formKey,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        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;
                                            print('Change 1');
                                            print(radioValues);
                                          });
                                        },
                                      ),
                                    ),
                                    DataCell(
                                      Radio(
                                        value: "N",
                                        groupValue: radioValues[index],
                                        onChanged: (val) {
                                          setState(() {
                                            radioValues[index] = val;
                                            print(radioValues);
                                          });
                                        },
                                      ),
                                    ),
                                    DataCell(
                                      Radio(
                                        value: "2",
                                        groupValue: radioValues[index],
                                        onChanged: (val) {
                                          setState(() {
                                            radioValues[index] = val;
                                            print(radioValues);
                                          });
                                        },
                                      ),
                                    ),
                                  ]
                              );
                            }).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 = 'http://www.axis-medias.fr/game_app/valide_grid.php';

    // Store all data with Param Name.
    var data = jsonEncode(radioValues);

    print(radioValues);
    // Starting Web API Call.
    var response = await http.post(url, body: json.encode(data));

    // Getting Server response into variable.
    var message = json.decode(response.body);

    // If the Response Message is Matched.
    if(message == 'OK')
    {
      print('VALIDATION DE LA GRILLE OK');
      // Hiding the CircularProgressIndicator.
      setState(() {
        visible = false;
      });

    }else{

      // If Email or Password did not Matched.
      // Hiding the CircularProgressIndicator.
      setState(() {
        visible = false;
      });

      // Showing Alert Dialog with Response JSON Message.
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: new Text(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

创建全局列表

List<String> radioValues = [];

并分配每个默认值，在这些默认值中您将数据分配给无线电

values.forEach((m){
radioValues.add(/*assign default values here*/);
//like N or something
});

rows: List.generate(values.length, (index){
                          return DataRow(
                            cells: [
                              DataCell(
                                Text(values[index].equipe1.toString()+" - "+match.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(),

Answer 2

如果要创建单选按钮列表，请使用 RadioListTile

有关详细信息，请查看此链接：https://api.flutter.dev/flutter/material/RadioListTile-class.html

--希望对你有帮助

颤动中的单选按钮列表

2 个答案: