扑。屏幕上的空白

时间:2019-05-08 20:21:18

标签: android dart flutter

enter image description here

我的代码是

Widget build(BuildContext context) {

final logo = Image.asset("assets/images/logo.png", fit: BoxFit.fitWidth);
final emailField = TextField(
  obscureText: false,
  decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
      labelText: "Email",
      fillColor: Colors.white,
      border:
      OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
        borderSide: BorderSide(),
      )
  ),
);
final passwordField = TextField(
  obscureText: true,
  decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
      labelText: "Password",
      border:
      OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
        borderSide: BorderSide()
      )
  ),
);
final loginButton = Material(
  elevation: 5.0,
  borderRadius: BorderRadius.circular(13.0),
  color: Color.fromARGB(255, 40, 97, 143),
  child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
    onPressed: () {},
    child: Text("Login",
        textAlign: TextAlign.center,
        style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold
        )
    ),
  ),
);

final background = BoxDecoration(
  image: DecorationImage(
    image: ExactAssetImage("assets/images/background .png"),
    fit: BoxFit.cover,
    colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.5), BlendMode.dstATop)
  ),
);

return Scaffold(
  body: SingleChildScrollView(
    child: Container(
      decoration: background,
      padding: EdgeInsets.all(25.0),
      alignment: Alignment.topCenter,
      child: Column(
        children: <Widget>[
          SizedBox(height: 85.0,),
          logo,
          SizedBox(height: 130.0,),
          emailField,
          SizedBox(height: 20.0,),
          passwordField,
          SizedBox(height: 20.0,),
          loginButton
        ],
      ),
    ),
  )
);
}

我不知道如何删除空格,任何人都可以向我解释我的代码有什么问题吗?

我添加了 SingleChildScrollView ,因为如果不使用它,键盘会隐藏文本字段,但是如果没有 SingleChildScrollView ,我不会得到空格。

删除 SingleChildScrollView 可以,但是键盘出现问题。

也许是另一种方式。

我坚持下去。

谢谢。

1 个答案:

答案 0 :(得分:1)

您将使用那些用作分隔符的SizedBox遇到一些问题。但是您可以删除该空白区域,以增加主容器的高度。
像这样的东西:

Container(
        height: MediaQuery.of(context).size.height, // add this line
        decoration: background,
        padding: EdgeInsets.all(25.0),
        alignment: Alignment.topCenter,