flutter_custom_dialog 技术文档

flutter_custom_dialog 技术文档

1. 安装指南

1.1 添加依赖

在 pubspec.yaml 文件中添加 flutter_custom_dialog 依赖：

dependencies:
  flutter_custom_dialog: ^1.3.0

1.2 导入包

在需要使用 flutter_custom_dialog 的 Dart 文件中导入包：

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

2. 项目的使用说明

flutter_custom_dialog 是一个对全局弹窗功能进行封装的 Flutter 插件，支持语义化的方式填充弹窗内部内容。主要功能包括：

• 支持少数语义化组件的方法，填充弹窗内部的组件内容。
• 支持自定义语义化组件的方法，供开发者自由填充弹窗内部的组件内容。
• 支持设置弹窗背景色、前景色、位置、动画、点击外部消失等功能。
• 支持无Context调用弹窗。

2.1 基本使用

以下是一个简单的示例，展示如何使用 flutter_custom_dialog 创建一个弹窗：

YYDialog YYAlertDialogBody() {
  return YYDialog().build()
    ..width = 240
    ..text(
      text: "Hello YYDialog",
      color: Colors.grey[700],
    )
    ..show();
}

2.2 无Context调用

在某些场景下，可能无法获取到 BuildContext，此时可以通过预先初始化 Context 来实现无Context调用：

class AppHome extends StatelessWidget {
  Widget build(BuildContext context) {
    // 初始化context
    YYDialog.init(context);
    // 后续使用可以不需要context
    ......
  }
}

3. 项目API使用文档

3.1 弹窗属性设置

flutter_custom_dialog 提供了丰富的属性设置，可以通过成员变量的方法去调用。以下是一些常用的属性：

• width：弹窗宽度，默认为0。
• height：弹窗高度，默认为自适应组件高度。
• backgroundColor：弹窗背景色，默认为白色。
• borderRadius：弹窗圆角，默认为0.0。
• animatedFunc：弹窗出现的动画，默认为从中间出现。
• showCallBack：弹窗展示的回调。
• dismissCallBack：弹窗消失的回调。
• barrierDismissible：是否点击弹出外部消失，默认为true。

3.2 语义化组件

flutter_custom_dialog 提供了一些语义化组件，方便快速构建弹窗内容：

• text：文本控件。
• doubleButton：双按钮控件。
• listViewOfListTile：列表Tile组件。
• listViewOfRadioButton：列表按钮组件。
• divider：分割线组件。
• widget：自定义语义化组件。

3.3 自定义组件

如果内置的语义化组件不能满足需求，可以通过 widget() 方法插入自定义组件：

YYDialog YYDialogDemo(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..height = 500
    ..widget(
      Padding(
        padding: EdgeInsets.all(0.0),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text(
            "",
            style: TextStyle(
              color: Colors.black,
              fontSize: 14.0,
              fontWeight: FontWeight.w100,
            ),
          ),
        ),
      ),
    )
    ..show();
}

4. 项目安装方式

4.1 通过pub安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_custom_dialog: ^1.3.0

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

4.2 导入包

在需要使用 flutter_custom_dialog 的 Dart 文件中导入包：

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

通过以上步骤，您就可以在项目中使用 flutter_custom_dialog 插件了。