Hit*_*goi 3 flutter flutter-layout
我在下面的代码中有一个底部表格,其中我将高度设置为300.0,但是当用户滚动时我想将高度增加到全屏..我该怎么做..请
void _showBottomSheet() {
setState(() {
_showPersBottomSheetCallBack = null;
});
_scaffoldKey.currentState
.showBottomSheet((context) {
return new Container(
height: 300.0,
color: Colors.greenAccent,
child: new Center(
child: new Text("Hi BottomSheet"),
),
);
})
.closed
.whenComplete(() {
if (mounted) {
setState(() {
_showPersBottomSheetCallBack = _showBottomSheet;
});
}
});
}
Run Code Online (Sandbox Code Playgroud)
颤振包装的底片并不意味着要占据整个屏幕,尽管稍作调整可以产生您期望的行为。如果查看BottomSheet构造函数,则会发现以下内容:
@override
BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return new BoxConstraints(
minWidth: constraints.maxWidth,
maxWidth: constraints.maxWidth,
minHeight: 0.0,
maxHeight: constraints.maxHeight * 9.0 / 16.0
);
}
Run Code Online (Sandbox Code Playgroud)
如果删除9.0 / 16.0高度限制,则底部工作表将占据整个屏幕的高度。
如果您想要的只是全屏底部表格(如@edmond 所示),您现在可以使用isScrollControlled: true而无需维护自己的BottomSheet.
无论如何,问题是首先将工作表加载到半高,并能够在滚动时扩展到全高。对于那个细粒度的控件,您仍然需要使用isScrollControlled: true,但您也可以将模态表的内容包装在DraggableScrollableSheet. 这个 Github 评论向您展示了如何做到这一点,我在这里复制以供参考:
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.5, // half screen on load
maxChildSize: 1, // full screen on scroll
minChildSize: 0.25,
builder: (BuildContext context, ScrollController scrollController) {
return Container(
color: Colors.white,
child: ListView.builder(
controller: scrollController,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
);
},
);
},
);
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2443 次 |
| 最近记录: |