今天項目中要實現(xiàn)底部彈出框并且實現(xiàn)圓角功能，先來預覽一下

可以看出實現(xiàn)的公告有

底部圓角，以及朋友圈，微信轉發(fā)等

實現(xiàn)邏輯我直接代碼列出

定義

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) {//構建彈框中的內(nèi)容return buildBottomSheetWidget(context);},backgroundColor: Colors.transparent,//重要context: context);}

下面

///底部彈出框的內(nèi)容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可以實現(xiàn)裝飾容器child: new Ink(//用ink圓角矩形decoration: new BoxDecoration(//不能同時”使用Ink的變量color屬性以及decoration屬性，兩個只能存在一個color: backcolor,//設置圓角borderRadius: new BorderRadius.all(new Radius.circular(25.0)),),child: new InkWell(//圓角設置,給水波紋也設置同樣的圓角//如果這里不設置就會出現(xiàn)矩形的水波紋效果borderRadius: new BorderRadius.circular(25.0),//設置點擊事件回調(diào)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),),),),),),);}

當然，代碼寫的很爛，如果有好的建議，歡迎指出，

最后歡迎大家在一下平臺關注我，

主要發(fā)布文章包括，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实现底部弹出框以及特色功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。