Flutter 重构：基于 PopupRoute 的极简弹窗

这可能是颗粒度最好的 PopupRoute 弹窗封装。

核心：

Flutter 需要自定义各式各样的弹窗视图，总是有些场景系统提供的无法满足需求，随使用弹出路由 PopupRoute 进行封装；核心是继承 PopupRoute 进行容器化封装，将 视图 child 抽出，用户可以传入任意 Widget， 通过 Alignment 调整 child 视图显示位置；

  final title1 = "曼德拉《漫漫人生路》";
  final message1 = """
如果发出声音是危险的，那就保持沉默;
如果自觉无力发光，那就别去照亮别人。
但是——不要习惯了黑暗就为黑暗辩护;
不要为自己的苟且而得意洋洋;
不要嘲讽那些比自己更勇敢、更有热量的人们。
我们可以卑微如尘土，不可扭曲如蛆虫。
——曼德拉《漫漫人生路》
""";

效果 - 仿 AlertDialog

Navigator.push(context,
  NNPopupRoute(
    alignment: Alignment.topCenter,
    onClick: () {
      ddlog("exit");
      //点击空白处
      Navigator.of(context).pop();
    },
    // child: buildAlertColumn(context, marginHor: 15),
    child: NNAlertDialog(
      marginHor: 10,
      title: Text(title1, style: TextStyle(fontWeight: FontWeight.w500),),
      content: Text(message1, style: TextStyle(fontWeight: FontWeight.w300),),
      actionCancell: TextButton(
        onPressed: () {
          ddlog("取消");
          Navigator.of(context).pop();
          },
        child: Text("取消"),
      ),
      actionConfirm: TextButton(
        onPressed: () {
          ddlog("确定");
          Navigator.of(context).pop();
        },
        child: Text("确定"),
      ),
    ),
  ),
);

Simulator Screen Shot - iPhone 11 Pro - 2021-07-30 at 14.18.44.png

---

//...
NNPopupRoute(
  alignment: Alignment.bottomCenter,
//...

Simulator Screen Shot - iPhone 11 Pro - 2021-07-30 at 14.21.04.png

---

Navigator.push(context,
  NNPopupRoute(
    // alignment: Alignment.topCenter,
    onClick: () {
      ddlog("exit");
      //点击空白处
      Navigator.of(context).pop();
    },
    // child: buildAlertColumn(context, marginHor: 15),
    child: NNAlertDialog(
      marginHor: 10,
      title: Text(title1, style: TextStyle(fontWeight: FontWeight.w500),),
      content: Text(message1, style: TextStyle(fontWeight: FontWeight.w300),),
      actions: ["选择A", "选择B", "选择C", "选择D"].map((e) => TextButton(onPressed: (){
        ddlog(e);
        Navigator.pop(context);
      }, child: Text(e),)).toList(),
    ),
  ),
);

Simulator Screen Shot - iPhone 11 Pro - 2021-07-30 at 14.19.11.png

---

//...
NNPopupRoute(
  alignment: Alignment.bottomCenter,
//...

Simulator Screen Shot - iPhone 11 Pro - 2021-07-30 at 14.20.50.png

---

效果 - 仿通知消息视图

final screenSize = MediaQuery.of(context).size;

double spacingVer = 8;
double spacingHor = 15;

Navigator.push(context,
  NNPopupRoute(
    alignment: Alignment.topCenter,
    onClick: () {
      ddlog("exit");
      //点击空白处
      Navigator.of(context).pop();
    },
    // child: buildAlertColumn(context, marginHor: 15),
    child: GestureDetector(
      onTap: (){
          ddlog("tap Container");
        },
      child: Container(
        width: screenSize.width - 10,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular((10.0)), // 圆角度
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(top: spacingVer, left: spacingHor, bottom: spacingVer, right: spacingHor),
              child: Text(title1, style: TextStyle(fontWeight: FontWeight.w600),),
            ),
            Padding(
              padding: EdgeInsets.only(left: spacingHor, bottom: spacingVer, right: spacingHor),
              child: Text(message1, style: TextStyle(fontWeight: FontWeight.w300),),
            ),
          ],
        ),
      ),
    ),
  ),
);

Simulator Screen Shot - iPhone 11 Pro - 2021-07-30 at 14.38.14.png

NNPopupRoute.dart

NNAlertDialog.dart