前言：
flutter中有很多好用dialog組件 但是 最近有需要做一個(gè)自定義dialog的效果 所以昨晚就熬夜擼了自定義的dialog 今天就分享給大家 那么廢話不多 我們正式開始
準(zhǔn)備工作：
安裝配置flutter的開發(fā)環(huán)境 两入，請(qǐng)參考flutter中文網(wǎng)配置即可
網(wǎng)址：https://flutterchina.club/
效果圖：
我們這邊的效果很明顯 點(diǎn)擊listview item組件里面嵌套的button 組件彈窗我們的彈窗
具體實(shí)現(xiàn)
listview的實(shí)現(xiàn)：
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("listview 點(diǎn)擊彈窗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("回調(diào)的值是--- > "+value);
});
});
},
)
),
);
}
這邊我們寫了一個(gè)lsitview 組件里面填充了20條固定的死數(shù)據(jù)（方便測(cè)試）澳淑，item組件中我們返回的是一個(gè)Container 中嵌套的 RaisedButton 并且在靠右靠下顯示 跟右邊和下邊間距是10 然后我們要在 RaisedButton 的·點(diǎn)擊事件手勢(shì)里面實(shí)現(xiàn) 彈窗的彈出
自定義dialog的實(shí)現(xiàn)
也就是中間這一部分
import 'package:flutter/material.dart';
class ListviewDialog extends Dialog {
List<String>data=[
"補(bǔ)材料申請(qǐng)",
"面簽申請(qǐng)",
"暫停申請(qǐng)",
"提醒",];
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Material(
//創(chuàng)建透明層
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]);
},
);
}
}
我們寫了一個(gè) ListviewDialog 繼承flutter sdk里面的dialog 重寫 build 方法 然后返回一個(gè)widget
widget 里面我們寫了一個(gè) Material 組件來(lái)實(shí)現(xiàn)彈窗外部透明只要中間顯示的效果 然后我們嵌套Center 組件使得內(nèi)容居中顯示 我們?cè)贑enter組件中嵌套 Container 盒子組件 并且設(shè)置寬高
width: 200.0,
height: 160.0,
我們?cè)贑ontainer 組件中嵌套一個(gè)listview 來(lái)顯示我們需要選擇內(nèi)容 內(nèi)容的話是一個(gè)text組件顯示
我們定一個(gè)list集合來(lái)模擬一些假數(shù)據(jù)
List<String>data=[
"補(bǔ)材料申請(qǐng)",
"面簽申請(qǐng)",
"暫停申請(qǐng)",
"提醒",];
然后通過(guò)listview.builder方法來(lái)加載數(shù)據(jù)
Widget build(BuildContext context) {
// TODO: implement build
return new Material(
//創(chuàng)建透明層
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布局我們也簡(jiǎn)單說(shuō)下
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 返回得是一個(gè)高度40 寬度撐滿的 Container組件中嵌套一個(gè)居中的text
組件然后我們?cè)趇tem的組件點(diǎn)擊事件中將我們點(diǎn)擊的內(nèi)容返回回去
onTap: (){
Navigator.pop(context,data[index]);
},
具體的 ListviewDialog調(diào)用
Future showCustomDialog(BuildContext context )async {
var result=await showDialog(
context: context,
builder: (BuildContext context) {
return ListviewDialog();
});
return result;
}
我們?cè)趍ain.dart類中 我們定義了一個(gè) showCustomDialog方法來(lái)顯示ListviewDialog 我們返回的result就是在ListviewDialog 中點(diǎn)擊返回 Navigator.pop(context,data[index]);返回的內(nèi)容
然后我們?cè)? RaisedButton的點(diǎn)擊事件中調(diào)用 showCustomDialog方法并拿到返回值
onPressed: (){
setState(() {
showCustomDialog(context).then((value) {
print("回調(diào)的值是--- > "+value);
});
});
},
我們通過(guò)日志打印我們可以正確拿到用戶點(diǎn)擊·返回的信息了
到此flutter 中的自定義dialog我們就講完了 代碼相對(duì)簡(jiǎn)單
最后總結(jié)：
這篇文章純屬記錄個(gè)人的學(xué)習(xí)經(jīng)歷 樱调，順帶分享給各位 希望能幫助到各位同學(xué)军拟，如果覺得文章還不錯(cuò)麻煩動(dòng)動(dòng)你的小手指給我一個(gè)star 和轉(zhuǎn)發(fā)謝謝
