时间戳

首页 > 解决方案 > 如何使 Ink 效果填充 BottomNavigationBarItem 中的所有空间

flutter - 如何使 Ink 效果填充 BottomNavigationBarItem 中的所有空间

问题描述

我正在制作一个带有 BottomNavigationBar 的简单 Flutter 应用程序，并且我的 BottomNavigationBarItem 中的标签超过了我点击它时创建的墨水效果。出于某种原因，它似乎只覆盖了图标而不是标签。

在此处输入图像描述

如何更改此行为以适应标签？我也希望有一个更矩形的墨水反应。

编辑：

我的导航栏代码

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    selectedItemColor: Colors.blue[900],
    unselectedItemColor: Colors.black87,
    onTap: onTabTapped,
    showUnselectedLabels: true,
    currentIndex: _currentIndex,
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.collections),
        title: Text('Collections'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.phone),
        title: Text('Recent'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.more_horiz),
        title: Text('More'),
      ),
    ],
  ),

当前行为

预期行为

标签： flutterflutter-layout

解决方案

经过几次尝试，我认为改变splashFactory可以解决问题。

MaterialApp(
  theme: ThemeData(
    splashFactory: InkRipple.splashFactory,
  ),
)

推荐阅读