Flutter：当键盘出现时，背景图片会被压缩

Question

键盘出现时背景图片被挤压。

Scaffold(
        body: Stack(
          children: <Widget>[

            Container(
              width:double.infinity ,
              height: double.infinity ,
              child: Image.asset('assets/images/bg.png')),
            Container(
                child: SingleChildScrollView(
                  padding: EdgeInsets.all(width*0.10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      SizedBox(height: height*0.10,),
                      Container(decoration: BoxDecoration(color:Colors.transparent),child: Container(margin: EdgeInsets.only(bottom: height*0.02,left: 20.0,right: 20.0),child: Image.asset('assets/images/logo.png'),),),
                      SizedBox(height: height*0.05,),
                      Container(
                          decoration: BoxDecoration(color: Colors.transparent),
                          child: new Form(
                              key: _formKey,
                              autovalidate: _autoValidate,
                              child: LoginFrom(width,height))),

                    ],
                  ),
                ),
              ),


          ],
        )

    )

- Farhana Naaz Ansari

---

请将正确答案更改为 @gbixahue 的答案。这是最佳答案。谢谢。 - CoderUni

Answer 1

或者你可以使用 Scaffold 的一个参数

resizeToAvoidBottomInset: false

Scaffold(
   resizeToAvoidBottomInset: false,
   body: (your_code)
)

- gbixahue

---

这对我来说是有效的，我认为这是目前最好的解决方案...谢谢。 - broid

Answer 2

如果您的布局中包含 ScrollView 内的 TextField，使用 resizeToAvoidBottomInset: false 会导致您无法滚动。您可以按照以下步骤进行修复：

将 Scaffold 包装在 Container 中，然后将 Scaffold 的背景颜色设置为透明。

@override
 Widget build(BuildContext context) {
  return Container(
   width: MediaQuery.of(context).size.width,
   height: MediaQuery.of(context).size.height,

   decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/images/bg.png'),
        fit: BoxFit.cover,
   )),

   child: Scaffold(
    backgroundColor: Colors.transparent,
    body: Container(
     width: MediaQuery.of(context).size.width,
     height: MediaQuery.of(context).size.height,
     child: SingleChildScrollView(
-----------SingleChildScrollView with TextField-------------

- Doan Bui

Answer 3

在 Scaffold 中添加 resizeToAvoidBottomInset: false 属性。

对于 Scaffold。

 Scaffold(
       resizeToAvoidBottomInset: false,
       body: BodyWidget
    )

- Adnan Khan

Answer 4

看起来你只需要将背景图移动到成为父部件。即：

最初的回答

return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: ExactAssetImage('assets/images/bg.png'),
                  fit: BoxFit.fill,
                  alignment:Alignment.topCenter,
                  ),     
            ),
            child: Stack(
              children: <Widget>[
                Container(
                  child: SingleChildScrollView(
                    padding: EdgeInsets.all(width * 0.10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        SizedBox(
                          height: height * 0.10,
                        ),
                        Container(
                          decoration: BoxDecoration(color: Colors.transparent),
                          child: Container(
                            margin: EdgeInsets.only(
                                bottom: height * 0.02, left: 20.0, right: 20.0),
                            child: Image.asset('assets/images/logo.png'),
                          ),
                        ),
                        SizedBox(
                          height: height * 0.05,
                        ),
                        Container(
                            decoration:
                                BoxDecoration(color: Colors.transparent),
                            child: Container()
                            new Form(
                                key: _formKey,
                                autovalidate: _autoValidate,
                                child: LoginFrom(width, height))
                                ),
                      ],
                    ),
                  ),
                ),
              ],
            )) // This trailing comma makes auto-formatting nicer for build methods.
        );

- F-1

---

仍在压缩背景。 - Farhana Naaz Ansari

@farhana，我的错，我漏掉了BoxFit代码。请查看更新的答案 :) - F-1

我修改了 fit: BoxFit.fill，现在它可以正常工作，同时我也更新了你的代码。 - Farhana Naaz Ansari

Answer 5

height = max(height, MediaQuery.of(context).size.height);
Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.cover,
      image: imageProvider,
    ),
  ),
  height: height,
  child: Scaffold(...),
);

- Александр Харечко

Answer 6

将两个元素（背景图片、前景元素）都包裹在SingleChildScrollView中即可解决问题。

- Abhilash Aima

---

我看到你是新来的。请在回答问题时添加代码片段或更多细节。 - Len_X

Answer 7

如果想要避免底部填充区域自动调整大小，可以在 Scaffold 中设置 resizeToAvoidBottomPadding = false 解决该问题。

Scaffold(
      resizeToAvoidBottomPadding: false,
)

- Nalawala Murtuza

---

该属性不存在。 - Santiago