题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
Flutter是谷歌推出的最新的移动开发框架。
【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注
如下图所示,你的APP项目中一定会应用到这样的场景,只不过是文案不一样而已。
页面的主体使用 Scaffold 来搭建,包括一个按钮与一个显示文本Text,代码如下:
class HomePage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage>{
String resultMessage = "--";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("测试底部弹框"),),
//线性布局
//子Widget 竖直方向排开
body: Column(children: [
//一个按钮
OutlineButton(child: Text("点击打开弹框"),onPressed: (){
showBottomSheet();
},),
//一个显示回调的文本
Text(resultMessage),
],),
);
}
... ...
}
showModalBottomSheet 是Flutter中全局封装的一个快捷打开底部弹框的方法,通过 builder 构建弹框中的内容,代码如下:
//显示底部弹框的功能
void showBottomSheet() {
//用于在底部打开弹框的效果
showModalBottomSheet(builder: (BuildContext context) {
//构建弹框中的内容
return buildBottomSheetWidget(context);
}, context: context);
}
弹框中的内容 使用线性布局 Column 来构建,代码如下 :
Widget buildBottomSheetWidget(BuildContext context) {
//弹框中内容 310 的调试
return Container(
height: 310,
child: Column(
children: [
buildItem("微信登录","images/wx.png",onTap:(){
setState(() {
resultMessage = "微信登录";
});
}),
//分割线
Divider(),
buildItem("QQ登录","images/qq.png",onTap:(){
setState(() {
resultMessage = "qq 登录点击";
});
}),
//分割线
Divider(),
buildItem("天翼登录","images/tianyi.png",onTap:(){
setState(() {
resultMessage = "天翼登录 点击";
});
}),
//分割线
Divider(),
buildItem("密码登录","images/password.png",onTap:(){
setState(() {
resultMessage = "密码登录 点击";
});
}),
Container(color: Colors.grey[300],height: 8,),
//取消按钮
//添加个点击事件
InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
child: Text("取消"),
height: 44,
alignment: Alignment.center,
),)
],
),
);
}
每一行都类似,所以这里使用了封装的方式来构建,代码如下:
Widget buildItem(String title,String imagePath,{Function onTap}){
//添加点击事件
return InkWell(
//点击回调
onTap: (){
//关闭弹框
Navigator.of(context).pop();
//外部回调
if(onTap!=null){
onTap();
}
},
child: Container(
height: 40,
//左右排开的线性布局
child: Row(
//所有的子Widget 水平方向居中
mainAxisAlignment: MainAxisAlignment.center,
//所有的子Widget 竖直方向居中
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(imagePath,width: 20,height: 20,),
SizedBox(width: 10,),
Text(title)
],
),
),
);
}
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
当然以小编的性格,肯定是要有视频录制的,点击这里查看,有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人