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

tb_custom_dialog_box 是一个用于 Flutter 的自定义对话框插件，允许开发者创建高度个性化的对话框。使用该插件，你可以轻松地自定义对话框的布局、样式、动画等。

以下是使用 tb_custom_dialog_box 插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入包

在你的 Dart 文件中导入 tb_custom_dialog_box 包：

import 'package:tb_custom_dialog_box/tb_custom_dialog_box.dart';

3. 使用自定义对话框

你可以使用 TbCustomDialogBox 类来创建和显示自定义对话框。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dialog Box Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _showCustomDialog(context);
          },
          child: Text('Show Dialog'),
        ),
      ),
    );
  }

  void _showCustomDialog(BuildContext context) {
    TbCustomDialogBox(
      context: context,
      title: "Custom Dialog",
      descriptions: "This is a custom dialog box example. You can customize it as per your needs.",
      text: "OK",
      onPressed: () {
        Navigator.of(context).pop();
      },
    ).show();
  }
}

4. 自定义对话框

TbCustomDialogBox 提供了多个参数来自定义对话框的外观和行为。以下是一些常用的参数：

• context: 必填参数，对话框的上下文。
• title: 对话框的标题。
• descriptions: 对话框的描述文本。
• text: 按钮的文本。
• onPressed: 按钮的点击事件。
• titleTextStyle: 标题文本的样式。
• descriptionTextStyle: 描述文本的样式。
• buttonTextStyle: 按钮文本的样式。
• dialogWidth: 对话框的宽度。
• dialogHeight: 对话框的高度。
• backgroundColor: 对话框的背景颜色。
• boxShadow: 对话框的阴影效果。
• borderRadius: 对话框的边框圆角。
• animationDuration: 对话框的动画持续时间。
• animationType: 对话框的动画类型。

5. 自定义布局

如果你需要更复杂的布局，可以使用 content 参数来完全自定义对话框的内容：

TbCustomDialogBox(
  context: context,
  content: Column(
    children: [
      Text('Custom Content', style: TextStyle(fontSize: 20)),
      SizedBox(height: 20),
      Image.asset('assets/custom_image.png'),
      SizedBox(height: 20),
      ElevatedButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: Text('Close'),
      ),
    ],
  ),
).show();

6. 处理对话框关闭

你可以通过 onPressed 回调来处理对话框的关闭事件，或者在 onDismissed 回调中处理对话框被用户手动关闭的情况。

TbCustomDialogBox(
  context: context,
  title: "Custom Dialog",
  descriptions: "This is a custom dialog box example.",
  text: "OK",
  onPressed: () {
    Navigator.of(context).pop();
    print('Dialog closed by button');
  },
  onDismissed: () {
    print('Dialog dismissed by user');
  },
).show();

7. 动画效果

TbCustomDialogBox 支持多种动画效果，你可以通过 animationType 参数来设置：

TbCustomDialogBox(
  context: context,
  title: "Custom Dialog",
  descriptions: "This is a custom dialog box example.",
  text: "OK",
  animationType: AnimationType.scale,  // 缩放动画
  onPressed: () {
    Navigator.of(context).pop();
  },
).show();