Flutter弹窗队列执行，给用户体验加把锁

Android

2023-12-29 11:47:35

队列执行弹窗：告别弹窗乱象，提升用户体验

问题所在：弹窗泛滥之苦

在Flutter应用开发中，开发者们常面临弹窗乱飞的困扰，犹如噼里啪啦的鞭炮声般让人应接不暇。这种杂乱无章的弹窗体验严重损害了用户体验，亟待解决。

解决之道：队列执行弹窗

队列执行弹窗是一种机制，可将弹窗按照特定顺序逐一弹出，有效避免了弹窗杂乱的现象。这种方式犹如井然有序的排队，让弹窗井然有序地呈现，避免给用户带来混乱感，从而提升用户体验。

实现方法：Flutter Navigator

实现队列执行弹窗需要借助Flutter的Navigator类。Navigator类提供了push()方法，可将新页面压入导航栈，当新页面被压入后即会被显示。

要实现队列执行弹窗，只需将弹窗页面压入导航栈即可。当弹窗页面被压入导航栈后，它就会被显示出来。当用户关闭弹窗页面后，它就会从导航栈中弹出，下一个弹窗页面就会被显示出来。

示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('队列执行弹窗')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) => Dialog1()));
                },
                child: Text('打开弹窗 1'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) => Dialog2()));
                },
                child: Text('打开弹窗 2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Dialog1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('弹窗 1'),
      content: Text('这是弹窗 1。'),
      actions: <Widget>[
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('确定'),
        ),
      ],
    );
  }
}

class Dialog2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('弹窗 2'),
      content: Text('这是弹窗 2。'),
      actions: <Widget>[
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('确定'),
        ),
      ],
    );
  }
}