Flutter：如何从其他类调用包含AlertDialog的Stateful Class？附示例

嘿，作为编程新手，别慌！我给你整理了完整的示例代码，一步步教你实现带自定义内容的AlertDialog Stateful类，并且从另一个类里调用它～

1. 先写自定义的AlertDialog Stateful组件 #

咱们先创建一个CustomAlertDialog类，它是Stateful的，这样如果后续你需要给对话框加动态内容（比如输入框、状态变化），都能轻松处理。

import 'package:flutter/material.dart';

class CustomAlertDialog extends StatefulWidget {
  // 可以接收外部传进来的参数，比如标题、提示文本
  final String dialogTitle;
  final String dialogContent;

  const CustomAlertDialog({
    super.key,
    required this.dialogTitle,
    required this.dialogContent,
  });

  @override
  State<CustomAlertDialog> createState() => _CustomAlertDialogState();
}

class _CustomAlertDialogState extends State<CustomAlertDialog> {
  // 如果需要动态状态，比如输入框的内容，可以在这里定义
  final TextEditingController _inputController = TextEditingController();

  @override
  void dispose() {
    _inputController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(widget.dialogTitle),
      content: Column(
        mainAxisSize: MainAxisSize.min, // 让内容自适应高度
        children: [
          // 自定义内容：这里放你需要的组件，比如文本、输入框、图标
          Text(widget.dialogContent),
          const SizedBox(height: 16),
          TextField(
            controller: _inputController,
            decoration: const InputDecoration(
              hintText: "可以输入内容哦",
              border: OutlineInputBorder(),
            ),
          ),
        ],
      ),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.of(context).pop(); // 关闭对话框
          },
          child: const Text("取消"),
        ),
        TextButton(
          onPressed: () {
            // 点击确认后的逻辑，比如获取输入内容
            print("输入的内容：${_inputController.text}");
            Navigator.of(context).pop(_inputController.text); // 可以返回数据给调用方
          },
          child: const Text("确认"),
        ),
      ],
    );
  }
}

2. 在另一个类中调用这个对话框 #

比如我们创建一个主页面HomePage，里面放一个按钮，点击按钮就弹出上面的自定义对话框。

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("调用自定义对话框示例")),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 用showDialog触发对话框，并且可以接收返回值
            final result = await showDialog<String>(
              context: context,
              builder: (context) {
                // 返回咱们的自定义对话框，传入标题和内容参数
                return const CustomAlertDialog(
                  dialogTitle: "我的自定义对话框",
                  dialogContent: "这是对话框里的自定义内容，还加了输入框哦～",
                );
              },
            );

            // 如果有返回值，处理逻辑
            if (result != null) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text("你输入的是：$result")),
              );
            }
          },
          child: const Text("弹出自定义对话框"),
        ),
      ),
    );
  }
}

3. 完整的运行代码 #

把上面的代码整合到main.dart里就能直接运行啦：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

// 这里放上面的CustomAlertDialog类
// 这里放上面的HomePage类

几个关键点要注意哦： #

• 自定义对话框是Stateful的，所以能处理动态状态（比如输入框内容变化），如果只是静态内容，也可以改成Stateless，但Stateful扩展性更强
• 调用时必须传入BuildContext，所以要在有上下文的地方（比如Widget的build方法里）调用showDialog
• showDialog是异步方法，可以用await接收对话框返回的数据，方便后续处理

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