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"), 
     ) 
     ], 
    ); 
    } 
}