flutter Overlay 与 OverlayPortal 的简单实用

103 阅读1分钟

Overlay 创建-》展示-》移除

OverlayEntry? _compressDeleteOverLay;
void showCompressOverlay() {
  // 创建OverlayEntry
  _compressDeleteOverLay = OverlayEntry(
    builder: (context) =>
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Obx(()=>ClickListener(
            onTap: (){
              jumpCompressFileDeletePage();
            },
            child: CommonDeleteView(
              count: totalCompressDeleteCount.value,
              size: totalCompressDeleteSize.value,
              initState: true,
            ),
          )),
        ),
  );
  Overlay.of(navigatorKey.currentContext!).insert(_compressDeleteOverLay!);
}

void removeCompressDeleteOverlay(){
  _compressDeleteOverLay?.remove();
  _compressDeleteOverLay = null;
}

OverlayPortal 创建-》展示-》隐藏(通过OverlayPortalController 控制)

OverlayPortal(
    controller: controller.overlayPortalController, //OverlayPortalController
    overlayChildBuilder: (BuildContext context) {
      return Positioned(
        right: 0,
        bottom: 0,
        left: 0,
        child: Obx(()=>ClickListener(
          onTap: (){
            controller.jumpCompressFileDeletePage();
          },
          child: CommonDeleteView(count: controller.totalCompressDeleteCount.value,
              size: controller.totalCompressDeleteSize.value,
              initState: true,
              controller: controller.fileCompressButtonController),
        )),
      );
    }
)

简单可以理解为:Overlay 做全局弹窗 OverlayPortal 做单页面内部弹窗

相关文章:juejin.cn/post/743602…