2

你们如何解决以下 Flutter 布局?

我有一个屏幕,我必须在其中显示,如图所示:一个徽标 + 3 个 TextFormFields + 2 个按钮 + 一个容器。

在此处输入图像描述

问题:

  1. 我需要将所有小部件放在 aColumn和 aSingleChildScrollView中,这样,当键盘弹出时,它不会覆盖TextFields.
  2. 最后一个小部件 ,Container应占用底部所有剩余的屏幕空间,但不会超过屏幕大小。为此,我的想法是使用Expanded小部件,以便容器可以扩展到屏幕底部,但这会产生错误:

The following assertion was thrown during performLayout(): RenderFlex children have non-zero flex but incoming height constraints are unbounded.

所以我想我的问题,简而言之,我如何防止键盘覆盖 TextFields,同时我强制容器占用底部的所有剩余空间。

那是我的尝试:

SingleChildScrollView(
        child: Column(
      children: [
        Image.asset("assets/images/appLogo.png"),
        TextFormField(),
        TextFormField(),
        TextFormField(),
        Row(children: [TextButton(), TextButton()]),
        Expanded(child: Container())
      ],
    ));
4

1 回答 1

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())
  ],
));

我希望这对你有用。

于 2021-06-18T08:45:53.087 回答