如何在颤动中使用listview builder制作动态单选按钮？

Posted 2023-02-23

【中文标题】如何在颤动中使用listview builder制作动态单选按钮？

【英文标题】：how to make dynamic radio button with listview builder in flutter?

【发布时间】：2021-12-29 02:16:42

【问题描述】：

我想通过为学生提供出勤状态来使其像出勤一样。我创建的概念是一个带有名称数据的列表视图构建器，然后通过循环单选按钮的数量来进行行。但是，我对这个问题感到很困惑

部分电台

Row(
  children: [
    for(var i = 0; i < 2; i++)
    Radio<int>(
        value: i,
        groupValue: radioValue,
        activeColor: Colors.blueAccent,
        onChanged: handleRadioValueChanged
    ),
  ],
),

当我选择列表的一部分而不是其他部分时，我正在为上面的代码使用 listview builder

【问题讨论】：

你能添加一些你想要实现的东西

i.stack.imgur.com/2pgm0.png 这样

您目前面临的问题是什么？

when selecting a radio with a certain selection the other parts follow

【参考方案1】：

在下面的代码中，我动态展示了如何创建单选按钮列表。

使用以下代码，您可以为单选按钮创建独特的样式。

class RootPage extends StatefulWidget 
  const RootPage(Key key) : super(key: key);

  @override
  State<RootPage> createState() => _RootPageState();


class _RootPageState extends State<RootPage> 
  List<RadioItem> items = <RadioItem>[];
  int groupValue = 0; 

  @override
  void initState() 
     for (int i = 0; i < 10; i++) 
       items.add(RadioItem(index: i, name: 'radio ' + i.toString()));
     
     super.initState();
  
  
  @override Widget build(BuildContext context) 
    return Scaffold(
      body: Column(
      children: items
          .map(
            (data) => Card(
              elevation: 3,
              shadowColor: const Color(0xFFAAAAAA),
              margin: const EdgeInsets.only(left: 30, right: 30, top: 15),
              color: Colors.white,
              shape: RoundedRectangleBorder(
                side: const BorderSide(color: Colors.transparent, width: 0),
                borderRadius: BorderRadius.circular(20),
              ),
              child: InkWell(
                borderRadius: BorderRadius.circular(20),
                onTap: () 
                  setState(() 
                    groupValue = data.index;
                  );
                ,
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10.0),
                  child: Directionality(
                    textDirection: TextDirection.rtl,
                    child: Row(
                      children: <Widget>[
                        Radio(
                          groupValue: groupValue,
                          value: data.index,
                          onChanged: (index) 
                            setState(() 
                              groupValue = index;
                            );
                          ,
                        ),
                        Expanded(child: Text(data.name)),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )
          .toList(),
       ),
    );
  

然后添加以下类

class RadioItem 
  String name;
  int index;
  RadioItem(this.name, this.index);