我正在设计一个登录页面,当我点击任何文本表单字段时,它会打开keyboard,并通过溢出警告,如下图所示.

Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                  image: new DecorationImage(
                      image: new AssetImage('assets/login_page_bg_1.jpg'),
                      fit: BoxFit.cover,
                      colorFilter: new ColorFilter.mode(
                          Colors.black.withOpacity(0.55), BlendMode.dstATop))),
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    margin: new EdgeInsets.only(top: 42.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.asset('assets/logo.png',
                            width: 250.0, height: 200.21),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    margin: new EdgeInsets.only(bottom: 40.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        //form filed goes here
                        Text('Login As User',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 35.0)),
                        TextFormField(
                            keyboardType: TextInputType.emailAddress,
                            decoration: InputDecoration(
                              hintText: 'you@example.com',
                              labelText: 'Email Address',
                            ),
                        new Container(
                          // width: MediaQuery.of(context).size.width,
                          child: RaisedButton.icon(
                            color: Color.fromARGB(251, 188, 74, 1),
                            label: Text('LOGIN'),
                            icon: Icon(Icons.send,
                                size: 10.0, color: Colors.black),
                            onPressed: () {
                              this.submit();
                            }, ),)],),),)],)],),),);

Intital state

Error/overflowed State

推荐答案

之所以会发生这种情况,是因为当键盘出现在屏幕上时,要绘制的画布的高度会降低.一种解决方案是将根容器包装在SingleChildScrollView中,如下所示:

Widget build(BuildContext context) {
return Scaffold(
      body: SingleChildScrollView(
          child: Stack(
            fit: StackFit.loose,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    image: new DecorationImage(
                        image: new AssetImage('assets/login_page_bg_1.jpg'),
                        fit: BoxFit.cover,
                        colorFilter: new ColorFilter.mode(
                            Colors.black.withOpacity(0.55), BlendMode.dstATop)
                            )
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  SizedBox(height: 42,),
                  Expanded(
                    flex: 1,
                    child: Center(
                      child:
                        Image.asset('assets/logo.png',
                            width: 250.0, height: 200.21),
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                        //form filed goes here
                        Text('Login As User',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 35.0)),
                    TextFormField(
                      keyboardType: TextInputType.emailAddress,
                      decoration: InputDecoration(
                        hintText: 'you@example.com',
                        labelText: 'Email Address',
                      )
                    ),
                      new Container(
                        // width: MediaQuery.of(context).size.width,
                        child: RaisedButton.icon(
                          color: Color.fromARGB(251, 188, 74, 1),
                          label: Text('LOGIN'),
                          icon: Icon(Icons.send,
                              size: 10.0, color: Colors.black),
                          onPressed: () {
                            //this.submit();
                          }, ),)],)),
                  SizedBox(height: 40,)
            ],)],),));

当内容的高度超过视口的可用高度时,它将使您的屏幕可滚动.

Flutter相关问答推荐

如何在SingleChildScrollView中使用GridView

如何创建一个按钮来在Ffltter Webview中转到上一页?

ReCAPTCHA Enterprise中的严重安全漏洞

如何实现Flutter 梳理机图像的小量移动

将侧边菜单和底部导航栏放在同一Flutter 应用程序中

如何在Flutter 中使用滚动展开窗口小部件

Flutter如何将2个以上的值传递到ListView上的另一个屏幕?

如何将小部件代码移动到另一个文件以获得更好的可读性

在 Flutter 中使用条件语句设置 ImageProvider Object 类型的背景图像

Flutter CarouselSlider中如何防止右图与放大的中心图重叠?

运行任何 flutter 命令都会显示无法安装 <版本>

模块是使用不兼容的 kotlin 版本编译的.其元数据的二进制版本是1.8.0,预期版本是1.6

'type' Icon '不是类型' IconData '的子类型

如何在Flutter中动态绘制一条从A点到B点的线?

ListView 后台可见

Flutter - 我需要显示文本,但应用程序不需要

如何在 Flutter 中使用简写 IF 禁用单选按钮?

如何在椭圆形图像周围添加边框?Flutter

如何将变量翻译成其他语言

解密 Modulr 安全令牌