在 ListView.builder() 中动态创建单选按钮组

Posted 2023-03-27

【中文标题】在 ListView.builder() 中动态创建单选按钮组

【英文标题】：Dynamically create radio button Group in ListView.builder() flutter

【发布时间】：2021-07-26 19:39:47

【问题描述】：

我想创建这样的用户界面

最后，我得到了所有选中的单选按钮的详细信息。

这是我的完整代码

当我尝试这样做时，所有单选按钮都转向一侧。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Affiche_grille extends StatefulWidget 
  @override
  _QuestionWidgetState createState() => _QuestionWidgetState();


int selectedRadio;
int _groupValue = -1;

class _QuestionWidgetState extends State<Affiche_grille> 
  List<RadioModel> sampleData = new List<RadioModel>();

  @override
  void initState() 
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 'April 18', 'text1'));
    sampleData.add(new RadioModel(false, 'B', 'April 17', 'text2'));
    sampleData.add(new RadioModel(false, 'C', 'April 16', 'text3'));
    sampleData.add(new RadioModel(false, 'D', 'April 15', 'text4'));
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: ListView.builder(
        itemCount: sampleData.length,
        itemBuilder: (context, index) => ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            _myRadioButton(
              title: "Checkbox 0",
              value: 0,
              onChanged: (newValue) => setState(() => _groupValue = newValue),
            ),
            _myRadioButton(
              title: "Checkbox 1",
              value: 1,
              onChanged: (newValue) => setState(() => _groupValue = newValue),
            ),
          ],
        ),
      ),
    );
  


Widget _myRadioButton(String title, int value, Function onChanged) 
  return Radio(
    value: value,
    groupValue: _groupValue,
    onChanged: onChanged,
  );


class RadioModel 
  bool isSelected;
  final String buttonText;
  final String text;
  final String text1;

  RadioModel(this.isSelected, this.buttonText, this.text, this.text1);

此应用程序 UI 由此 CODE 制成。

【参考方案1】：

当其 value == groupValue 时启用无线电 在您的情况下，所有 8 个 Radio 共享一个 groupValue，并且所有行的第一个值为 0，第二个值为 1。

然后，当您单击左侧 Radio globalValue 设置为 0 时，所有左侧 Radio（它们的值都为 0）启用，反之亦然。

要创建您想要做的事情，您应该为每个 Radio 设置唯一值，并为每个 ROW

设置唯一 groupValue

这是一个工作示例。

class Affiche_grille extends StatefulWidget 
  @override
  _QuestionWidgetState createState() => _QuestionWidgetState();


class _QuestionWidgetState extends State<Affiche_grille> 
  List<RadioModel> sampleData = [];
  List<int> groupValue = [];
  List<List<int>> value = [];

  @override
  void initState() 
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 'April 18', 'text1'));
    sampleData.add(new RadioModel(false, 'B', 'April 17', 'text2'));
    sampleData.add(new RadioModel(false, 'C', 'April 16', 'text3'));
    sampleData.add(new RadioModel(false, 'D', 'April 15', 'text4'));

    groupValue.add(0);
    groupValue.add(2);
    groupValue.add(4);
    groupValue.add(6);

    value.add([0,1]);
    value.add([2,3]);
    value.add([4,5]);
    value.add([6,7]);
  

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: ListView.builder(
        itemCount: sampleData.length,
        itemBuilder: (context, index) => ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            Radio(
              groupValue: groupValue[index],
              value: value[index][0], 
              onChanged: (newValue) => setState(() => groupValue[index] = newValue),  
            ),
            Radio(
              groupValue: groupValue[index],
              value: value[index][1],
              onChanged: (newValue) => setState(() => groupValue[index] = newValue),  
            ),
          ],
        ),
      ),
    );
  

【讨论】：

我怎样才能得到所有选定的答案

所选答案是 groupValue 的当前值，因为您更改了 groupValue onchanged 回调

【参考方案2】：

根据documentation：

如果 groupValue 和 value 匹配，则将选择此单选。大多数小部件会通过调用 State.setState 来响应 onChanged 以更新单选按钮的 groupValue。

就您而言，每个问题代表一组收音机。您需要有一个变量来回答每个问题。你不能只用一个_groupValue 变量来掌握所有答案。

因此，每个问题需要有 2 个可能的值，并且它们必须被视为一个单独的组。

有很多方法可以做到这一点，但其中一种是：

List<int> groupValues; //Will hold the selected answer for each Question

void initState() 
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 'April 18', 'text1'));
    sampleData.add(new RadioModel(false, 'B', 'April 17', 'text2'));
    sampleData.add(new RadioModel(false, 'C', 'April 16', 'text3'));
    sampleData.add(new RadioModel(false, 'D', 'April 15', 'text4'));
    groupValues = List.filled(sampleData.length, -1); // Fills the initial value.
  

您可以根据其索引将 Group 值分配给 Radio：

Widget _myRadioButton(String title, int value, Function onChanged, int index) 
  return Radio(
    value: value,
    groupValue: groupValues[index],
    onChanged: onChanged,
  );

记住onChanged 回调也需要与更新的索引一起调用：

onChanged: (newValue) => setState(() => groupValues[index]= newValue),
index: index,

作为一个额外的提示，这会在您的小部件与您的屏幕上产生依赖关系。可以，因为它是一个示例，但小部件应该是独立的。所以组值应该是从小部件传递的东西，而不是文件中的全局变量。我这样做是为了使其更接近您给定的示例。