时间戳

首页 > 解决方案 > 键盘打开时 Flutter 中的溢出错误

dart - 键盘打开时 Flutter 中的溢出错误

问题描述

我正在设计一个登录页面，当我单击它打开键盘的任何文本表单字段并通过像这样的溢出警告时溢出，请参见附图。我还想要一个凸起的按钮图标应该在按钮的右侧。

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();
                            }, ),)],),),)],)],),),);

初始状态

错误/溢出状态

标签： dartflutterflutter-layout

解决方案

将以下属性设置为false

Scaffold(
  resizeToAvoidBottomInset: false, 
  ... 
)

如果您遇到溢出错误的问题，请使用SingleChildScrollView它。

Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  body: SingleChildScrollView(child: YourBody()),
)

PS：如果你喜欢在键盘打开时滚动你的小部件，你可以看看这个答案

推荐阅读