如何在Flutter中禁用底部导航栏随键盘上移的行为

Question

在我的应用程序中，我有一个搜索页面。当我点击搜索文本字段时，底部导航栏也会随着键盘向上移动，但它应该被隐藏在键盘下面。因为当键盘显示时，我可以导航到其他页面，这是不希望的行为。

代码：

class _AppHomeViewState extends State<AppHomeView>
    with TickerProviderStateMixin {

  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 4, vsync: this, initialIndex: 0);
    tabController.addListener(handleTabSelection);
  }

  @override
  Widget build(BuildContext context) {
    final scaffold = Scaffold(
      body: SafeArea(child: _buildBody(context)),
      bottomNavigationBar: Container(
        height: 48,
        decoration: BoxDecoration(
          color: StyledColors.BACKGROUND_COLOR,
          boxShadow: [
            BoxShadow(
              color: StyledColors.FORGROUND_COLOR.withOpacity(0.16),
              blurRadius: 12,
              offset: Offset(0, 0),
            ),
          ],
        ),
        child: SafeArea(
          child: _buildTabBar(context),
        ),
      ),
    );
  }

  Widget _buildBody(BuildContext context) {
    return TabBarView(
      physics: NeverScrollableScrollPhysics(),
      controller: tabController,
      children: <Widget>[
        HomeView(),
        SearchView(),
        OrdersView(),
        ProfileView(),
      ],
    );
  }

  Widget _buildTabBar(BuildContext context) {
    return TabBar(
      controller: tabController,
      tabs: <Widget>[
        Tab(
          icon: Icon(
            Icons.store,
            size: 28,
          ),
        ),
        Tab(
          icon: Icon(
            Icons.search,
            size: 28,
          ),
        ),
        Tab(
          icon: Icon(
            Icons.receipt,
            size: 28,
          ),
        ),
        Tab(
          icon: Icon(
            Icons.person,
            size: 28,
          ),
        )
      ],
      indicatorColor: Colors.transparent,
      unselectedLabelColor: StyledColors.MEDIUM_GREY,
      labelColor: StyledColors.PRIMARY_COLOR,
    );
  }

  void handleTabSelection() {
    setState(() {});
  }
}

当我点击搜索时，应该的行为是底部导航栏应该留在键盘后面而不是随键盘一起弹出吗？

- Azeem Muzammil

Answer 1

在Scaffold小部件中设置resizeToAvoidBottomInset: false,

- Niteesh

---

无法使用最新版本的Flutter（2.5.0）。 - Musthafa

是的，我也是。在升级Flutter 2.5.1之后无法工作。 - ÄR Âmmãř Żąîñh

这个不起作用。 - Snivio

还有其他解决方法吗？ - Thierry P. Oliveira

Answer 2

如果您有嵌套的Scaffold，请检查您的根Scaffold是否也设置了resizeToAvoidBottomInset: false。

- john

Answer 3

我刚遇到了同样的问题，当键盘启用时，我的底部导航栏也会随之移动。我通过检查键盘是否打开来解决了这个问题。如果它是打开的，只需隐藏或禁用底部导航栏，当它关闭时，就可以启用导航栏了。

以下是实现方法：

首先创建一个布尔变量，检查键盘是否打开或关闭。

bool isKeyboardOpen = MediaQuery.of(context).viewInsets.bottom != 0.0;

现在，您可以像这样执行以下操作来切换底部导航栏：

  bottomNavigationBar: isKeyboardOpen
      ? null
      : BottomAppBar();

这种技术也适用于浮动操作按钮问题。

- Shishir Rijal

Answer 4

编辑

   resizeToAvoidBottomInset: false 

在脚手架小部件中。

如果这不起作用，

你可能有多个脚手架。所以只需编辑顶部的一个即可。

resizeToAvoidBottomInset: false.

- hasan karaman