Question

Flutter的最新更新似乎改变了BottomNavigationBar的行为。以前，当键盘出现时，键盘将覆盖BottomNavigationBar。但是，现在，BottomNavigationBar出现并始终可见时，它会粘在键盘的顶部。

当键盘出现时，如何将BottomNavigationBar设置为保留在键盘下方？

  bottomNavigationBar: new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.blue,
      onTap: _navigationTapped,
      currentIndex: _pageIndex,
      items: [
        new BottomNavigationBarItem(icon: new Icon(Icons.apps), title: new Text("Manage")),
        new BottomNavigationBarItem(icon: new Icon(Icons.multiline_chart), title: new Text("A")),
        new BottomNavigationBarItem(icon: new Icon(Icons.check_box), title: new Text("B")),
        new BottomNavigationBarItem(icon: new Icon(Icons.person_add), title: new Text("C")),
        new BottomNavigationBarItem(icon: new Icon(Icons.border_color), title: new Text("D")),
      ]
  ),

Answer 1

请确保包含父项的窗口小部件树仅包含one支架。

Scaffold(
      body: const TextField(),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.blue,
        onTap: (int value) {
          return value;
        },
        currentIndex: 0,
        items: [
          BottomNavigationBarItem(icon: new Icon(Icons.apps), title: new Text("Manage")),
          BottomNavigationBarItem(icon: new Icon(Icons.multiline_chart), title: new Text("A")),
          BottomNavigationBarItem(icon: new Icon(Icons.check_box), title: new Text("B")),
          BottomNavigationBarItem(icon: new Icon(Icons.person_add), title: new Text("C")),
          BottomNavigationBarItem(icon: new Icon(Icons.border_color), title: new Text("D")),
        ],
      ),
    );

这将导致底部导航被推到键盘上方。

 return Scaffold(
      body: Scaffold(
        ....

Answer 2

您的脚手架中是否有resizeToAvoidBottomInset: false？当键盘出现时，这会导致bottomBar升高

Answer 3

如果您的Flutter版本早于 1.1.9

使用

return Scaffold(
         resizeToAvoidBottomPadding: false,
         ...

其他

return Scaffold(
         resizeToAvoidBottomInset: false,
         ...

底部导航栏固定在键盘顶部

3 个答案: