android - flutter 。屏幕上的空白

标签 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 可能有效,但我遇到了键盘问题。

也许还有另一种方法。

我坚持下去了。

谢谢。

最佳答案

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

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

关于android - flutter 。屏幕上的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56048492/

相关文章:

android - 使用搜索栏同时播放两个媒体播放器对象,调整两个媒体播放器的音量

java - 如何处理fcm通知数据而不需要点击android中的通知弹出窗口

ios - 有一个 Cupertino 导航来显示应用程序栏,但需要有结束抽屉

java - 未处理的异常 : PlatformException (sign_in_failed, com.google.android.gms.common.api.ApiException : 10: , null, null) - 在一个系统中运行良好

async-await - Flutter 在 main 中读取共享首选项,然后决定哪个启动页面?

flutter - dart中字符串的数学表达式

c# - 使用 Xamarin Android 连接到蓝牙扫描仪

android - 如何从 TextView 上的 OnClick 事件在浏览器中启动 URL?

sorting - Flutter:-如何对自定义列表进行排序

firebase - Flutter,是否可以在没有窗口小部件构建方法的情况下在功能中使用Firestore Stream Builder?