如何阻止Flutter键盘覆盖支架小部件中的小部件?

时间:2019-06-20 23:05:50

标签: flutter dart flutter-layout

我正在创建一个基本的聊天应用程序,并在某些聊天气泡小部件下方使用一个浮动的TextField。

当TextField被聚焦并且键盘被打开时,我希望一切都会向上移动。但是键盘覆盖了气泡小部件。如果将文本字段放在SingleChildScrollView中,则可以使用,但会丢失TextField的“浮动”部分。我试图将聊天小部件既保留在ListView中,又保留在SingleChildScrollView和Column的当前状态。

类似于此问题:https://github.com/flutter/flutter/issues/10826

    return new Scaffold(
    resizeToAvoidBottomPadding: true,
    body: GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: new Container(
          child: new Column(children: <Widget>[
            Expanded(child: SingleChildScrollView(controller: _scrollController,
                child: Column(children:postWidgets))),
            Container(decoration: BoxDecoration(color: Colors.grey[200],
                borderRadius: BorderRadius.circular(8.0)),
              child: Padding(
                padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                child: Row(
                    children: [Expanded(
                      child: Container(color: Colors.white, height: 40.0,
                        child: TextField(
                          focusNode: _focus,
                          controller: myController,
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.fromLTRB(
                                10.0, 2.0, 5.0, 2.0),
                            border: OutlineInputBorder(),
                            hintText: 'Add a message',
                            hintStyle: new TextStyle(fontSize: 14.0),
                            suffixIcon: IconButton(icon: Icon(Icons.send),
                              onPressed: () {
                                if (myController.text.length > 1) {
                                  _addWidgetComment();
                                  _postComment();
                                }
                              },
                            ),
                          ),

                        ),
                      ),
                    ),
                    ]
                ),
              ),
            )
          ])),
    ));

Before tapping keyboard

enter image description here

0 个答案:

没有答案