时间戳

首页 > 解决方案 > 带有背景图像和表单的 Flutter Stack

android - 带有背景图像和表单的 Flutter Stack

问题描述

我有一个屏幕，其中背景图像设置为填充整个屏幕，最重要的是，有输入字段。当我单击 TextFormField 时，会显示键盘并将背景图像推到顶部，这是我不希望的行为。

你知道怎么不顶推图像吗？我认为Form（带有SingleChildScrollView）小部件呈现在屏幕顶部（索引>那个背景图像），所以我不明白为什么图像会变形。有任何想法吗？

代码：

   class LoginScreen extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: Stack(
          children: <Widget>[
            Container(
              width: double.infinity,
              child: Image.asset("imageAsset",
                     fit: BoxFit.fitWidth),
            ),
            SingleChildScrollView(
              child: Form(
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    FormField(), // Example
                    FormField(), // Example
                    FormField(), // Example
                  ]),
            )
          ],
        )));
      }
    }

标签： androidiosflutterstackwidget

解决方案

使用 TextFormField，我推荐使用 ListView 而不是 singleChildScrollView。

class LoginScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
    body: Stack(
  children: <Widget>[
    Container(
      width: double.infinity,
      child: Image.asset("imageAsset", fit: BoxFit.fill),
    ),
    ListView(
      children: <Widget>[
        Form(
          child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                TextFormField(), // Example
                TextFormField(), // Example
                TextFormField(), // Example
              ]),
        ),
      ],
    )
  ],
  ));
  }
  }

推荐阅读