【问题标题】:Keyboard hides TextField - Flutter键盘隐藏 TextField - Flutter
【发布时间】:2020-05-26 18:31:48
【问题描述】:

我创建了一个聊天页面,其中包含标题、MessagesStreamRow,其中包括 TextFieldRaisedButton。我已经检查了 GitHub 和 StackOverflow 中关于这个问题的每一页,但我找不到任何解决方案。启动键盘时该行不会上升,而是会越过屏幕底部,隐藏所有内容。

谁能帮我解决这个问题?我真的什么都试过了。

这是我的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(),
                                })
                              },
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}```

【问题讨论】:

    标签: flutter keyboard widget


    【解决方案1】:

    SingleChildScrollView 包裹你们中的任何一个Columns(可能是外面的那个)。问题是简单地弹出键盘并不会突然告诉布局它需要能够滚动。您已明确表示希望它能够滚动。

    有关SingleChildScrollView 的更多信息,请参阅this

    【讨论】:

      【解决方案2】:

      您可以使用Scaffold 并将文本字段设置为bottomSheet

      【讨论】:

        猜你喜欢
        • 2021-10-06
        • 1970-01-01
        • 2020-09-17
        • 2022-01-22
        • 2019-05-04
        • 2020-04-28
        • 1970-01-01
        • 2021-06-29
        • 2019-06-08
        相关资源
        最近更新 更多