扑动-底部溢出XX像素

Question

所以我在学习Flutter。到目前为止，开发跨平台应用让人感觉很有趣。我一直担心一个问题。如何让我的应用真正"响应性强"?我曾尝试使用MediaQuery尽可能建议在扑动文档。有人可以看看我的代码，指出导致这个问题的缺陷吗?

这是基本的登录页面代码:

import 'package:flutter/material.dart';
class MyLoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return (Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Text("Welcome"),
),
body: Container(
child: ListView(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 3.5,
decoration: BoxDecoration(
color: Colors.blue[100],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(90),
),
image: DecorationImage(
alignment: Alignment.center,
scale: 1.5,
image: AssetImage('assets/logo.png'),
)),
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 2,
margin: EdgeInsets.all(MediaQuery.of(context).size.width / 20),
decoration: BoxDecoration(
color: Colors.blue[0],
),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text(
'Please Login',
style: TextStyle(color: Colors.blue, fontSize: 24),
),
),
Padding(
padding: EdgeInsets.all(
MediaQuery.of(context).size.height / 100)),
Container(
child: TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(90.0),
),
),
filled: true,
hintStyle: new TextStyle(color: Colors.grey[800]),
hintText: "Username",
fillColor: Colors.white70),
),
),
Padding(
padding: EdgeInsets.all(
MediaQuery.of(context).size.height / 200)),
Container(
child: TextField(
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(90.0),
),
),
filled: true,
hintStyle: new TextStyle(color: Colors.grey[800]),
hintText: "Password",
fillColor: Colors.white70),
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.width / 50,
right: MediaQuery.of(context).size.width / 50),
child: Text(
'Forgot Password ?',
style: TextStyle(color: Colors.grey[600]),
),
),
),
Padding(
padding: EdgeInsets.all(
MediaQuery.of(context).size.height / 12)),
ButtonTheme(
minWidth: MediaQuery.of(context).size.width / 2.5,
height: MediaQuery.of(context).size.width / 6,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)),
onPressed: () {},
child: Text(
'Login',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
],
))
],
),
),
));
}
}

正如你所看到的，它在iPhone上运行时没有这个问题(在横向模式下会出现这个问题)，但在Android上却有问题(即使在纵向模式下)。

链接到图片

任何形式的帮助将是非常感激的。谢谢!

Answer 1

问题是，你有'请登录'的文本，文本字段和按钮到同一个Container与height溢出。如果你删除该容器的height属性，问题就解决了。