Flutter - 为什么 setstate 在弹出窗口中不起作用？

Question

我想通过用户交互更改弹出窗口上的文本，但它没有改变。我试过 navigator.pop(context) 并重新启动 show 方法。它可以正常工作，但它是正确的方法吗？我可以在没有 Navigator.pop 的情况下更改弹出窗口的值吗？为什么它不起作用？

这是我的代码。

import 'package:flutter/material.dart';
import 'package:rflutter_alert/rflutter_alert.dart';

void main() => runApp(RatelApp());

class RatelApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('RFlutter Alert by Ratel'),
        ),
        body: Home(),
      ),
    );
  }
}



class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String val = "Deneme";
  showAlertDialog(BuildContext context, Function onPressed) {
    // set up the button
    Widget okButton = FlatButton(
      child: Text(val),
      onPressed: onPressed,
    );

    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      title: Text("My title"),
      content: Text("This is my message."),
      actions: [
        okButton,
      ],
    );

    // show the dialog
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text("Show Popup"),
        onPressed: () {
          showAlertDialog(context, (){
            setState(() {
              val = "changed";

            });
          });
        },

      ),
    );
  }
}

Answer 1

对话框通常是无状态的，也不是调用Widget 状态的一部分，因此调用setState 方法对对话框没有任何作用。要制作一个可以更改内容的对话框，请使用StatefulBuilder。

docs 有一个示例说明如何在对话框中使用它，就像在您的应用程序中一样。

文档示例：

await showDialog<void>(
  context: context,
  builder: (BuildContext context) {
    int selectedRadio = 0;
    return AlertDialog(
      content: StatefulBuilder(
        builder: (BuildContext context, StateSetter setState) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: List<Widget>.generate(4, (int index) {
              return Radio<int>(
                value: index,
                groupValue: selectedRadio,
                onChanged: (int value) {
                  setState(() => selectedRadio = value);
                },
              );
            }),
          );
        },
      ),
    );
  },
);