Use the DraggableScrollableSheet
小部件与Stack
widget:
这是gist https://gist.github.com/rohan20/869492358cbb15311538f069a0c749af对于此^ GIF 中的整个页面,或尝试Codepen https://codepen.io/rohantaneja/pen/JjYgPzm.
整个页面的结构如下:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
CustomGoogleMap(),
CustomHeader(),
DraggableScrollableSheet(
initialChildSize: 0.30,
minChildSize: 0.15,
builder: (BuildContext context, ScrollController scrollController) {
return SingleChildScrollView(
controller: scrollController,
child: CustomScrollViewContent(),
);
},
),
],
),
);
}
In the Stack
:
- 谷歌地图是最下层。
- 标题(搜索字段+水平滚动条)位于地图上方。
- DraggableBottomSheet 位于标题上方。
一些有用的参数定义在draggable_scrollable_sheet.dart
:
/// The initial fractional value of the parent container's height to use when
/// displaying the widget.
///
/// The default value is `0.5`.
final double initialChildSize;
/// The minimum fractional value of the parent container's height to use when
/// displaying the widget.
///
/// The default value is `0.25`.
final double minChildSize;
/// The maximum fractional value of the parent container's height to use when
/// displaying the widget.
///
/// The default value is `1.0`.
final double maxChildSize;
编辑:谢谢@亚历杭德罗 https://stackoverflow.com/questions/52403709/partially-viewable-bottom-sheet-flutter/62089808?noredirect=1#comment121601194_62089808用于指出小部件名称中的拼写错误:)