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

                    ],
                  ),
                ),
              ),


          ],
        )

    )

Answer 1

或者您应该使用Scaffold参数

resizeToAvoidBottomInset = false

Scaffold(
   resizeToAvoidBottomInset: false,
   body: ...your widgets ...
)

Answer 2

看起来您只需要移动背景图像即可成为父窗口小部件。即

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.
        );

Answer 3

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

Answer 4

如果您的版式在ScrollView中包含TextField，则resizeToAvoidBottomInset: false将使您无法scroll。您可以通过以下方法进行修复：

用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-------------

Answer 5

将它们（BG 图像，正面）都包裹在 SingleChildScrollView 中即可

颤动：出现键盘时背景图像被挤压

5 个答案: