flutter - Flutter - 底部溢出 XX 个像素

问题描述

所以我正在学习Flutter。到目前为止，构建跨平台应用程序令人着迷。我有一个问题不断出现。如何让我的应用真正“响应式”？按照 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 上会出现问题（即使在纵向模式下）。

链接到图片

任何形式的帮助将不胜感激。谢谢！

标签： flutterresponsive-designflutter-layout

flutter - Flutter - 底部溢出 XX 个像素

问题描述

解决方案

推荐阅读