你们是如何解决以下 Flutter 布局的??
我有一个屏幕,我必须在其中显示,如图所示:一个徽标 + 3 个 TextFormFields + 2 个按钮 + 一个容器。
问题:
Column
中,将 Column 放在 SingleChildScrollView
中,以便在键盘弹出时不会覆盖 TextFields
。立>
Container
将占据底部所有剩余的屏幕空间,但不会超过屏幕尺寸。为此,我的想法是使用 Expanded
小部件,以便容器可以扩展到屏幕底部,但这会产生错误:The following assertion was thrown during performLayout(): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
所以我想我的问题,简而言之,我如何防止键盘覆盖文本字段,同时我强制容器占用底部的所有剩余空间。
那是我的尝试:
SingleChildScrollView(
child: Column(
children: [
Image.asset("assets/images/appLogo.png"),
TextFormField(),
TextFormField(),
TextFormField(),
Row(children: [TextButton(), TextButton()]),
Expanded(child: Container())
],
));
答案 0 :(得分:2)
Expanded
不知道需要多大的尺寸。其他孩子也不知道他们的确切尺寸。
将您的图像包裹在容器中并为其指定高度和宽度。还可以尝试将所有文本字段都包装在一个列或容器中。
SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).Size.width * 0.4,
height: MediaQuery.of(context).Size.height * 0.2,
child: Image.asset("assets/images/appLogo.png"),
),
Column(
children: [
TextFormField(),
TextFormField(),
TextFormField(),]
)
Row(children: [TextButton(), TextButton()]),
Expanded(child: Container())
],
));
我希望这对你有用。