键盘的背景和 SingleChildScrollView 问题答案

【问题标题】：Background and SingleChieldScrollView problem with keyboard键盘的背景和 SingleChildScrollView 问题
【发布时间】：2019-12-17 16:58:05
【问题描述】：

每次我打开键盘时，图像都会根据键盘上方的屏幕尺寸进行缩放，而不是在设备的整个屏幕上。我的代码如下，我该如何解决？因为如果我不放 SingleChieldScrollView 它将显示黄色像素警报横幅。

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("imgs/bgLogin.jpg"), fit: BoxFit.cover)),
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints viewportConstraints) {
            return SingleChildScrollView(
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: viewportConstraints.maxHeight,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      child: Column(
                        children: <Widget>[
                          Text("Bem Vindo ao,", style: TextStyle(fontSize: 32)),
                          Text("MedPAD", style: TextStyle(fontSize: 52))
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                          left: 15.0, right: 15.0, top: 50.0, bottom: 5.0),
                      child: TextField(
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                            labelText: "E-Mail", border: OutlineInputBorder()),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                          left: 15.0, right: 15.0, top: 5.0, bottom: 15.0),
                      child: TextField(
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                            labelText: "Senha", border: OutlineInputBorder()),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                          left: 15.0, right: 15.0, top: 5.0, bottom: 15.0),
                      child: TextField(
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                            labelText: "Senha", border: OutlineInputBorder()),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 75.0, right: 75.0),
                      height: 50.0,
                      child: RaisedButton(
                        color: Colors.red,
                        onPressed: () {},
                        child: Text(
                          "Entrar",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    )
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-animation flutter-test flutter-sliver

【解决方案1】：

在您的代码中，您需要在Scaffold 中添加-resizeToAvoidBottomPadding: false,

代码：

.....
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,  /// Add this
      body: Container(
    .....

【讨论】：