简体   繁体   English

键盘隐藏 TextField - Flutter

[英]Keyboard hides TextField - Flutter

I've made a chat page that contains the header, a MessagesStream and a Row that includes the TextField and RaisedButton .我制作了一个聊天页面,其中包含 header、一个MessagesStream和一个包含TextFieldRaisedButtonRow I've checked every single page there is about this issue, both in GitHub and StackOverflow, but I wasn't able to find any solution.我已经检查了关于这个问题的每一页,包括 GitHub 和 StackOverflow,但我找不到任何解决方案。 The row does not go up when the keyboard is launched, instead it goes over the bottom part of the screen, hiding everything.启动键盘时,该行不会 go 向上,而是越过屏幕底部,隐藏所有内容。

Could anyone please help me figure this out?谁能帮我解决这个问题? I've literally tried everything.我真的尝试了一切。

This is my Scaffold :这是我的Scaffold

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        backgroundColor: Colors.lightGreenAccent,
        appBar: new AppBar(
          backgroundColor: Colors.lightGreenAccent,
          elevation: 0,
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios, color: Colors.white),
            onPressed: () => Navigator.of(context).pop(),
          ),
          centerTitle: true,
          title: Image(
            image: iconApp,
            height: 50,
            width: 50,
          ),
        ),
        body: SafeArea(
          child: Column(
            children: <Widget>[
              SizedBox(height: 10),
              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
                        topRight: Radius.circular(30.0)),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Material(
                        borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
                        topRight: Radius.circular(30.0)),
                        color: grayWhite,
                        elevation: 2,
                        child: Padding(
                          padding: const EdgeInsets.only(bottom:10),
                          child: Row(
                            children: <Widget>[
                              Padding(
                                padding: const EdgeInsets.only(top: 10.0, left: 15),
                                child: CircleAvatar(
                                  child: Image.network(
                                  ),
                                ),
                              ),
                              Container(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Padding(
                                      padding: const EdgeInsets.only(top: 10, left: 15),
                                      child: Text(
                                        "Test",
                                        style: TextStyle(
                                            color: Colors.black54,
                                            fontSize: 20
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(top: 3, left: 15),
                                      child: Text(
                                       "Test2",
                                        style: TextStyle(
                                            color: Colors.black54,
                                            fontSize: 15
                                        ),
                                      ),
                                    ),
                                    Container(
                                      height: 1,
                                      color: Colors.white70,
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                      MensagensStream(),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextField(
                                controller: textEditingController,
                                autofocus: true,
                                autocorrect: true,
                                onChanged: (value) {
                                  mensagem = value;
                                },
                                decoration: InputDecoration(
                                    border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(30.0),
                                    ),
                                    hintText: "Digite a sua mensagem..."
                                ),
                              ),
                            ),
                          ),
                          ButtonTheme(
                            height: 55,
                            minWidth: 10,
                            child: RaisedButton(
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(
                                    100,
                                  )
                              ),
                              color: Colors.lightGreenAccent,
                              child: Icon(Icons.send, color: Colors.white),
                              onPressed: () => {
                                textEditingController.clear(),
                                firestore.collection('mensagens').add({
                                  'Mensagem': mensagem,
                                  'Remetente': googleEmail,
                                  'Destinatario': "patio@teste.com",
                                  'DataHorario': FieldValue.serverTimestamp(),
                                })
                              },
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}```

You can use a Scaffold and place the text field as bottomSheet您可以使用Scaffold并将文本字段放置为bottomSheet

Wrap either one of you Column s (probably the outer one) with a SingleChildScrollView .SingleChildScrollView包裹你们中的任何一个Column (可能是外部的)。 The issue is that simply popping up the keyboard doesn't suddenly tell the layout that it needs to be able to scroll.问题是简单地弹出键盘并不会突然告诉布局它需要能够滚动。 You have explicitly say you want it to be able to scroll.您已明确表示希望它能够滚动。

See this for more information on the SingleChildScrollView .有关SingleChildScrollView的更多信息,请参阅内容。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM