Question

当我按Radio时，我想执行一些代码。 GestureDetector可以在任何地方工作，但不能在这里工作。如果运行下面的代码，则在点按“文本”时会得到响应（打印），而在点按“广播”时会得到响应（两者都包装在同一个GestureDetector中）。

您有什么建议，如何克服这个问题（或解释为什么会发生这种情况）？

class _MyHomePageState extends State<MyHomePage> {
  int radioGroupValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: GestureDetector(
              onTap: () => print("GestureDetector has been tapped."),
              child: new Row(children: [
                new Radio(
                  value: 0,
                  groupValue: radioGroupValue,
                  onChanged: _handleRadioValueWkotType,
                ),
                new Text("label 1"),
                new Radio(
                  value: 1,
                  groupValue: radioGroupValue,
                  onChanged: _handleRadioValueWkotType,
                ),
                new Text("label 2"),
              ])),
        ));
  }

  void _handleRadioValueWkotType(int value) {
    setState(() {
      radioGroupValue = value;
    });
  }
}

Answer 1

“单选”按钮已经是可单击的元素，因此您无需将其包装在GestureDetector中。将紧随其后的文本包装在GestureDetector中是有意义的，但不是按钮本身。实现所需目标的一种方法是通常在onTap上调用某些方法，而且还需要在值更改时调用此方法，该方法位于Radio上使用的onChanged方法本身之内，例如：

class _MyHomePageState extends State<HomePage> {
  int radioGroupValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: GestureDetector(
              onTap: () => eitherRadioTapped(),
              child: new Row(children: [
                new Radio(
                  value: 0,
                  groupValue: radioGroupValue,
                  onChanged: _handleRadioValueWkotType,
                ),
                new Text("label 1"),
                new Radio(
                  value: 1,
                  groupValue: radioGroupValue,
                  onChanged: _handleRadioValueWkotType,
                ),
                new Text("label 2"),
              ])),
        ));
  }

  void eitherRadioTapped(){
    print("Anything in the row has been tapped.");
  }

  bool _handleRadioValueWkotType(int value) {
    print("Radio has been tapped.");

    //Whatever happendeed, it was clicked, so call the extra method
    eitherRadioTapped(); 

    setState(() {
      radioGroupValue = value;
    });
    return false;
  }

您甚至可以在自己的代码上将Radio的onChanged方法设置为null，这会使GestureDetector接收到该事件，但这会使Radio变灰并且需要其他解决方法，为每个Radio元素设置单独的GestureDetector，这不是理想的，而是不太简单。

Answer 2

您可以使用RadioListTile小部件，其功能与radio小部件相同，但它具有额外的title参数，您可以在其中提供text，该参数将显示在radio小部件，并且单击标题文本的行为与单击单选窗口小部件本身的行为相同。

RadioListTile(
              title: Text('Standard'),
              value: 1,
              groupValue: _selectedType,
              onChanged: (int value) {
                Select(value);
}),

Check out official link and example

手势检测器和广播

2 个答案: