函数/OnTap 中的 AlertDialog 设置状态答案

【问题标题】：AlertDialog setstate in Function/OnTap函数/OnTap 中的 AlertDialog 设置状态
【发布时间】：2019-03-01 15:48:12
【问题描述】：

新来的颤振。我知道如何设置警报对话框的状态，但是需要点击才能像 ()=> _createPlayer 这样的功能，它不想重建警报对话框。我想知道当您需要点击它们时如何在警报对话框中设置状态。

 File _image;

    GestureDetector(
                onTap: () => _createPlayer(),

点击后会显示如下提示对话框：

_createPlayer() {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(32.0))),
            content: Container(
              height: 400,
              width: 300,
              child: Column(
                children: <Widget>[
                  Text('Create Player', style: Theme
                      .of(context)
                      .textTheme
                      .body1),
                  GestureDetector(
                    onTap: _getImageCamera,
                    child: CircleAvatar(
                      radius: 100,
                      backgroundColor: Colors.white,
                      backgroundImage: _image != null ? FileImage(_image) : AssetImage('assets/images/undercover.png'),
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }

_getImageCamera() async{
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }

我想在选择时在警报对话框中设置状态/更改图像。有什么想法吗？

【问题讨论】：

标签： dart flutter android-alertdialog

【解决方案1】：

您可以使用 StatefulBuilder 在对话框内进行更改

showDialog(
  context: context,
  builder: (context) {
    String contentText = "Content of Dialog";

    // add StatefulBuilder to return value

    return StatefulBuilder(
      builder: (context, setState) {
        return AlertDialog(
          title: Text("Title of Dialog"),
          content: Text(contentText),
          actions: <Widget>[
            FlatButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
            ),
            FlatButton(
              onPressed: () {
                setState(() {
                  contentText = "Changed Content of Dialog";
                });
              },
              child: Text("Change"),
            ),
          ],
        );
      },
    );
  },
);

【讨论】：

【解决方案2】：

为 AlertDialog 创建一个单独的 Stateful Widget CustomDialog 并像这样在其中移动 _getImageCamera 函数 _image 变量

_createPlayer() {
    return CustomDialog();
}
class CustomDialog extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CustomDialogState();
  }

}

class CustomDialogState extends State<CustomDialog> {
ImageProvider _image;
@override
  void initState() {
    super.initState();
}
@override
  Widget build(BuildContext context) {
    return AlertDialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(32.0))),
            content: Container(
              height: 400,
              width: 300,
              child: Column(
                children: <Widget>[
                  Text('Create Player', style: Theme
                      .of(context)
                      .textTheme
                      .body1),
                  GestureDetector(
                    onTap: _getImageCamera,
                    child: CircleAvatar(
                      radius: 100,
                      backgroundColor: Colors.white,
                      backgroundImage: _image != null ? FileImage(_image) : AssetImage('assets/images/undercover.png'),
                    ),
                  ),
                ],
              ),
            ),
          );
        });

}

_getImageCamera() async{
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }
}

【讨论】：

【解决方案3】：

为了查看showDialog 上的 UI 更改，您必须创建一个新的StatefulWidget，然后使用该类中的对话框。 Here is the example/sample code

【讨论】：

【解决方案4】：

最愚蠢和最快的解决方法是：

Navigator.of(context).pop();

然后再次拨打showDialog()。会有微小的延迟，但可以。

【讨论】：