带有文本字段的 Flutter floatingActionButton 未完全位于键盘上方。需要像 facebook messanger 这样的东西

Posted 2023-02-23

【中文标题】带有文本字段的 Flutter floatingActionButton 未完全位于键盘上方。需要像 facebook messanger 这样的东西

【英文标题】：Flutter floatingActionButton with textfield is not fully above keyboard. Need something like facebook messanger

【发布时间】：2020-05-30 03:43:55

【问题描述】：

我有一个奇怪的问题，我不知道如何解决。我用 TextField 创建了一个自定义的 floatingActionButton，并将 floatingActionButtonLocation 设置为 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 行，容器的边距部分也在键盘下方。

这就是我的 floatingActionButton 没有文字的样子：

当文本在多行时需要解决这个问题（你看不到它在键盘下的底部边框）：

这就是我想要的：

【参考方案1】：

您应该看看这两种方法（我将链接到我发现的可能有助于您解决此问题的问题）：

在您的Scaffold 小部件中使用resizeToAvoidBottomPadding: true (https://***.com/a/53800595/12020274)

或

使用

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

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

【参考方案2】：

最好的解决方案，也适用于滚动视图：

脚手架 -> bottomSheet

Scaffold(
        bottomSheet: WIDGET,
)