今天项目中要实现底部弹出框并且实现圆角功能，先来预览一下
可以看出实现的公告有
底部圆角，以及朋友圈，微信转发等
实现逻辑我直接代码列出
定义
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), ), ), ), ), ), ); }
