Flutter：出现键盘时背景图像正在挤压答案

【问题标题】：Flutter: Background image is squeezing when keyboard appearsFlutter：出现键盘时背景图像正在挤压
【发布时间】：2019-02-11 11:08:44
【问题描述】：

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

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))),

                    ],
                  ),
                ),
              ),


          ],
        )

    )

【问题讨论】：

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

标签： android dart flutter

【解决方案1】：

或者你应该使用 Scaffold 参数

resizeToAvoidBottomInset: false

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

【讨论】：

这对我有用，我认为这是迄今为止最好的解决方案......，谢谢你

【解决方案2】：

如果您的布局在 ScrollView 中包含 TextField，则 resizeToAvoidBottomInset: false 使您无法 scroll。你可以这样做来修复它：

用Container 包裹Scaffold。将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-------------

【讨论】：

【解决方案3】：

将resizeToAvoidBottomInset: false 属性添加到脚手架。

到脚手架

 Scaffold(
       resizeToAvoidBottomInset: false,
       body: BodyWidget
    )

【讨论】：

【解决方案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.
        );

【讨论】：

仍在挤压背景
@farhana，我很遗憾错过了 BoxFit 代码。查看更新的答案:)
我更改 fit: BoxFit.fill 现在它正在工作，我也更新了你的代码

【解决方案5】：

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

【讨论】：

【解决方案6】：

在 SingleChildScrollView 中包装它们（BG 图像，正面）就可以了

【讨论】：

我看到你是新来的请在回答问题时添加代码sn-p或更多详细信息

【解决方案7】：

resizeToAvoidBottomPadding = false 通过在脚手架中设置此属性解决。

Scaffold(
      resizeToAvoidBottomPadding: false,
)

【讨论】：