Flutter - 收音机动画未显示在showDialog上

Question

我试图在showDialog中创建Radio，但Radio上发生的动画未出现在showDialog中。

例如：当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, 
     child: new MyForm() 
    ) 

和，而不是改变HomePage的状态，而不是你改变MyForm状态。

例如：

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

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

typedef void MyFormCallback(String result); 

class MyForm extends StatefulWidget { 
    final MyFormCallback onSubmit; 

    MyForm({this.onSubmit}); 

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

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

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