[更新]
在 showModalBottomSheet(...)
中设置属性 isScrollControlled:true
。
这将使底部表单达到全高度。
[原始回答]
您可以实现 FullScreenDialog。
Flutter Gallery 应用程序有一个 FullScreenDialog 的示例。
您可以使用以下代码打开对话框:
Navigator.of(context).push(new MaterialPageRoute<Null>(
builder: (BuildContext context) {
return Dialog();
},
fullscreenDialog: true
));
还可以查看此博客文章了解更多:
希望它能帮到您。
SafeArea
小部件。 - ibhavikmakwana您可以使用 FractionallySizedBox 并将 isScrollControlled 设置为 true 来控制高度。
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return FractionallySizedBox(
heightFactor: 0.9,
child: Container(),
);
});
showModalBottomSheet
并设置了isScrollControlled: true
,一切都没有任何问题。拖动关闭功能仍然正常工作。 - undefined如果您使用isScrollControlled: true
调用showModalBottomSheet()
,则对话框将被允许占据整个高度。
要根据内容调整高度,您可以像往常一样使用Container
和Wrap
小部件进行操作。
示例:
final items = <Widget>[
ListTile(
leading: Icon(Icons.photo_camera),
title: Text('Camera'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.photo_library),
title: Text('Select'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.delete),
title: Text('Delete'),
onTap: () {},
),
Divider(),
if (true)
ListTile(
title: Text('Cancel'),
onTap: () {},
),
];
showModalBottomSheet(
context: context,
builder: (BuildContext _) {
return Container(
child: Wrap(
children: items,
),
);
},
isScrollControlled: true,
);
对我有用的是将模态框的内容包裹在DraggableScrollableSheet
中返回:
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
isScrollControlled: true,
isDismissible: true,
builder: (BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.75, //set this as you want
maxChildSize: 0.75, //set this as you want
minChildSize: 0.75, //set this as you want
expand: true,
builder: (context, scrollController) {
return Container(...); //whatever you're returning, does not have to be a Container
}
);
}
)
我猜最简单的方法是:
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) => Wrap(children: [YourSheetWidget()]),
);
来自:
BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
minWidth: constraints.maxWidth,
maxWidth: constraints.maxWidth,
minHeight: 0.0,
maxHeight: constraints.maxHeight * 9.0 / 16.0
);}
to
BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
minWidth: constraints.maxWidth,
maxWidth: constraints.maxWidth,
minHeight: 0.0,
maxHeight: constraints.maxHeight
);}
BottomSheet 的默认高度为屏幕大小的一半。如果您想让 BottomSheet 根据您的内容动态地扩展。
showModalBottomSheet<dynamic>(
isScrollControlled: true,
context: context,
builder: (BuildContext bc) {
return Wrap(
children: <Widget>[...]
)
}
)
FractionallySizedBox
控制高度,并将 useSafeArea
设置为 true
,以获取没有刘海的准确可用高度。 showModalBottomSheet(
context: context,
isScrollControlled: true,
useSafeArea: true,
builder: (_) {
return FractionallySizedBox(
heightFactor: 0.85,
child: Container(),
);
},
);
showModalBottomSheet(
context: context,
constraints: BoxConstraints(minHeight: context.mediaQuerySize.height * .9, maxHeight: context.mediaQuerySize.height * .9),
isScrollControlled: true,
builder: (context) => YourWidget(),
)
DraggableScrollableSheet
来调整底部面板的高度并处理滚动: showModalBottomSheet(
context: context,
useRootNavigator: true,
isScrollControlled: true,
enableDrag: true,
builder: (_) {
return DraggableScrollableSheet(
minChildSize: minSize,
maxChildSize: maxSize,
expand: false,
initialChildSize: initSize,
builder: (context, scrollController) {
return YourWidget();
},
);
},
);