Flutter弹窗管理插件queen_alerts的使用

Flutter弹窗管理插件queen_alerts的使用

queen_alerts

弹窗管理与响应式提示框或对话框？

Demo

如何使用

通过 QueenAlert 类，您可以访问以下功能：

  • 提示对象，支持以下类型的提示：

    • danger（危险）
    • warning（警告）
    • info（信息）
    • custom（自定义内容的提示）
    • builder（构建自定义提示小部件）

  • 吐司对象，支持以下功能：

    • text() => 使用 Text 小部件显示吐司
    • withIcon() => 使用 Text 和 Icon 小部件显示吐司
    • builder() => 构建整个自定义吐司小部件

查看示例代码以获取更多信息

完整示例代码

import 'package:flutter/material.dart';
import 'package:queen_alerts/queen_alerts.dart';
import 'package:queen_alerts_example/example.dart';
import 'package:url_strategy/url_strategy.dart';

void main() {
  // 设置路径 URL 策略
  setPathUrlStrategy();

  runApp(MaterialApp(
    title: 'Flutter Demo',
    debugShowCheckedModeBanner: false,
    home: HomeScreen(),
    builder: (_, child) => QueenAlertsContiner( // 使用 QueenAlertsContiner 包裹应用
      alignment: Alignment.centerLeft, // 设置吐司的对齐方式
      child: child!,
    ),
  ));
}

// 示例页面
class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Queen Alerts 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 显示一个简单的警告提示
                QueenAlerts.toast.text("这是一个警告提示", type: AlertType.warning);
              },
              child: Text('显示警告吐司'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 显示一个带有图标的提示
                QueenAlerts.toast.withIcon(
                  "这是一个带有图标的提示",
                  icon: Icons.info,
                  type: AlertType.info,
                );
              },
              child: Text('显示带图标吐司'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 显示一个自定义的提示框
                QueenAlerts.alert.custom(
                  context,
                  title: "自定义提示",
                  content: Text("这是自定义提示内容"),
                );
              },
              child: Text('显示自定义提示框'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter弹窗管理插件queen_alerts的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter弹窗管理插件queen_alerts的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


queen_alerts 是一个用于管理 Flutter 应用中的弹窗（如 SnackBar、Dialog、BottomSheet 等）的插件。它提供了一种简洁的方式来处理弹窗的显示和隐藏，尤其是在需要全局管理弹窗的场景下非常有用。

安装

首先，你需要在 pubspec.yaml 文件中添加 queen_alerts 依赖：

dependencies:
  flutter:
    sdk: flutter
  queen_alerts: ^1.0.0 # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

1. 初始化 QueenAlerts

在你应用的 main.dart 文件中，初始化 QueenAlerts：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Queen Alerts Example',
      home: QueenAlerts(
        child: HomePage(),
      ),
    );
  }
}

2. 使用 QueenAlerts 显示弹窗

在需要显示弹窗的地方，你可以使用 QueenAlerts.showSnackBar、QueenAlerts.showDialog 等方法来显示不同类型的弹窗。

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Queen Alerts Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                QueenAlerts.showSnackBar(
                  context,
                  SnackBar(content: Text('This is a SnackBar!')),
                );
              },
              child: Text('Show SnackBar'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                QueenAlerts.showDialog(
                  context,
                  AlertDialog(
                    title: Text('Dialog Title'),
                    content: Text('This is a Dialog!'),
                    actions: [
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: Text('Close'),
                      ),
                    ],
                  ),
                );
              },
              child: Text('Show Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

高级用法

1. 自定义弹窗

你可以通过 QueenAlerts 显示自定义的弹窗，比如 BottomSheet：

QueenAlerts.showBottomSheet(
  context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('This is a BottomSheet!'),
      ),
    );
  },
);

2. 全局管理弹窗

QueenAlerts 允许你在应用的任何地方显示弹窗，而不需要直接依赖 BuildContext。你可以通过 QueenAlerts.of(context) 来获取 QueenAlerts 实例，然后调用相关方法。

QueenAlerts.of(context).showSnackBar(
  SnackBar(content: Text('This is a global SnackBar!')),
);
回到顶部