flutter - 在ListView.builder() flutter中动态创建单选按钮Group

Question

我想创建这样一个用户界面

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

这是我的完整代码

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

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 是根据此代码制作的。

Answer 1

当 radio 值 == groupValue 时启用 在您的情况下，所有 8 个 radio 都共享一个 groupValue，并且对于所有行，第一个的值为 0，第二个的值为 1。

然后，当您单击左侧Radio时，全局值设置为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),  
            ),
          ],
        ),
      ),
    );
  }
}