Question

我正在实现登录屏幕，但是当出现键盘时，许多组件坏了。此外，如果我使用ListView来处理此问题，那是不自然的。

因此，我想像下面这样。 FACEBOOK的灵活登录屏幕。

此实现有任何提示吗？我想展示我尝试过的源代码，但这有点复杂，我只是想重点说明一下。

我想知道的

如何检测是否选择了TextField或出现了键盘？
我尝试了SliverAppBar，但它仅与ScrollView相关，不适用于登录屏幕，该怎么办？

Answer 1

您可以尝试 WillPopScope 小部件。然后在 onWillPop 方法的方法调用中将imageview替换为较小的imageview。还有一些优雅的解决方案，例如使用silverappbar。

Answer 2

您可以使用此属性并将此行添加到Scaffold中：

resizeToAvoidBottomPadding：否，

Answer 3

将您的全身小部件放入ListView。它的工作方式灵活

body: new ListView(
        children: <Widget>[
          new Container(
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              color: Colors.white,
              image: DecorationImage(
                colorFilter: new ColorFilter.mode(
                    Colors.black.withOpacity(0.05), BlendMode.dstATop),
                image: AssetImage('image'),
                fit: BoxFit.cover,
              ),
            ),
            child: new Column(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(120.0),
                  child: Center(
                    child: Icon(

                      color: Colors.Green),
                      size: 50.0,
                    ),
                  ),
                ),
                new Row(
                  children: <Widget>[
                    new Expanded(
                      child: new Padding(
                        padding: const EdgeInsets.only(left: 40.0),
                        child: new Text(
                          "EMAIL",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Color.green,
                            fontSize: 15.0,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                new Container(
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                          color: Colors.green,
                          width: 0.5,
                          style: BorderStyle.solid),
                    ),
                  ),
                  padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                  child: new Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      new Expanded(
                        child: TextField(
                          controller: myControlleremail,
                          obscureText: false,
                          textAlign: TextAlign.left,
                          decoration: InputDecoration(
                            labelStyle: TextStyle(color: Colors.black,fontSize: 16.0),
                            border: InputBorder.none,
                            hintText: 'xxxxxxxx@xyz.com',
                            hintStyle: TextStyle(color: Colors.grey),
                          ),
                        ),
                      ),

                    ],
                  ),
                ),
                Divider(
                  height: 24.0,
                ),
                new Row(
                  children: <Widget>[
                    new Expanded(
                      child: new Padding(
                        padding: const EdgeInsets.only(left: 40.0),
                        child: new Text(
                          "PASSWORD",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Color(getHexColorCode.getColorHexFromStr('#FDD148')),
                            fontSize: 15.0,
                          ),
                        ),
                      ),
                    ),

                  ],
                ),
                new Container(
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                          color: Color(getHexColorCode.getColorHexFromStr('#FDD148')),
                          width: 0.5,
                          style: BorderStyle.solid),
                    ),
                  ),
                  padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                  child: new Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      new Expanded(
                        child: TextField(
                          controller: myControllerpswd,
                          obscureText: _obscureText,
                          textAlign: TextAlign.left,
                          decoration: InputDecoration(
                            labelStyle: TextStyle(color: Colors.black,fontSize: 16.0),
                            border: InputBorder.none,
                            hintText: '*********',
                            hintStyle: TextStyle(color: Colors.grey),
                          ),
                        ),
                      ),
                      new IconButton(
                          onPressed: _toggle,
                          icon: Image.asset(_obscureText ? 'assets/show.png': 'assets/hide.png'),
                          color:Colors.green,
                          iconSize: 10,
                      ) 
                    ],
                  ),
                ),
                Divider(
                  height: 24.0,
                ),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(right: 20.0),
                      child: new FlatButton(
                        child: new Text(
                          "Forgot Password?",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.green,
                            fontSize: 15.0,
                          ),
                          textAlign: TextAlign.end,
                        ),
                        onPressed: () => {},
                      ),
                    ),
                  ],
                ),
                new Container(
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
                  alignment: Alignment.center,
                  child: new Row(
                    children: <Widget>[

                      new Expanded(
                        child: new FlatButton(
                          shape: new RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(30.0),
                          ),
                          color: Colors.green,
                          onPressed:()
                          {
                            _scaffoldKey.currentState.showSnackBar(
                                new SnackBar(duration: new Duration(seconds: 4), content:
                                new Row(
                                  children: <Widget>[
                                    new CircularProgressIndicator(),
                                    new Text("  Signing-In...")
                                  ],
                                ),
                                ));
                           UserLogin(myControlleremail.text, myControllerpswd.text, context);
                          },

                          child: new Container(
                            padding: const EdgeInsets.symmetric(
                              vertical: 20.0,
                              horizontal: 20.0,
                            ),
                            child: new Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new Expanded(
                                  child: Text(
                                    "LOGIN",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                  ),

                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),

              ],
            ),
          )
        ],
      ),

尝试这样。

如何在抖动中实现灵活的登录屏幕？

3 个答案: