flutter 中的Dialog弹窗使用

在Flutter中，可以在页面初始化完成后立即弹出一个 Dialog 对话框。

以下是一种实现方式：

1. 首先，在页面中定义一个 GlobalKey 对象, 用于访问 ScaffoldState 对象。

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

2. 然后，在页面 build 方法中，使用 Scaffold widget 作为页面的根部件，使用上面定义的 GlobalKey 对象将 Scaffold widget 分配给 _scaffoldKey。

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey,
    // 页面其他部分的Widget
  );
}

  

3. 接下来，我们可以在 Widget 里使用 WidgetsBinding 来获取页面布局渲染完毕的回调，以弹出 Dialog 对话框。

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) => _showDialog());
}

void _showDialog() {
  showDialog(
      context: context,
      builder: (_) => AlertDialog(
        title: Text("Dialog Title"),
        content: Text("Dialog description."),
        actions: <Widget>[
          FlatButton(
            child: Text("Ok"),
            onPressed: () {
              Navigator.of(context).pop();
            },
          )
        ],
      ));
}

上述代码中，我们在页面初始化完毕后立即调用 _showDialog() 方法，并在该方法中调用 showDialog() 方法来弹出一个 AlertDialog 对话框。

注意：我们在 _showDialog() 方法中只有在调用 setState() 后才能使用 context。因此，我们可以把 _showDialog() 方法放在 initState() 方法中，等待 StatefulWidget 渲染完毕后再调用。

希望这个例子可以帮助你在Flutter中实现页面初始化完成后立即弹出一个 Dialog 对话框。

 

demo全部代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //去掉右上角debug
      title: "Recovery",
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
// 使用dialog 来自己真正的定义一个对话框
  Widget myDialog() {
    return Dialog(
      // insetPadding: EdgeInsets.all(10), //距离
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20))), //形状
      backgroundColor: Colors.white,
      clipBehavior: Clip.antiAlias, //强制裁剪
      elevation: 10,
      child: SizedBox(
        //需要在内部限制下高度和宽度才能更好的显示
        height: 315,
        width: 315,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              width: 135,
              height: 135,
              margin: EdgeInsets.only(top: 19),
              child: Image.asset('../lib/assets/images/home/dia.png'),
            ),
            Container(
              child: Text(
                'Congratulations!',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 23,
                    color: Color(0xff5572FA)),
              ),
            ),
            const Text(
              'Get a free reply to a photo',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 14,
                color: Color(0xff333333),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 30, bottom: 30),
                  width: 150,
                  height: 44,
                  child: ElevatedButton(
                      style: ButtonStyle(
                          textStyle: MaterialStateProperty.all(
                            TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 16),
                          ),
                          backgroundColor:
                              MaterialStateProperty.all(Color(0xff5572FA))),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: const Text('Close')),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => showDialog(
        context: context,
        builder: (context) {
          return myDialog();
        }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                var resutl = await showDialog(
                    context: context,
                    builder: (context) {
                      return myDialog();
                    });
              },
              child: Text('Dialog 自定义1122'),
            )
          ],
        ),
      ),
    );
  }
}