颤振取消选择RadioListTile按钮

时间:2020-02-25 22:15:55

标签: flutter dart mobile

我一直试图弄清楚我的错误在哪里,但仍然无法解决。 Flutter的绝对新手,我构建了多项选择测验应用程序。我有一个多项选择问题屏幕,该屏幕从下面显示的radio_button.dart文件中导入了放射性清单选项。

除了我无法取消选择按钮后,其他所有操作均有效。换句话说,如果我单击每个按钮,则会全部选中。

 import "package:flutter/material.dart";

 class RB extends StatefulWidget {
 RB({this.choice, this.value});

 final String choice;
 final String value;

@override
_RBState createState() => _RBState();

}
class _RBState extends State<RB> {
bool dense=false;
 String _selection = '';
@override
Widget build(BuildContext context) {
return   Padding(
  padding: const EdgeInsets.all(8.0),
  child: Material(
    elevation: 5.0,
    child: RadioListTile(
      title: Text(widget.choice,  style: TextStyle(color: Colors.blue,),),
      value: widget.choice,
      groupValue: _selection,
      dense: dense,
      activeColor: Colors.green,
      onChanged:( val) { setState(() { _selection = val; print(val);}); },

    ),
  ),
 );
 }
}

Here the question_screen snippet
 Column(
 children: <Widget>[
 Container(child: RB(choice:'A',value:'All of above',)),
 Container(child: RB(choice:'B',value:'None of the above'))

4 个答案:

答案 0 :(得分:1)

RadioListTileGestureDetector包裹

          GestureDetector(
            onTap: () {
              setState(() {
                _selection = '';
              });
            },
            child: RadioListTile(
            //...

答案 1 :(得分:1)

因为已经为每个小部件创建了组值,所以必须与每个单选列表图块共享组值,而不是为每个单选按钮创建一个。 1-将 _selection 变量在小部件树中上移,以与您拥有的每个 RB 共享,并将其传递给每个 RB 。 2-使用字符串参数将另一个参数添加到Function类型的 RB 类中,并将其传递给每个 RB

的onchanged参数

您的 RB 类如下所示:

 class RB extends StatefulWidget {
 RB({this.choice, this.value,this.onchanged});
 final Function (String value) onChanged;
  final String groupValue;
 final String choice;
 final String value;

@override
_RBState createState() => _RBState();

}
class _RBState extends State<RB> {
bool dense=false;
 String _selection = '';
@override
Widget build(BuildContext context) {
return   Padding(
  padding: const EdgeInsets.all(8.0),
  child: Material(
    elevation: 5.0,
    child: RadioListTile(
      title: Text(widget.choice,  style: TextStyle(color: Colors.blue,),),
      value: widget.choice,
      groupValue: widget.groupValue,
      dense: dense,
      activeColor: Colors.green,
      onChanged:widget.onChanged,

    ),
  ),
 );
 }
}

现在在父窗口小部件中:

    Column(
     children: <Widget>[
     Container(child: RB(choice:'A',value:'All of 
       above',groupValue:"youValue",onChanged(value){
_selection = value;
setState((){});
})),

当然,您应该将onchanged函数与helper函数分开,以寻求可读性和灵活性。

答案 2 :(得分:1)

现在,在2020年9月,正确的答案应该是使用toggleable属性。

RadioListTile(
            title: Text("xxx"),
            value: index,
            groupValue: _seletedIndex,
            toggleable: true,
            onChanged: (value) {
              onAlertChange(value, alert);
            },
          )

答案 3 :(得分:0)

RadioListTile(toggaleable: true)要取消选择选定的单选项,请在 RadioListTile() 中使用 toggleable: true,