带有文本字段的Flutter floatActionButton不在键盘上方。需要类似facebook messanger

问题描述 投票:0回答:1

我有一个奇怪的问题,我不知道如何解决。我使用TextField创建了一个自定义的floatActionButton,并将floatActionButtonLocation设置为FloatingActionButtonLocation.centerDocked。但是,当文本字段被扩展时,它将进入键盘下方。有人可以帮我解决这个问题吗?

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: GameDetailAppBar(
          widget.model.selectedGame.name,
          widget.model.selectedGame.currentUserMetadata['isOwner'],
          widget.model),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: showGamePageBottomBar
          ? GamePageBottomBar(widget.model)
          : _buildCommentBox(),
      backgroundColor: Colors.white,
      body: Container(
        child: _buildGamePage(),
      ),
    );
  }

  Widget _buildCommentBox() {
return Container(
  margin: EdgeInsets.only(bottom: 55),
  width: screenWidth(context),
  color: Colors.white,
  child: Container(
    margin: EdgeInsets.only(top: 5, bottom: 5, right: 27, left: 27),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6),
      border: Border.all(
        color: createColor('#FFBF00'),
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.only(left: 11, right: 11),
      child: new TextFormField(
        controller: _commentController,
        // focusNode: commentFocusNode,
        maxLines: 5,
        minLines: 1,
        decoration: new InputDecoration(
          border: InputBorder.none,
          suffix: Text(
            'Post',
            style: WidgetUtils.me.getLatoMedium(
              16,
              createColor('#0DB630'),
            ),
          ),
        ),
      ),
    ),
  ),
);
}

_ buildCommentBox中的此边距应以某种方式在_commentController行上动态动态化。没有文本的空白,容器的一部分在键盘下面,即使文本字段只有1行。

这是没有文本的我的floatActionButton的样子:enter image description here

当文本在多行上时需要解决此问题(您不能在键盘下看到底部边框):

enter image description here

这就是我想要的:enter image description here

flutter dart textfield floating-action-button
1个回答
0
投票

您应该查看这两种方法(我将链接到我发现的可以帮助您解决此问题的问题):

resizeToAvoidBottomPadding: true小部件(Scaffold)中使用https://stackoverflow.com/a/53800595/12020274

使用

padding: EdgeInsets.only(
             bottom: MediaQuery.of(context).viewInsets.bottom));

在您的Padding小部件上(https://stackoverflow.com/a/53605734/12020274

© www.soinside.com 2019 - 2024. All rights reserved.