自定义dialog

先来看看一个示例

class ExamResultDialog extends Dialog{...@overrideWidget build(BuildContext context) {return new ExamResultDialogContent(entity, listener);}
}class ExamResultDialogContent extends StatefulWidget{...@overrideState<StatefulWidget> createState() {...return _ExamResultDialogContent();}...
}class _ExamResultDialogContent extends State<ExamResultDialogContent>{@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.transparent,body: Center(child: Container(decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.all(Radius.circular(20)),),width: 752,height: 426,child: ...,   //内容部分),),);}
}

从上面可以看到先继承dialog，在它的build函数然后widget，剩下的与正常的widget差不多。

但是注意几点：

最外层需要用Scaffold包裹，否则所有默认样式都会失效。
使用Scaffold后，背景是不透明的，需要再设置backgroundColor为透明的。
dialog默认是全屏的，所以需要用Container来限制内容的大小，并用Center包裹使内容居中。同时也可以对Container添加decoration实现弹窗背景

大小动态调整的Dialog

开发中经常遇到这样的dialog，内容变化很大，所以dialog的大小也要跟着变化，但是为了美观又不能太大，当内容过多的时候dialog大小就不再改变，而是内容可滚动查看。

下面我们一步步实现这个dialog

Text内容可滚动

这里同时也解决Text显示不全的问题。

我们用最简单的dialog，内容只有文字，那么第一步要解决的就是如果文字特别多的情况下，怎么让Text的内容可以滚动。

答案是用SingleChildScrollView，它只有一个child，作用就是如果child太大的情况下可以滚动查看。

代码：

SingleChildScrollView(child: Text(widget.msg,style:TextStyle(color: Color(0xff919294), fontSize: 18),
),

但是这里有一个问题，就是虽然能滚动了，但是Text显示不全，现象是当Text文字内容很多的时候，最后一行看不到，而倒数第二行只能显示一半。

这个不是SingleChildScrollView的问题，经测试，在空白页面上单独使用Text，高度不限，依然会出现这样的情况，甚至Text下半部分还空白着，后面的文字依然不显示。

注意：这个情况是发生在flutter web，在chrome上出现，在Android或ios未测试，可能是web特有的问题

经过反复尝试，最终发现为Text设置overflow: TextOverflow.ellipsis可以解决，文字可以完整显示出来了。

overflow的作用就是文字显示不下时采用什么样的处理，ellipsis就是省略，还有shape（渐变）、visible等等。这里不知道为什么设置ellipsis可以起作用，反而设置visible不行。

但是设置overflow: TextOverflow.ellipsis可以解决单独使用Text时的问题，如果使用SingleChildScrollView嵌套到达滚动效果的话，Text只显示一行。。。

这里我的解决方法时设置Text的maxLines: 100 这里的100只是一个较大的数，可以是1000，只有保证内容完全显示即可。

这个解决方案并不理想，但是暂时只想到这个解决方案。最终代码：

SingleChildScrollView(child: Text(widget.msg,overflow: TextOverflow.ellipsis,maxLines: 100,style:TextStyle(color: Color(0xff919294), fontSize: 18),
),

窗口大小动态调整并限制最大高度

这里使用LimitedBox来实现高度的限制，直接上代码：

SizedBox(width: 400,child: Container(child: Stack(children: [Column(mainAxisSize: MainAxisSize.min,children: [Container(child: Text("公告",style: TextStyle(color: Color(0xff212223), fontSize: 24),),width: double.infinity,alignment: Alignment.center,margin: EdgeInsets.only(top: 10, bottom: 20),),LimitedBox(maxHeight: 400,child: SingleChildScrollView(child: Text(widget.msg,overflow: TextOverflow.ellipsis,maxLines: 100,style:TextStyle(color: Color(0xff919294), fontSize: 18),),padding: EdgeInsets.only(left: 20, right: 20),),),Padding(padding: EdgeInsets.all(10))],),GestureDetector(child: Container(child: Image.asset(R.assetsAlertClose,width: 20,height: 20,),padding: EdgeInsets.all(10),alignment: Alignment.topRight,),onTap: () {Navigator.of(context).pop();},)],),decoration: ShapeDecoration(color: Colors.white,shape: RoundedRectangleBorder(side: BorderSide(color: Colors.transparent),borderRadius: BorderRadius.all(Radius.circular(13),),),),));

最外层是一个SizedBox，目的是设置窗口的宽度，这个是固定的，而窗口的高度是动态的。
然后就遇到了第一个问题，一开始我在第二层就使用LimitedBox，如下：

SizedBox(width: 400,child: LimitedBox(maxHeight: 400,child: Container(...

但是这样无论Container内容有多大，Container高度（甚至里面没有任何内容）都一直是400，而我们期望的是Container高度可以随着内容变化，而最大高度限制在400

经过尝试，将LimitedBox放在Container里层即可，具体原因还不得而知，Flutter UI嵌套感觉问题一直很多。

最终结果就像上面一样，只在内容部分的外层套一层LimitedBox来限制最大高度，这样就实现了动态变化且有最大限制。

这里还要注意，在Column中我设置了mainAxisSize: MainAxisSize.min 因为默认Column是在垂直方向上是完全展开的，这样高度就不能动态变化了，所以这里的设置让Column垂直方向上根据内容展示即可。

在flutter中由于各种ui的嵌套和各种默认值，做一些大小动态调整的组件还是需要一些工作量，要注意一些坑。

Flutter入门：自定义dialog相关推荐

Flutter 入门指北(Part 9)之弹窗和提示(SnackBar、BottomSheet、Dialog)
该文已授权公众号「码个蛋」,转载请指明出处前面的小节把常用的一些部件都介绍了,这节介绍下 Flutter 中的一些操作提示.Flutter 中的操作提示主要有这么几种 SnackBar.Botto ...
Flutter:Dialog对话框及自定义Dialog
基本属性介绍几个自带的dialog用法和属性基本一致,只是部分参数不同 const AlertDialog({Key? key,this.title, //对话框标题组件this.titlePadd ...
Flutter 组件之AlertDialog、SimpleDialog、showModalBottomSheet、showToast、自定义Dialog
AlertDialog dialog弹框在 showDialog中定义 AlertDialog _alertDialog () async {var result = showDialog< ...
Flutter 自定义Dialog
我们项目开发中,有很多地方会用到dialog,虽然flutter自身也有,比如AboutDialog.AlertDialog.SimpleDialog.CupertinoAlertDialog等等之类 ...
flutter自定义dialog
自定dialog Dialog 在我们的日常开发中是必不可少的,Flutter 也提供了 AlertDialog .SimpleDialog 等供我们选择,但是对于开发还是不够的. 在android原 ...
Android 自定义Dialog 的使用
单个Dialog 自定义布局 ,这个只能算半自定义,就是一个弹框布局插入到AlertDialog 中使用setView 即可代码如下 AlertDialog.Builder builder = n ...
Android中自定义Dialog外形，去除黑底和白色边框
在做Android开发中经常会使用到自定义样式的Dialog,尤其是在游戏当中,大家通常都是通过自定义一个布局文件来设置Dialog中显示的内容,但是仅仅这样还是不行的~会有黑色的框和白色的边.这就需 ...
android 自定义dialog 定时关闭,Android编程实现自定义Dialog的大小自动控制方法示例...
本文实例讲述了Android编程实现自定义Dialog的大小自动控制方法.分享给大家供大家参考,具体如下: Android应用开发中,无论是出于功能还是增加用户体验,弹出对话框(Dialog)进行一些 ...
自定义Dialog(一)
自定义Dialog(一) Dialog是一种提示用户做决定的小窗口,它一般不会布满整个屏幕,它可以请求用户在程序处理之前做一动作.比如:当退出应用的时候,可以提示用户是否真的需要退出应用,等等. an ...

Flutter入门：自定义dialog

自定义dialog

大小动态调整的Dialog

Text内容可滚动

窗口大小动态调整并限制最大高度

Flutter入门：自定义dialog相关推荐

最新文章

热门文章