【发布时间】:2021-08-12 14:38:53
【问题描述】:
假设有一个始终适合其子级大小的 Column 小部件。 ContentWidget 是一个动态大小的小部件。当高度小于屏幕尺寸时,ContentWidget 会显示其高度;并且当它的高度达到屏幕大小溢出时将允许滚动。
有什么方法可以获得这个布局吗?
我遇到过这种设计很多次,我使用过的最简单的解决方案是在构建期间使用 MultiChildLayout 来获取高度并再次调用它的重建,但这不是一个好的解决方案,因为这需要绘制一次.只是想知道是否有更精确的方法可以做到这一点。谢谢!
例如。
白色背景是整个屏幕。 红+黄是列
红色+黄色显示为它的高度,除非黄色太高以至于Column(红色+黄色)大于屏幕(白色区域),然后黄色部分将是可滚动的
更新: 我试过下面的代码,但是 singleChildScrollView 会溢出底部。你有什么建议吗?
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
Text('header'),
SingleChildScrollView(
child: Text(
'long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text')),
Text('footer'),
],
),
);
}
}
【问题讨论】:
-
不是 100% 确定我理解您的问题。布局问题通常有助于显示问题的图片并在问题的上下文中表达问题。而不是要求一个可能实际上不是实现目标的正确方法的特定 a/b。如果您修改,很高兴再看一遍。
-
谢谢你,@Kent。希望这对您来说更容易理解。 :-)
-
Tran 给出了正确答案。见他的下文。您只需将滚动视图放在 CenterWidget 中。因为页脚是固定的,所以您无需担心大小。如果页脚需要在 CenterWidget 大小上加深,那将更加困难。
-
@Kent,这个方法在溢出时似乎无法滚动。你有什么建议吗?谢谢!
-
将中心小部件包裹在单个子滚动视图中