如何在Flutter中取消选择单选按钮？

Question

我使用一个用于广播的地图，一个文本框，显示结果的文本和一个清除所有内容的按钮。

文本框可以被擦除：

RaisedButton(onPressed: () { _controllerTextField.clear();},
                  child: Text('Clear',style:Theme.of(context).textTheme.body2.merge(TextStyle(color: Colors.white)),),)

但我不知道如何清除我的文本并将我的单选框设置为默认未选状态。

此外，当单选框被选中时，我会给它一个自定义颜色，但我无法给单选框图标相同的颜色。

您有什么方法可以使用吗？

谢谢

- mbrd

---

请问您能否添加所有您想要做的代码？我在您的问题中找不到您提到的单选按钮或地图。 - Salma

Answer 1

使用单选按钮的可切换属性。

文档：如果允许通过再次选择来将此单选按钮返回到未确定状态，则设置为true。

- neretzes

Answer 2

感谢Karim的建议。

抱歉，我一直忙于其他事情。 最后，我做到了：

onPressed: () {
    _controller.clear();
    setState(() {
    radioSelectionne = 3;
     nombreTextField = null;
     Resultat = null;});
     },

关于单选框的颜色：在我的主文件中 -> ThemeData -> unselectedWidgetColor

一切都如我所愿。

感谢您的帮助。

- mbrd

Answer 3

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  Test({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

  final TextEditingController _controllerTextField =  TextEditingController();


  double nombreTextField;
  int radioSelectionne;
  int resultat;

  Map coefMultipicateur = {
    0: 'x 2',
    1: 'x 5',
    2: 'x 10',
  };


  @override
  Widget build(BuildContext context) {
    return  GestureDetector(
      onTap: (() => FocusScope.of(context).requestFocus(FocusNode())),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Test'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.only(left:10.0, right: 10.0),
            child: Column(
              children: <Widget>[
                Container(
                    margin: EdgeInsets.only(top: 10.0, bottom: 50.0),
                    child:
                    Row(
                      children: <Widget>[
                        Expanded(
                            flex:6,
                            child: Text('entrer nombre :',
                              style:Theme.of(context).textTheme.body2.merge(
                                  TextStyle(
                                      fontSize: 16)),
                            )
                        ),
                        Expanded(
                          flex: 4,
                          child: TextField(
                            controller: _controllerTextField,
                            keyboardType: TextInputType.number,
                            onChanged: (String string) {
                              setState(() {
                                nombreTextField = double.tryParse(string);
                              });
                            },
                            decoration: InputDecoration(
                              labelText: 'entrer nombre',
                            ),
                          ),
                        )
                      ],
                    )
                ),
                Container(
                  margin: EdgeInsets.only(top: 10.0, bottom: 20.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        flex: 3,
                        child: Container(
                          color: Colors.blue,

                          child:columnRadio(),
                        ),
                      ),
                      Expanded(
                          flex: 7,
                          child: Center(
                              child: Column(
                                children: <Widget>[
                                  Text('resultat\n= ',
                                    textAlign: TextAlign.center,
                                    style:Theme.of(context).textTheme.title.merge(TextStyle(color: Colors.blueGrey)),),
                                  Container(
                                    margin: EdgeInsets.only(bottom: 10.0),
                                    child: Text(nombreTextField == null || radioSelectionne == null ? '' : '$resultat',
                                      style:Theme.of(context).textTheme.title.merge(TextStyle(color: Colors.green)),),
                                  ),
                                ],
                              )
                          )
                      )
                    ],
                  ),
                ),
                Container(
                    margin: EdgeInsets.only(top: 50.0),
                    child: RaisedButton(
                      onPressed: () {
                        _controllerTextField.clear();
                      },
                      color: Colors.blue,
                      child: Text('Clear',
                        style:Theme.of(context).textTheme.body2.merge(TextStyle(color: Colors.white)),
                      ),
                    )
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  Column columnRadio() {
    List<Widget> pourcentages = [];
    coefMultipicateur.forEach((key, value) {
      Row listePourcentages = Row(
        children: <Widget>[
          Radio(
              activeColor: Colors.white,
              value: key,
              groupValue: radioSelectionne,
              onChanged: (Object i) {
                setState(() {
                  radioSelectionne = i;
                  if (nombreTextField != null) {
                    switch (radioSelectionne) {
                      case 0:
                        resultat = (nombreTextField * 2).toInt();
                        break;
                      case 1:
                        resultat = (nombreTextField * 5).toInt();
                        break;
                      case 2:
                        resultat = (nombreTextField *  10).toInt();
                        break;
                    }
                  }
                });
              }),
          Text(value,
              style: TextStyle(
                  color: (radioSelectionne == key) ? Colors.white : Colors.blue[200],
                  fontWeight: FontWeight.bold)),
        ],
      );
      pourcentages.add(listePourcentages);
    });
    return Column(
      children: pourcentages,
    );
  }
}

- mbrd

Answer 4

如果您只能选择一个选项，请将groupValue指定为单选按钮。

示例：

const TYPE_DOG = 1
const TYPE_CAT = 2

                      Radio(
                        value: TYPE_DOG,
                        groupValue: type,
                        onChanged: (value) => setState(() => type = value),
                      ),
                      Radio(
                        value: TYPE_CAT,
                        groupValue: type,
                        onChanged: (value) => setState(() => type = value),
                      ),

然后在onPressed中将此值设置为0;

- Karim

---

谢谢Karim的建议。抱歉，我忙于其他事情。 最终，我做到了：onPressed: () { _controller.clear(); setState(() { radioSelectionne = 3; nombreTextField = null; Resultat = null;}); }, - mbrd