Flutter 底部滑出实现 showBottomSheet (七)
程序员文章站
2022-07-13 23:26:06
...
class _DetailScaffoldViewState extends State<ProductInfoShareScaffold> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(ScreenUtil().setHeight(40.0)),
child: AppBar(
actions: <Widget>[
//要使用builder 不然Scaffold 取不到
new Builder(builder: (BuildContext context) {
return Container(
child: IconButton(
onPressed: () {
Scaffold.of(context)
.showBottomSheet<Null>((BuildContext context) {
return Container(
height: ScreenUtil().setHeight(250),
child: Container(
child: Column(
children: <Widget>[
Container(
padding:EdgeInsets.all(9),
child: Text("分享到"),
),
Container(
margin: EdgeInsets.only(top: ScreenUtil().setHeight(14)),
child: Row(
children: <Widget>[
Expanded(
child: Container(
child: Container(
child: Image.asset("images/xinlang.png"),
margin: EdgeInsets.all(14),
),
color: Colors.white,
margin: EdgeInsets.all(
ScreenUtil().setWidth(11)),
),
),
Expanded(
child: Container(
child: Container(
child: Image.asset("images/weixin.png"),
margin: EdgeInsets.all(14),
),
color: Colors.white,
margin: EdgeInsets.all(
ScreenUtil().setWidth(11)),
),
),
Expanded(
child: Container(
child: Container(
child: Image.asset("images/pengyou.png"),
margin: EdgeInsets.all(14),
),
color: Colors.white,
margin: EdgeInsets.all(
ScreenUtil().setWidth(11)),
),
),
Expanded(
child: Container(
child: Container(
child: Image.asset("images/qq.png"),
margin: EdgeInsets.all(14),
),
color: Colors.white,
margin: EdgeInsets.all(
ScreenUtil().setWidth(11)),
),
)
],
),
),
Container(
child: Row(
children: <Widget>[
Expanded(
child: Center(
child: Text("新浪微博"),
),
),
Expanded(
child: Center(child: Text("微信好友"),),
),
Expanded(
child: Center(child: Text("微信朋友圈"),),
),
Expanded(
child: Center(child: Text("QQ"),),
)
],
),
),
Container(
width: ScreenUtil.screenWidth,
height: ScreenUtil().setHeight(50),
margin: EdgeInsets.only(left: 10,right: 10,bottom: 0,top:ScreenUtil().setHeight(25) ),
child: RaisedButton(
color: Colors.white,
child: Text("取消"),
onPressed: () {
Navigator.of(context).pop();
}),
),
],
),
),
);
});
},
icon: Icon(Icons.share),
),
);
})
],
title: Text(widget.title),
leading: InkWell(
child: Icon(Icons.chevron_left),
onTap: () {
Navigator.of(context).pop();
},
),
),
),
body: widget.child,
backgroundColor: Color(0xFFF1F1F1),
bottomNavigationBar: widget.bottomBtn,
);
}
}
效果:
上一篇: Flutter圆角头像添加边框
下一篇: 最长回文子串 LeetCode