android - Problem in body height in SlidingUpPanel flutter
问题描述
Not all list are visible in body under SlideUpPanel
In list I am having 83 items but last 2~3 items are not visible
SlidingUpPanel(
minHeight: 50,
body: Container(
height: MediaQuery.of(context).size.height-100, //No effect
child: ListView.builder(
itemCount: dataBox.values.length,
itemBuilder: (context, i){
return ListTile(...);
}
)
),
panel: Container(
color: Colors.black,
),
)
解决方案
If you go into the source code of SlidingUpPanel
, you can see that it is using the screen size to set the width and height of the body:
// Inside SlidingUpPanel's build() method:
// ... other lines
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: widget.body,
),
// ... other lines
This is why when you add an AppBar and other elements in the screen, it will reposition the body but the body's height is still equal to the screen height. One workaround is to use a Stack instead of setting the body
of the SlidingUpPanel. Something like:
@override
build(context) {
var _collapsedHeight = 50.0;
return Stack(
children: [
Container(
// Set the padding to display above the panel
padding: EdgeInsets.only(bottom: _collapsedHeight),
child: ListView.builder(
itemCount: dataBox.values.length,
itemBuilder: (context, i){
return ListTile(...);
}
)
),
SlidingUpPanel(
minHeight: _collapsedHeight,
panel: Container(
color: Colors.black,
),
),
],
);
}
推荐阅读
- php - 消息:无法连接到 Pusher 异常:“Illuminate\Broadcasting\BroadcastException”
- python-3.x - 如何使用漂亮的汤和python更新xml标签内的名称
- c# - IValueConverter 在将项目添加到列表时不会“转换”
- python - 在 Visual Studio Code 中找不到 Pandas,即使它肯定在 env 中
- python - 包括 lambdas 的配置文件
- c# - Azure Maps - 渲染 - 获取地图图像 - 如何将多种颜色应用于不同的引脚
- javascript - 如何将 Vue JS 'this.somestate' 作为文字'this.somestate' 传递
- postgresql - 无法使用 docker 连接到 ipv6 中的 postgres
- vb.net - Telegram webhook 不发送任何帖子消息
- javascript - 在 konva.js 中缩放阶段时不影响元素位置