flutter实现底部弹出框以及特色功能

今天项目中要实现底部弹出框并且实现圆角功能，先来预览一下

可以看出实现的公告有

底部圆角，以及朋友圈，微信转发等

实现逻辑我直接代码列出

定义

List<String> nameItems = <String>['微信', '朋友圈', 'QQ', 'QQ空间', '微博', '链接'];List selects = [];int count = 0;// 这个urlItems这里没有用到List<String> urlItems = <String>['images/wexin_icon.png','images/friend_icon.png','images/qq_icon.png','images/qq_zon_icon.png','images/weibo_icon.png','images/link_icon.png',];

开始操作

void showBottomSheet() {//用于在底部打开弹框的效果showModalBottomSheet(builder: (BuildContext context) {//构建弹框中的内容return buildBottomSheetWidget(context);},backgroundColor: Colors.transparent,//重要context: context);}

下面

 ///底部弹出框的内容Widget buildBottomSheetWidget(BuildContext context) {return Container(height: 500.w,decoration: new BoxDecoration(color: Colors.white,borderRadius: new BorderRadius.only(topLeft: const Radius.circular(25.0),topRight: const Radius.circular(25.0))),child: new Column(children: [Text("邀请好友",style: TextStyle(color: Color(0xFF36393D),fontSize: 46.w,),),commonButtonWidget(fontsize: 16,txt: "邀请",ontap: () {print("11");}),Container(width: MediaQuery.of(context).size.width,padding: EdgeInsets.only(left: 10),child: Text("去邀请"),),Container(height: 100,child: ListView.builder(scrollDirection: Axis.horizontal,itemBuilder: (BuildContext context, int index) {return InkWell(child: Container(child: new Column(children: <Widget>[new Padding(padding: EdgeInsets.fromLTRB(0.0, 6.0, 0.0, 6.0),child: Image.asset(urlItems[index],width: 48,),),new Text(nameItems[index])],),),onTap: () {switch (nameItems[index]) {case '微信':print("微信");break;case '朋友圈':print("朋友圈");break;case 'QQ':print("QQ");break;case 'QQ空间':print("QQ空间");break;case '微博':print("微博");break;}},);},itemCount: nameItems.length,),),],));}

这是邀请按钮的基础上封装的组件

Widget commonButtonWidget({String txt,Color fontcolor,Color backcolor,double fontsize,Function ontap}) {String txt = "邀请";Color fontcolor = Color(0xFF19D88E);Color backcolor = Color(0xFF19D88E).withOpacity(0.2);double fontsize = 18;return new Center(child: new Material(
//INK可以实现装饰容器child: new Ink(//用ink圆角矩形decoration: new BoxDecoration(//不能同时”使用Ink的变量color属性以及decoration属性，两个只能存在一个color: backcolor,//设置圆角borderRadius: new BorderRadius.all(new Radius.circular(25.0)),),child: new InkWell(//圆角设置,给水波纹也设置同样的圆角//如果这里不设置就会出现矩形的水波纹效果borderRadius: new BorderRadius.circular(25.0),//设置点击事件回调onTap: () {ontap();},child: new Container(width: 300.0,height: 36.0,//设置child 居中alignment: Alignment(0, 0),child: Text(txt,style: TextStyle(color: fontcolor, fontSize: fontsize),),),),),),);}

当然，代码写的很烂，如果有好的建议，欢迎指出，

最后欢迎大家在一下平台关注我，

主要发布文章包括，flutter，Vue，go，python，等技术，以及每月的读书笔记

哔哩哔哩搜索“Luckly年轻人

公众号：“萌小肆聊编程”

自建博客：https://luckly.work/

哔哩哔哩：https://space.bilibili.com/480883651

CSDN:https://blog.csdn.net/qq_39132095

知乎：https://www.zhihu.com/people/yimi-yang-guang-96-65

简书：https://www.jianshu.com/u/0c43689713e9

掘金：https://juejin.cn/user/3843548384077192

flutter实现底部弹出框以及特色功能相关推荐

html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
android的底部弹出框炫酷的样式,Android自定义底部弹出框ButtomDialog
本文实例为大家分享了Android自定义底部弹出框的具体代码,供大家参考,具体内容如下先看看效果和你要的是否一样一 .先来配置自定义控件需要的资源 1.在res文件夹下创建一个anim文件夹并创建 ...
微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果项目实现代码 1.wxml代码 (其中 ...
android实现底部弹出框与软键盘冲突（全面屏虚拟键适配）
普通的底部弹出框大家都可以很熟练的使用了,无非是一个diaolog的事情,但是当dialog中含有输入框之后,软键盘与dialog的冲突可以说是十分坑了...更别说加上底部虚拟键了,这么一个小功能磨得 ...
仿抖音评论底部弹出框（列表框+发表框）
BottomSheetDialogFragment高仿抖音评论底部弹出框先看效果图: 这个弹窗的效果是使用BottomSheetDialogFragment做的,第一个弹出的对话框为CommentL ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
Swift4.0 实现底部弹出框
网上找了些例子,但是并不能满足我的要求,下面我将网上的荔枝与自己的改进分享给大家原理: 通过swift4的present 结合SnapKit进行布局看效果图: 1.包含自定义view: 2:显示L ...
uni-app 封装底部弹出框
一个很简单的代替 select 的组件: 这里只实现了弹出.确认时返回选中的选中的对象: 没有实现弹出时显示为第几个,有需要可以自己加: 位置.弹出动画.样式都可以根据自己的需要进行修改: 有问题或者 ...

flutter实现底部弹出框以及特色功能

flutter实现底部弹出框以及特色功能相关推荐

最新文章

热门文章