gpt4 book ai didi

Flutter SingleChildScrollView with Expanded

转载 作者:行者123 更新时间:2023-12-04 07:29:29 60 4
gpt4 key购买 nike

你们如何解决以下 Flutter 布局?
我有一个屏幕,我必须在其中显示,如图所示:一个 Logo + 3 个 TextFormFields + 2 个按钮 + 一个容器。
enter image description here
问题:

  • 我需要将所有小部件放入 Column并且,SingleChildScrollView 中的列这样,当键盘弹出时,它不会覆盖 TextFields .
  • 最后一个小部件 Container , 应占用底部的所有剩余屏幕空间,但不会超过屏幕大小。为此,我的想法是使用 Expanded小部件,以便 Container 可以扩展到屏幕底部,但这会给出错误:
  • 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())
    ],
    ));

    最佳答案

    Expanded不知道要带多大的尺寸。其他 child 也不知道他们的确切大小。
    将您的图像包装在容器中并为其指定高度和宽度。还可以尝试将所有文​​本字段分别包装在一个列或容器中。

    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())
    ],
    ));
    我希望这对你有用。

    关于Flutter SingleChildScrollView with Expanded,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68032025/

    60 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com