键盘处于活动状态时如何避免背景图像缩小？

Question

我想要一个带有文本输入的背景图像，但是我不知道应该使用哪个小部件来避免键盘处于活动状态时背景图像缩小。

在这里，您可以找到问题的两个屏幕截图以及我的代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var backgroundImage = new BoxDecoration(
        image: new DecorationImage(
            image: new AssetImage('assets/forest.jpg'), fit: BoxFit.cover));

    return new MaterialApp(
        home: new Scaffold(
            body: new Stack(
      children: <Widget>[
        new Container(
          decoration: backgroundImage,
        ),
        new TextField()
      ],
    )));
  }
}

封闭式键盘 活动键盘

Answer 1

将 Container 放在 Scaffold 之外，并使用背景图片将 Scaffold 作为 Container 的子代。

return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/bg.png'),
      fit: BoxFit.cover,
    ),
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    body: ListView(
      children: <Widget>[
        TextFormField(
          decoration: InputDecoration(
            hintText: "Email",
          ),
        ),
      ],
    ),
  ),
);

Answer 2

这是 flutter 的默认功能，将 UI 保持在键盘上方，因此如果您设置，resizeToAvoidBottomInset : false您将失去将 UI 组件保持在键盘上方的功能

要在应用程序中有背景图像，而不是缩小它，更好的方法是这样做

Container(
decoration: BoxDecoration(
color: primaryColor,                                       // background color
image: DecorationImage(image: AssetImage(AppImages.appBg)),// background image above color
),
child: SafeArea(
child: Scaffold(
backgroundColor: Colors.transparent,                      //**IMPORTANT**
body: //All Ui code here//),
),

必须设置Scaffold backgroundColor: Colors.transparent否则，你将 无法看到背景图片

Answer 3

您可以使用属性resizeToAvoidBottomPadding来自Scaffold：

Scaffold(
     resizeToAvoidBottomPadding: false,
     ...