Flutter中showDialog输入内容无法在Text组件显示问题求助

我创建了showMyDialog.dart文件，实现了嵌套AlertDialog的showDialog组件，通过内部的TextField获取用户输入。期望点击弹窗按钮后，在当前页面的Container中显示输入内容，但输入完成后内容并未显示——不过状态变更时打印的输入值能在调试控制台正常查看。

相关代码 #

showMyDialog.dart #

import 'package:flutter/material.dart';

Future<String?> showMyDialog(
  BuildContext context,
  String title,
) async {
  TextEditingController _textController = TextEditingController();
  return showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(title),
          content: TextField(
            controller: _textController,
            textInputAction: TextInputAction.done,
          ),
          actions: <Widget>[
            TextButton(
                onPressed: () {
                  Navigator.of(context).pop(_textController.text);
                },
                child: const Text("Ok")),
            TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text("Cancel"))
          ],
        );
      });
}

调用代码 #

String _tempval = "";
GestureDetector(
    onTap: () async {
      final enteredtext = await showMyDialog(
        context,
        "Add Temperature",
      );
      setState(() {
        _tempval = enteredtext ?? "";
        print(_tempval);
      });
    },
    child: Container(
      width: 120,
      height: 40,
      alignment: Alignment.center,
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(_tempval),
          const SizedBox(width: 6),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(width: 0.4),
          borderRadius: const BorderRadius.all(Radius.circular(8))),
    ),
),

解决方法 #

1. 必须使用StatefulWidget：setState方法只能在StatefulWidget的State子类中生效，用来触发UI重建。如果当前页面是StatelessWidget，直接改成StatefulWidget即可。

2. 确认变量作用域：_tempval必须是State类的成员变量，不能是build方法或其他局部方法内的变量。示例结构如下：

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  // 将_tempval声明为State类的成员变量
  String _tempval = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 你的GestureDetector代码放在这里
        child: GestureDetector(
          onTap: () async {
            final enteredtext = await showMyDialog(context, "Add Temperature");
            setState(() {
              _tempval = enteredtext ?? "";
              print(_tempval);
            });
          },
          child: Container(
            // ... 容器的其他属性
            child: Text(_tempval),
          ),
        ),
      ),
    );
  }
}

3. 排查其他细节：如果已经满足以上两点，检查Container的Text是否被其他组件遮挡，或者_tempval是否真的被正确赋值（你的打印能输出值，说明赋值没问题，核心还是UI没触发重建）。

内容的提问来源于stack exchange，提问作者KiraKami