Flutter-广播动画未显示在showDialog上 [英] Flutter - Radio Animation is not showing up on showDialog

问题描述

我正在尝试在 showDialog 中创建 Radio ，但是在<$ c上发生的动画$ c> Radio 不会出现在 showDialog 中。

I'm trying to create a Radio in a showDialog, however the animation that occurs on Radio does not appear in showDialog.

例如：点击时在 foo2 中什么也没有发生，当您在 showDialog 中退出并返回到它时， foo2 被选中。

For example: when tapped in foo2 nothing happens, and when you exit in showDialog and go back to it, foo2 is selected.

下面是代码和显示所发生情况的gif：

Below is the code and a gif showing what is happening:

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

推荐答案

记住组件是不可变的。
调用 showDialog 时，即使 Home 不会更改。 c $ c>确实。

Remember that components are immutable. When you call showDialog, the content of that dialog won't change even if HomePage does.

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

The solution is easy. You need to refactor a bit your code to something like :

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

，而不是更改主页的状态，而是改为更改 MyForm 的状态。

and instead of changing the state of HomePage, you instead change the state of 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"),
        )
      ],
    );
  }
}

这篇关于Flutter-广播动画未显示在showDialog上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！