简介

• 弹窗分为从底部向上的Sheet和提示类型的Alert两种。
• 一般有确认和取消两个按钮。点击按钮之后的操作，可以用回调函数，也可以封装成async/await的形式。
• 如果不使用GetX，可以考虑使用Completer<T?> completer = Completer();的形式将回调转换成Future；如果使用GetX，那么可以直接使用Get.back(result: T?);的形式回传数据。

1. 文件结构

把工程中的弹窗集中到一个地方，当做一种通用组件

文件位置

2. 公共按钮

把几个通用的按钮用枚举的形式实现复用

/// 弹窗公共按钮, 0-确定， 1-取消，2-操作
enum PopCommonButton {
  ok(value: 0, label: "确认"),
  cancel(value: 1, label: "取消"),
  close(value: 2, label: "关闭");

  const PopCommonButton({required this.value, required this.label});

  final int value;
  final String label;

  static PopCommonButton parse(int value) {
    /// 解析从后台传来的值
    if (value == 1) {
      return PopCommonButton.cancel;
    }
    if (value == 2) {
      return PopCommonButton.close;
    }

    return PopCommonButton.ok;
  }
}

3. Sheet的例子

• 大概的样子是这样的：

  
  
  Sheet例子

• 业务按钮也通过枚举的形式增加可读性

/// 创建按钮
enum CreateSheetButton {
  activity(value: 0, label:"发起新活动"),
  space(value: 1,label:"创建新空间"),
  theme(value: 2,label:"发表新主题");

  const CreateSheetButton({required this.value, required this.label});
  final int value;
  final String label;

  static CreateSheetButton parse(int value) {
    /// 解析从后台传来的值
    if (value == 1) {
      return CreateSheetButton.space;
    }
    if (value == 2) {
      return CreateSheetButton.theme;
    }

    return CreateSheetButton.activity;
  }
}

• 封装GetX的Get.bottomSheet实现底部Sheet的弹出；使用Get.back(result:T)回传数据。

/// 创建活动，空间，主题
class CreateSheet {
  /// 使用Get.back(result:T)回传数据
  static Future<T?> show<T>() {
    return Get.bottomSheet(
      Container(
        height: 300.h,
        decoration: BoxDecoration(
          color: StyleUtils.backgroundColor7,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15.r),
            topRight: Radius.circular(15.r),
          ),
        ),
        padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.h),
        child: Column(
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                Get.back(result: CreateSheetButton.activity);
              },
              child: Container(
                decoration: BoxDecoration(
                  color: StyleUtils.backgroundColor5,
                  borderRadius: BorderRadius.all(Radius.circular(10.r)),
                ),
                height: 50.h,
                child: Center(
                  child: Text(
                    CreateSheetButton.activity.label,
                    style: StyleUtils.textStyle01,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 10.h,
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                Get.back(result: CreateSheetButton.space);
              },
              child: Container(
                decoration: BoxDecoration(
                  color: StyleUtils.backgroundColor5,
                  borderRadius: BorderRadius.all(Radius.circular(10.r)),
                ),
                height: 50.h,
                child: Center(
                  child: Text(
                    CreateSheetButton.space.label,
                    style: StyleUtils.textStyle01,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 10.h,
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                Get.back(result: CreateSheetButton.theme);
              },
              child: Container(
                decoration: BoxDecoration(
                  color: StyleUtils.backgroundColor5,
                  borderRadius: BorderRadius.all(Radius.circular(10.r)),
                ),
                height: 50.h,
                child: Center(
                  child: Text(
                    CreateSheetButton.theme.label,
                    style: StyleUtils.textStyle01,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 30.h,
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                Get.back(result: PopCommonButton.cancel);
              },
              child: Container(
                decoration: BoxDecoration(
                  color: StyleUtils.backgroundColor5,
                  borderRadius: BorderRadius.all(Radius.circular(10.r)),
                ),
                height: 50.h,
                child: Center(
                  child: Text(
                    PopCommonButton.cancel.label,
                    style: StyleUtils.textStyle01,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 30.h,
            ),
          ],
        ),
      ),
    );
  }
}

• 使用的地方加一个await就可以了

      var result = await CreateSheet.show();
      LogUtil.log("CreateSheet返回值：$result");
      if (result == CreateSheetButton.activity) {
        /// 点了活动按钮
      }
      if (result == CreateSheetButton.space) {
        /// 点了空间按钮
      }
      if (result == PopCommonButton.cancel) {
        /// 点了取消按钮
      }

• 至于Alert，封装方式和Sheet类似，只要把方法换成Get.dialog就可以了。