[英]Dynamically create radio button Group in ListView.builder() flutter
我想创建这样的用户界面
最后,我得到了所有选中的单选按钮的详细信息。
这是我的完整代码
当我尝试这样做时,所有单选按钮都转向一侧。
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 由此代码制成。
在您的情况下,当其值 == groupValue时,Radio 已启用,所有 8 个 Radios 共享一个 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 和 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,
作为一个额外的提示,这会在您的屏幕上创建对您的小部件的依赖。 可以,因为它是一个示例,但小部件应该是独立的。 所以组值应该是从小部件传递的东西,而不是文件中的全局变量。 我这样做是为了让它更接近你给定的例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.