当我的键盘处于活动状态时，如何避免背景图像缩小？答案

【问题标题】：How can I avoid the background image to shrink when my keyboard is active?当我的键盘处于活动状态时，如何避免背景图像缩小？
【发布时间】：2019-03-05 11:39:03
【问题描述】：

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

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

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

closed keyboard active keyboard

【问题讨论】：

使用 resizeToAvoidBottomInset: false，resizeToAvoidBottomPadding 已弃用。 Flutter login page with background Example -

标签： dart flutter

【解决方案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",
          ),
        ),
      ],
    ),
  ),
);

【讨论】：

【解决方案2】：

您可以从Scaffold 使用属性resizeToAvoidBottomPadding：

Scaffold(
     resizeToAvoidBottomPadding: false,
     ...

【讨论】：

这很好用，但是如果我有内容还想滚动怎么办？假设我有带有 TextFormField 的表单，我想在键盘上方看到它 - 所以它需要用键盘向上滚动。有什么想法吗？
@ŽanFras，请查看stackoverflow.com/a/70428060/2646022 获取带有静态背景图片的可滚动屏幕

【解决方案3】：

将 UI 保持在键盘上方是 Flutter 的默认功能，因此如果您设置 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 否则，您将无法看到您的背景图片

【讨论】：