如何使 BottomNavigationBar 粘在键盘颤动的顶部答案

【问题标题】：how can I make BottomNavigationBar stick on top of keyboard flutter如何使 BottomNavigationBar 粘在键盘颤动的顶部
【发布时间】：2019-04-21 04:32:04
【问题描述】：

我正在尝试制作一个简单的聊天应用程序，所以我创建了一个脚手架，我的身体将是消息，我的 bottomNavigationBar 将是我的输入字段和发送图标。

我添加了一个文本字段，但是在键入时导航栏被键盘隐藏了。

这是我的BottomNavigationBar 的代码：

bottomNavigationBar: new Container(
          height: ScreenSize.height/12,
          /*color: Colors.red,*/

          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,

            children: <Widget>[
              new Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  new Container(
                    child: new Icon(Icons.send),

                    width:ScreenSize.width/6,
                  ),
                ],
              ),
              new Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Material(
                    child: new Container(
                      child: new TextField(
                        autofocus: false,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.all(9.0),
                          border: InputBorder.none,
                          hintText: 'Please enter a search term',
                        ),
                      ),
                      width:ScreenSize.width*4/6,
                    ),
                      elevation: 4.0,
                    /*borderRadius: new BorderRadius.all(new Radius.circular(45.0)),*/
                    clipBehavior: Clip.antiAlias,
                    type: MaterialType.card,
                  )
                ],
              ),
              new Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  new Container(
                    child: Text('HELLO C1'),
                    color: Colors.green,
                    width:ScreenSize.width/6,
                  ),
                ],
              )




            ],
          ),
        ),

这是聚焦时的样子：

【问题讨论】：

标签： dart flutter

【解决方案1】：

如果您在 Scaffold 的主体上使用 Stack，而不是 bottomNavigationBar，您的导航将向上推到键盘上方。即使您使用 Positioned 固定到底部：

Positioned(
   bottom: 0.0,
   left: 0.0,
   right: 0.0,
   child: MyNav(),
),

【讨论】：

实现的好方法！谢谢

【解决方案2】：

实际上只是解决了同样的问题。鉴于我正在重构的代码，这就像一个魅力。窥视 github 链接，查看他的更改并应用。再简单不过了：https://github.com/GitJournal/GitJournal/commit/f946fe487a18b2cb8cb1d488026af5c64a8f2f78.。

如果链接断开，上面链接的内容：

(-)BottomAppBar buildEditorBottonBar(
(+)Widget buildEditorBottonBar(
  BuildContext context,
  Editor editor,
  EditorState editorState,
BottomAppBar buildEditorBottonBar(
    folderName = "Root Folder";
  }

  *REPLACE* return BottomAppBar(
    elevation: 0.0,
    color: Theme.of(context).scaffoldBackgroundColor,
    child: Row(
      children: <Widget>[
        FlatButton.icon(
          icon: Icon(Icons.folder),
          label: Text(folderName),
          onPressed: () {
            var note = editorState.getNote();
            editor.moveNoteToFolderSelected(note);
          },
        )
      ],
      mainAxisAlignment: MainAxisAlignment.center,

  *WITH THE WRAPPER* return StickyBottomAppBar(
    child: BottomAppBar(
      elevation: 0.0,
      color: Theme.of(context).scaffoldBackgroundColor,
      child: Row(
        children: <Widget>[
          FlatButton.icon(
            icon: Icon(Icons.folder),
            label: Text(folderName),
            onPressed: () {
              var note = editorState.getNote();
              editor.moveNoteToFolderSelected(note);
            },
          )
        ],
        mainAxisAlignment: MainAxisAlignment.center,
      ),
    ),
  );
}

class StickyBottomAppBar extends StatelessWidget {
  final BottomAppBar child;
  StickyBottomAppBar({@required this.child});

  @override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom),
      child: child,
    );
  }
}

【讨论】：

【解决方案3】：

我通过混合我在网络上发现的两件事来实现这一点：

1 - 在 Scaffold 内，我放置了一个只有一个 bottomNavigationBar 和一个空 Container 的其他东西。出于某种原因，这个技巧将我所有真正的底部导航栏都推到了键盘的顶部。

Scaffold(
 bottomNavigationBar: Container(
   height: 0,
 ),
   body: Scaffold(
body: MyWidget(

但是，我不想要所有的内容，所以我得到了那个包：

2 - 我添加了 flutter_keyboard_visibility: ^5.1.0 from

https://pub.dev/packages/flutter_keyboard_visibility

有了这个包，你可以做任何你想做的事情来响应键盘的可见性——这取决于你。就我而言，我让我真正的 bottomNavigationBar 的所有内容都消失了，除了留在键盘顶部的文本字段：

[TextFormField] // 不要消失， //其他：

KeyboardVisibilityBuilder(builder: (context, visible) {
        return Column(
          children: [
            visible
                ? SizedBox(
                    height: 0,
                  )
                : OtherWidgets(

【讨论】：

【解决方案4】：

如果您需要某种按钮；你可以这样做：

Scaffold(
            bottomNavigationBar: bottomNavigationBar,
            floatingActionButton: ExampleButton(
              text: 'Hello',
            ),
            body: body,
          ),

您可以使用 Scaffold 中的参数对浮动操作按钮应用进一步的自定义。

【讨论】：

【解决方案5】：

如果您确实需要使用脚手架的底部导航栏来放置小部件而不是将其放在堆栈上，那么有一种简单的方法可以做到这一点。只需用另一个脚手架包裹你的脚手架，它应该可以解决问题。

 return Scaffold(
      body: Scaffold(
        bottomNavigationBar: yourBottomNavigationBarWidget(),
        body: yourBody(),

当您的小部件的高度动态变化时（因为文本用户类型可能会引入多行）并且您希望正文相应地调整大小时，这种方法效果最好。正如许多人所建议的那样，堆栈中的主体将需要在文本字段上可见底部填充，并且需要随着用户类型动态更改，当您在文本字段中和周围有多个小部件时很难处理。

【讨论】：