Flutter自定义对话框插件h_alert_dialog的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter自定义对话框插件h_alert_dialog的使用

h_alert_dialog 是一个用于在 Flutter 应用程序中显示简单且美观对话框的新包。

使用方法

要使用此包，请在 pubspec.yaml 文件中添加 h_alert_dialog 作为依赖项，并导入以下代码：

import 'package:h_alert_dialog/h_alert_dialog.dart';

屏幕截图

示例

代码

HAlertDialog.showCustomAlertBox(
  context: context,
  timerInSeconds: 2,
  backgroundColor: Colors.green,
  title: 'Success',
  description: 'The process done successfully',
  icon: Icons.done,
  iconSize: 32,
  iconColor: Colors.green,
  titleFontFamily: 'Raleway',
  titleFontSize: 22,
  titleFontColor: Colors.black54,
  descriptionFontFamily: 'Raleway',
  descriptionFontColor: Colors.black45,
  descriptionFontSize: 18,
);

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter 示例屏幕',
      home: ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatelessWidget {
  const ExampleScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 成功消息按钮
            MaterialButton(
              onPressed: () {
                HAlertDialog.showCustomAlertBox(
                  context: context,
                  backgroundColor: Colors.green,
                  title: '成功',
                  description: '该过程已成功完成',
                  icon: Icons.done,
                  iconSize: 32,
                  iconColor: Colors.green,
                  titleFontFamily: 'Raleway',
                  titleFontSize: 22,
                  titleFontColor: Colors.black54,
                  descriptionFontFamily: 'Raleway',
                  descriptionFontColor: Colors.black45,
                  descriptionFontSize: 18,
                  timerInSeconds: 2,
                );
              },
              child: const Text('显示成功消息'),
            ),
            // 错误消息按钮
            MaterialButton(
              onPressed: () {
                HAlertDialog.showCustomAlertBox(
                  context: context,
                  backgroundColor: Colors.red,
                  title: '错误',
                  description: '该过程发生错误',
                  icon: Icons.error_outline,
                  iconSize: 32,
                  iconColor: Colors.red,
                  titleFontFamily: 'Raleway',
                  titleFontSize: 22,
                  titleFontColor: Colors.black54,
                  descriptionFontFamily: 'Raleway',
                  descriptionFontColor: Colors.black45,
                  descriptionFontSize: 18,
                  timerInSeconds: 2,
                );
              },
              child: const Text('显示错误消息'),
            ),
            // 信息消息按钮
            MaterialButton(
              onPressed: () {
                HAlertDialog.showCustomAlertBox(
                  context: context,
                  backgroundColor: Colors.blue,
                  title: '信息',
                  description: '这是信息消息',
                  icon: Icons.info_outline,
                  iconSize: 32,
                  iconColor: Colors.blue,
                  titleFontFamily: 'Raleway',
                  titleFontSize: 22,
                  titleFontColor: Colors.black54,
                  descriptionFontFamily: 'Raleway',
                  descriptionFontColor: Colors.black45,
                  descriptionFontSize: 18,
                  timerInSeconds: 2,
                );
              },
              child: const Text('显示信息消息'),
            ),
            // 警告消息按钮
            MaterialButton(
              onPressed: () {
                HAlertDialog.showCustomAlertBox(
                  context: context,
                  backgroundColor: Colors.yellow,
                  title: '警告',
                  description: '这是警告消息',
                  icon: Icons.warning_amber_rounded,
                  iconSize: 32,
                  iconColor: Colors.yellow,
                  titleFontFamily: 'Raleway',
                  titleFontSize: 22,
                  titleFontColor: Colors.black54,
                  descriptionFontFamily: 'Raleway',
                  descriptionFontColor: Colors.black45,
                  descriptionFontSize: 18,
                  timerInSeconds: 2,
                );
              },
              child: const Text('显示警告消息'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义对话框插件h_alert_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义对话框插件h_alert_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成并使用自定义对话框插件 h_alert_dialog 的代码示例。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 h_alert_dialog 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  h_alert_dialog: ^最新版本号  # 请确保使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:h_alert_dialog/h_alert_dialog.dart';

3. 使用自定义对话框

以下是一个使用 h_alert_dialog 插件来显示自定义对话框的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('h_alert_dialog 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              _showCustomDialog(context);
            },
            child: Text('显示对话框'),
          ),
        ),
      ),
    );
  }

  void _showCustomDialog(BuildContext context) {
    // 配置对话框样式和内容
    HAlertDialogConfig config = HAlertDialogConfig()
      ..setTitle("自定义对话框标题")
      ..setMessage("这是一个自定义对话框的内容")
      ..setPositiveButton(
        text: "确定",
        onPressed: () {
          // 点击确定按钮后的处理
          print("点击确定按钮");
        },
      )
      ..setNegativeButton(
        text: "取消",
        onPressed: () {..
setBackground          Color//( 点击Colors取消.按钮后的处理
          print("white点击取消按钮");
        },
      )
      ..setWidth(280)  // 设置对话框宽度
      ..setRadius(10)  // 设置对话框圆角)半径
        // 设置对话框背景颜色
      ..setTitleColor(Colors.black)  // 设置标题颜色
      ..setMessageColor(Colors.grey[600])  // 设置消息颜色
      ..setButtonColor(Colors.blue)  // 设置按钮颜色
      ..setButtonTextColor(Colors.white);  // 设置按钮文字颜色

    // 显示对话框
    HAlertDialog.showDialog(context, config);
  }
}

代码解释

  1. 依赖导入：在 pubspec.yaml 中添加 h_alert_dialog 依赖并运行 flutter pub get。
  2. 导入插件：在 Dart 文件中使用 import 'package:h_alert_dialog/h_alert_dialog.dart'; 导入插件。
  3. UI 构建：
    • 创建一个按钮，点击按钮时调用 _showCustomDialog 方法。
    • 在 _showCustomDialog 方法中，配置对话框的样式和内容（如标题、消息、按钮等）。
    • 使用 HAlertDialog.showDialog(context, config); 显示对话框。

这样，你就可以在 Flutter 应用中使用 h_alert_dialog 插件来显示自定义对话框了。根据需求，你可以进一步自定义对话框的样式和行为。

回到顶部