前言：
flutter中有很多好用dialog组件 但是 最近有需要做一个自定义dialog的效果 所以昨晚就熬夜撸了自定义的dialog 今天就分享给大家 那么废话不多 我们正式开始
准备工作：
安装配置flutter的开发环境 ，请参考flutter中文网配置即可
网址：https://flutterchina.club/
效果图：
我们这边的效果很明显 点击listview item组件里面嵌套的button 组件弹窗我们的弹窗
具体实现
listview的实现：
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("listview 点击弹窗demo"),
centerTitle: true,
),
body: Container(
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index){
return itemWidget(context, index);
}),
),
);
}
Widget itemWidget( BuildContext context ,int index ){
return GestureDetector(
child: Container(
height: 200,
width: double.infinity,
alignment: Alignment.bottomRight,
margin: EdgeInsets.fromLTRB(0, 0, 10, 10),
child:RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Text(
"更多"
),
onPressed: (){
setState(() {
showCustomDialog(context).then((value) {
print("回调的值是--- > "+value);
});
});
},
)
),
);
}
这边我们写了一个lsitview 组件里面填充了20条固定的死数据（方便测试），item组件中我们返回的是一个Container 中嵌套的 RaisedButton 并且在靠右靠下显示 跟右边和下边间距是10 然后我们要在 RaisedButton 的·点击事件手势里面实现 弹窗的弹出
自定义dialog的实现
也就是中间这一部分
import 'package:flutter/material.dart';
class ListviewDialog extends Dialog {
List<String>data=[
"补材料申请",
"面签申请",
"暂停申请",
"提醒",];
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Material(
//创建透明层
type: MaterialType.transparency, //透明类型
child: new Center(
//保证控件居中效果
child: new SizedBox(
width: 200.0,
height: 160.0,
child: new Container(
color: Colors.white,
child: ListView.builder(
itemCount:data.length==0?0:data.length,
itemBuilder: (BuildContext context, int position){
return itemWidget(context,position);
}),
),
),
),
);;
}
Widget itemWidget(BuildContext context,int index){
return GestureDetector(
child: Container(
height: 40,
width: double.infinity,
child: Center(
child: Text(data[index]),
)
),
onTap: (){
Navigator.pop(context,data[index]);
},
);
}
}
我们写了一个 ListviewDialog 继承flutter sdk里面的dialog 重写 build 方法 然后返回一个widget
widget 里面我们写了一个 Material 组件来实现弹窗外部透明只要中间显示的效果 然后我们嵌套Center 组件使得内容居中显示 我们在Center组件中嵌套 Container 盒子组件 并且设置宽高
width: 200.0,
height: 160.0,
我们在Container 组件中嵌套一个listview 来显示我们需要选择内容 内容的话是一个text组件显示
我们定一个list集合来模拟一些假数据
List<String>data=[
"补材料申请",
"面签申请",
"暂停申请",
"提醒",];
然后通过listview.builder方法来加载数据
Widget build(BuildContext context) {
// TODO: implement build
return new Material(
//创建透明层
type: MaterialType.transparency, //透明类型
child: new Center(
//保证控件居中效果
child: new SizedBox(
width: 200.0,
height: 160.0,
child: new Container(
color: Colors.white,
child: ListView.builder(
itemCount:data.length==0?0:data.length,
itemBuilder: (BuildContext context, int position){
return itemWidget(context,position);
}),
),
),
),
);;
}
弹窗中的lsitview的item布局我们也简单说下
Widget itemWidget(BuildContext context,int index){
return GestureDetector(
child: Container(
height: 40,
width: double.infinity,
child: Center(
child: Text(data[index]),
)
),
onTap: (){
Navigator.pop(context,data[index]);
},
);
}
这边弹窗的中的listview item 返回得是一个高度40 宽度撑满的 Container组件中嵌套一个居中的text
组件然后我们在item的组件点击事件中将我们点击的内容返回回去
onTap: (){
Navigator.pop(context,data[index]);
},
具体的 ListviewDialog调用
Future showCustomDialog(BuildContext context )async {
var result=await showDialog(
context: context,
builder: (BuildContext context) {
return ListviewDialog();
});
return result;
}
我们在main.dart类中 我们定义了一个 showCustomDialog方法来显示ListviewDialog 我们返回的result就是在ListviewDialog 中点击返回 Navigator.pop(context,data[index]);返回的内容
然后我们在 RaisedButton的点击事件中调用 showCustomDialog方法并拿到返回值
onPressed: (){
setState(() {
showCustomDialog(context).then((value) {
print("回调的值是--- > "+value);
});
});
},
我们通过日志打印我们可以正确拿到用户点击·返回的信息了
到此flutter 中的自定义dialog我们就讲完了 代码相对简单
最后总结：
这篇文章纯属记录个人的学习经历 ，顺带分享给各位 希望能帮助到各位同学，如果觉得文章还不错麻烦动动你的小手指给我一个star 和转发谢谢
