美文网首页Flutter相关
Flutter - 弹框封装 - JhDialog

Flutter - 弹框封装 - JhDialog

作者: 西半球_ | 来源:发表于2020-07-28 15:41 被阅读0次

    demo 地址: https://github.com/iotjin/jh_flutter_demo

    效果图:

    JhDialog.gif

    Examples

    • 样式1 - 只有标题
      JhDialog.show(context, title: "提示", onConfirm: () {
        print('点击确定');
        JhToast.showText(context, msg: '点击确定');
      }, onCancel: () {
        JhToast.showText(context, msg: '点击取消');
      });
    
    
    • 样式2 - 标题内容
      JhDialog.show(context, title: "提示", content: '您确定要退出登录吗?');
    
    • 样式3 - 只有内容
      JhDialog.show(context, content: '确认要退出吗?');
    
    • 样式4 - 标题内容只有确定
              JhDialog.show(context,
                  title: "警告",
                  content: '您的账号在异地登录,请重新登录!',
                  rightText: '好的',
                  hiddenCancel: true);
    
    • 样式5 - 修改按钮文字
              JhDialog.show(context,
                  title: "提示",
                  content: '您需要同意相关协议才能使用!',
                  leftText: '不同意',
                  rightText: '同意');
    
    
    • 样式6 - 自定义内容
     JhDialog.showCustomDialog(context,
                  content: Container(height: 200, color: Colors.red));
    
    • 样式7 - 自定义内容2
      JhDialog.showCustomDialog(context,
                  title: '提示', content: Container(height: 200, color: Colors.red));
    
    
    • 样式8 - 完全自定义
              JhDialog.showAllCustomDialog(
                context,
                clickBgHidden: true,
                child: Center(
                  child: Container(
                    width: double.infinity,
                    height: 200,
                    color: Colors.red,
                    child: Center(
                      child: Text('这是完全自定义的弹框,点击背景隐藏'),
                    ),
                  ),
                ),
              );
    
    
    • 样式9 - 完全自定义-外部点击事件
               JhDialog.showAllCustomDialog(context,
                  child: GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      print("这是完全自定义的弹框,点击红色部分隐藏");
                      Navigator.pop(context);
                    },
                    child: Container(
                      width: double.infinity,
                      height: 200,
                      color: Colors.red,
                      child: Center(
                        child: Text('这是完全自定义的弹框,点击红色部分隐藏'),
                      ),
                    ),
                  ));
    

    相关文章

      网友评论

        本文标题:Flutter - 弹框封装 - JhDialog

        本文链接:https://www.haomeiwen.com/subject/jvifrktx.html