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

Posted 2023-02-23

【中文标题】带有背景图像和表单的 Flutter Stack

【英文标题】：Flutter Stack with background image and form

【发布时间】：2020-05-09 01:18:17

【问题描述】：

我有一个屏幕，其中背景图像设置为填满整个屏幕，除此之外，还有输入字段。当我单击 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
                  ]),
            )
          ],
        )));
      
    

【问题讨论】：

尝试在你的脚手架中设置 resizeToAvoidBottomInset: false

我试过了，但是后来键盘在第三个FormField()上面看不到文字了。

【参考方案1】：

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