只允许在RadioListTile选项上进行单选操作,使用Flutter。

huangapple go评论63阅读模式
英文:

Allow only single selection on RadioListTile options flutter

问题

我的RadioListTile允许多选而不是单选。

class _OptionsCardState extends State<OptionsCard> {
  String? groupedValue = "";

  @override
  Widget build(BuildContext context) {
    return Card(
      color: AppColors.lightBlue,
      child: RadioListTile<String>(
        title: Text(widget.option),
        value: "${widget.option}",
        groupValue: groupedValue,
        onChanged: (value) => {
          setState(() {
            groupedValue = value;
          }),
          widget.onChangeSelectedInput!(value ?? "")
        }
      ),
    );
  }
}

我在另一个屏幕中这样调用:

for(var item in _questions[index].options!) OptionsCard(
     option: item, color: Colors.black,
     onChangeSelectedInput: (String value) {
     debugPrint("selected ${value}");   //<-- this is printing the selected 
     value as --> {selectedValue} with the right value I only need selectedValue without the brackets
     },
 )

总结如何:

  1. 使只能选择一个选项。
  2. 获取所选项作为字符串,而不是{字符串}。
英文:

My radioListTile is allowing multiple selections instead of single selection.

class _OptionsCardState extends State&lt;OptionsCard&gt; {
  String? groupedValue = &quot;&quot;;

  @override
  Widget build(BuildContext context) {
  return Card(
   color: AppColors.lightBlue,
   child: RadioListTile&lt;String&gt;(
    title: Text(widget.option),
    value: &quot;{${widget.option}}&quot;,
    groupValue: groupedValue,
    onChanged: (value) =&gt; {
      setState(() {
        groupedValue = value;
      }),
      widget.onChangeSelectedInput!(value??&quot;&quot;)
    }
   ),
  );
 }
}

I am calling like this in another screen

for(var item in _questions[index].options!) OptionsCard(
     option: item, color: Colors.black,
     onChangeSelectedInput: (String value) {
     debugPrint(&quot;selected ${value}&quot;);   &lt;-- this is printing the selected 
     value as --&gt; {selectedValue} with the right value I only need selectedValue without the brackets
     
     },
 )

Not sure what I am doing wrong..

In summary how to:

  1. Make only one option selectable
  2. Get the selected item as string instead of {string}

答案1

得分: 1

  1. 在共同的小部件(页面)中,你应该管理所选组值的状态。
  2. RadioListTile 上有多余和不需要的 {}。我进行了以下更改:

OptionsCard

class OptionsCard extends StatelessWidget {
  const OptionsCard({Key? key, required this.option, this.groupValue, required this.onChangeSelectedInput, this.color})
      : super(key: key);
  final String option;
  final String? groupValue;
  final Color? color;
  final Function(String) onChangeSelectedInput;

  @override
  Widget build(BuildContext context) {
    return Card(
      color: AppColors.lightBlue,
      child: RadioListTile<String>(
          title: Text(option),
          value: option,//这里你有不需要的 {},应为 '{${widget.option}}'
          groupValue: groupValue,
          onChanged: (value) => onChangeSelectedInput(value ?? ""),
    );
  }
}

PageState(使用 OptionsCard

for (var item in _questions[index].options!)
    OptionsCard(
      option: item,
      color: Colors.black,
      groupValue: groupValues[index],
      onChangeSelectedInput: (String value) {
        debugPrint("selected ${value}");
        setState(() {
          groupValues[index] = value;
        });
      },
    )

在主页面状态中,你应该有一个字段变量 groupValues

Map<int, String> groupValues = {};//所有单选按钮应该有共同的组值

如果你确实希望所有问题都只能选择一个选项,那么你应该使用 String? groupValue; 而不是 groupValues

英文:
  1. You should manage the state of selected group value in common widget(page)
  2. You are having extra and unwanted {} on RadioListTile
    I made following changes to achieve this

OptionsCard

class OptionsCard extends StatelessWidget {
  const OptionsCard({Key? key, required this.option, this.groupValue, required this.onChangeSelectedInput, this.color})
      : super(key: key);
  final String option;
  final String? groupValue;
  final Color? color;
  final Function(String) onChangeSelectedInput;

  @override
  Widget build(BuildContext context) {
    return Card(
      color: AppColors.lightBlue,
      child: RadioListTile&lt;String&gt;(
          title: Text(option),
          value: option,//Here you have unwanted {} as &#39;{${widget.option}}&#39;
          groupValue: groupValue,
          onChanged: (value) =&gt; onChangeSelectedInput(value ?? &quot;&quot;)),
    );
  }
}

PageState(Usage of OptionCard)

for (var item in _questions[index].options!)
    OptionsCard(
      option: item,
      color: Colors.black,
      groupValue: groupValues[index],
      onChangeSelectedInput: (String value) {
        debugPrint(&quot;selected ${value}&quot;);
        setState(() {
          groupValues[index] = value;
        });
      },
    )

And in the main page state, you should have a field variable groupValues

Map&lt;int, String&gt; groupValues = {};//Group value should be in common for all RadioButtons

If you really like to have single selection for all questions, then you should have String? groupValue; instead of groupValues

huangapple
  • 本文由 发表于 2023年2月26日 20:40:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75572030.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定