在Flutter中,想要實現底部彈窗只需要調用這個方法:
showModalBottomSheet(context: null, builder: null)
具體使用方法:
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
color: Colors.transparent,
height: 120,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new ListTile(
title: Text('拍照'),
onTap: () {
_takePhoto();
Navigator.pop(context);
},
),
new ListTile(
title: Text('從相冊中選擇'),
onTap: () {
_openGallery();
Navigator.pop(context);
},
),
],
),
);
});
在build方法中可以自己隨意編寫ui,但是flutter默認在底部彈窗最大高度做了限制,不能超過屏幕高度的9/16。具體可以在源碼中看出:
@override
BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
minWidth: constraints.maxWidth,
maxWidth: constraints.maxWidth,
minHeight: 0.0,
maxHeight: constraints.maxHeight * 9.0 / 16.0,
);
}
所以如果想要突破這個限制的高度,可以直接修改源碼:
maxHeight: constraints.maxHeight
歡迎新人大佬進羣交流指導:187670882