dart - Flutter - 广播动画未显示在 showDialog 上

Question

我正在尝试在 showDialog 中创建 Radio，但是 Radio 上发生的动画并未出现在 中显示对话框.

例如:在 foo2 中点击时没有任何反应，当您在 showDialog 中退出并返回时，foo2 被选中。

下面是代码和显示正在发生的事情的 gif:

import "package:flutter/material.dart";

void main() {
  runApp(new ControlleApp());
}

class ControlleApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "My App",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

enum _RadioGroup {
  foo1,
  foo2
}

class HomePageState extends State<HomePage> {
  _RadioGroup _itemType = _RadioGroup.foo1;

  void changeItemType(_RadioGroup type) {
    setState(() {
      _itemType = type;
    });
  }

  void showDemoDialog<T>({ BuildContext context, Widget child }) {
    showDialog<T>(
      context: context,
      child: child,
    );
  }

  @override
  Widget build(BuildContext context){
    return new Scaffold( 
      appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
      body: new Container(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new InkWell(
              onTap: (){
                showDemoDialog<String>(
                  context: context,
                  child: new SimpleDialog(
                    title: const Text("show"),
                    children: <Widget>[
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Radio<_RadioGroup>(
                            groupValue: _itemType,
                            value: _RadioGroup.foo1,
                            onChanged: changeItemType
                          ),
                          const Text("foo1"),

                          new Radio<_RadioGroup>(
                            groupValue: _itemType,
                            value: _RadioGroup.foo2,
                            onChanged: changeItemType
                          ),
                          const Text("foo2"),
                        ],
                      )
                    ],
                  )
                );
              },
              child: new Container(
                margin: new EdgeInsets.only(top: 16.0, bottom: 8.0),
                child: new Text("Show"),
              ),
            )
          ],
        ),
      )
    );
  }
}

Answer 1

请记住，组件是不可变的。 当您调用 showDialog 时，即使 HomePage 改变，该对话框的内容也不会改变。

解决方法很简单。您需要将代码重构为以下内容:

    showDialog(
        context: context,
        builder: (context) => MyForm()
    )

而不是更改 HomePage 的状态，而是更改 MyForm 的状态。

示例:

class Test extends StatelessWidget {
  void onSubmit(String result) {
    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () => showDialog(context: context, builder: (context) => MyForm(onSubmit: onSubmit)),
          child: Text("dialog"),
        ),
      ),
    );
  }
}

typedef void MyFormCallback(String result);

class MyForm extends StatefulWidget {
  final MyFormCallback onSubmit;

  MyForm({this.onSubmit});

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

class _MyFormState extends State<MyForm> {
  String value = "foo";

  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
      title: Text("My form"),
      children: <Widget>[
        Radio(
          groupValue: value,
          onChanged: (value) => setState(() => this.value = value),
          value: "foo",
        ),
        Radio(
          groupValue: value,
          onChanged: (value) => setState(() => this.value = value),
          value: "bar",
        ),
        FlatButton(
          onPressed: () {
            Navigator.pop(context);
            widget.onSubmit(value);
          },
          child: new Text("submit"),
        )
      ],
    );
  }
}