Flutter自定义Dialog

flutter自定义对话框其实很好弄,直接把大概布局写出来,然后把公共参数抽出来,直接进行引用即可,下面是我写的效果图:

ok,直接上代码吧。

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///自定义Dialog
class HtmlDialog extends StatefulWidget {
  //------------------不带图片的dialog------------------------
  final String title; //弹窗标题
  final String content; //弹窗内容
  final String confirmContent; //按钮文本
  final Color confirmTextColor; //确定按钮文本颜色
  final bool isCancel; //是否有取消按钮,默认为true true:有 false:没有
  final Color confirmColor; //确定按钮颜色
  final Color cancelColor; //取消按钮颜色
  final bool outsideDismiss; //点击弹窗外部,关闭弹窗,默认为true true:可以关闭 false:不可以关闭
  final Function confirmCallback; //点击确定按钮回调
  final Function dismissCallback; //弹窗关闭回调

  //------------------带图片的dialog------------------------
  final String image; //dialog添加图片
  final String imageHintText; //图片下方的文本提示

  const HtmlDialog(
      {Key key,
      this.title,
      this.content,
      this.confirmContent,
      this.confirmTextColor,
      this.isCancel = true,
      this.confirmColor,
      this.cancelColor,
      this.outsideDismiss = true,
      this.confirmCallback,
      this.dismissCallback,
      this.image,
      this.imageHintText})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _CustomDialogState();
  }
}

class _CustomDialogState extends State<HtmlDialog> {
  _confirmDialog() {
    _dismissDialog();
    if (widget.confirmCallback != null) {
      widget.confirmCallback();
    }
  }

  _dismissDialog() {
    if (widget.dismissCallback != null) {
      widget.dismissCallback();
    }
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final width = size.width;

    Column _columnText = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        SizedBox(height: widget.title == null ? 0 : 16.0),
        Container(
          margin: EdgeInsets.only(
              top: ScreenUtil().setHeight(40),
              right: ScreenUtil().setWidth(40),
              left: ScreenUtil().setWidth(40),
              bottom: ScreenUtil().setHeight(30)),
          child: Text(widget.title == null ? '' : widget.title,
              style: TextStyle(fontSize: 16.0)),
        ),
        Expanded(
            child: Container(
              margin: EdgeInsets.only(
                right: ScreenUtil().setWidth(40),
                left: ScreenUtil().setWidth(40),
              ),
              child: Text(widget.content == null ? '' : widget.content,
                  style: TextStyle(fontSize: 15.0, color: Colors.black54)),
            ),
            flex: 1),
        //SizedBox(height: 1.0, child: Container(color: Color(0xDBDBDBDB))),
        Container(
            //height: 45,
            child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                margin: EdgeInsets.only(
                    right: ScreenUtil().setWidth(40),
                    left: ScreenUtil().setWidth(40),
                    bottom: ScreenUtil().setHeight(50)),
                child: RaisedButton(
                  child: Text(
                    widget.confirmContent,
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.white,
                    ),
                  ),
                  color: Colors.blue,
                  onPressed: () {
                    _confirmDialog();
                  },
                  shape: StadiumBorder(
                      side: BorderSide(color: Colors.lightBlueAccent)),
                ),
              ),
              flex: 1,
            ),
          ],
        ))
      ],
    );

    Column _columnImage = Column(
      children: <Widget>[
        SizedBox(
          height: widget.imageHintText == null ? 35.0 : 23.0,
        ),
        Image(
            image: AssetImage(widget.image == null ? '' : widget.image),
            width: 72.0,
            height: 72.0),
        SizedBox(height: 10.0),
        Text(widget.imageHintText == null ? "" : widget.imageHintText,
            style: TextStyle(fontSize: 16.0)),
      ],
    );

    return WillPopScope(
        child: GestureDetector(
          onTap: () => {widget.outsideDismiss ? _dismissDialog() : null},
          child: Material(
            type: MaterialType.transparency,
            child: Center(
              child: Container(
                width: widget.image == null ? width - 100.0 : width - 150.0,
                height: 200.0,
                alignment: Alignment.center,
                child: widget.image == null ? _columnText : _columnImage,
                decoration: BoxDecoration(
                    color: Color(0xFFFFFFFF),
                    borderRadius: BorderRadius.circular(12.0)),
              ),
            ),
          ),
        ),
        onWillPop: () async {
          return widget.outsideDismiss;
        });
  }
}

 

下面是引用方式:

 

 

 

 

好的,以下是一个简单的 Flutter 代码示例,实现一个自定义的弹窗: ```dart import 'package:flutter/material.dart'; class MyDialog extends StatelessWidget { final String title; final String message; final VoidCallback onConfirm; MyDialog({ @required this.title, @required this.message, @required this.onConfirm, }); @override Widget build(BuildContext context) { return Dialog( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16), ), child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Padding( padding: EdgeInsets.all(16), child: Text( title, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, ), ), ), Padding( padding: EdgeInsets.symmetric(horizontal: 16), child: Text( message, textAlign: TextAlign.center, style: TextStyle(fontSize: 16), ), ), SizedBox(height: 16), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: Text('取消'), onPressed: () { Navigator.of(context).pop(); }, ), SizedBox(width: 16), RaisedButton( child: Text('确定'), onPressed: onConfirm, ), ], ), ], ), ); } } ``` 在这个示例中,我们定义了一个 `MyDialog` 类,它接收一个标题、一个消息和一个确认回调函数作为参数。在 `build` 方法中,我们使用 `Dialog` 来实现弹窗,使用 `Column` 和 `Row` 来组织弹窗中的内容。弹窗中包含一个标题、消息、一个“取消”按钮和一个“确定”按钮。我们使用 `FlatButton` 和 `RaisedButton` 来分别实现这两个按钮。 要使用这个自定义弹窗,只需要在需要的地方创建一个 `MyDialog` 实例,并将它传递给 `showDialog` 方法即可: ```dart showDialog( context: context, builder: (BuildContext context) { return MyDialog( title: '标题', message: '这是一条消息。', onConfirm: () { // 确认回调函数 }, ); }, ); ``` 在这个示例中,我们将 `MyDialog` 实例作为 `builder` 函数的返回值,传递给 `showDialog` 方法。当用户点击弹窗中的“确定”按钮时,传递给 `MyDialog` 的确认回调函数将被调用。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朱 江

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值