旧回复

Question

我正在使用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'),
      ),
    ],
  ),

Current Behavior

Expected Behavior

Answer 1

在摆弄了标准库之后，我现在意识到BottomNavigationBarItem不是小部件，而是一个容器类，用于封装BottomNavigationBar项所需的信息。

不幸的是，您将需要覆盖BottomNavigationBar并创建自己的CustomBottomNavigationBar来完成您想要的事情。

好消息是，这非常容易，因为您只需要更改一行代码即可。：）

我从$FLUTTER_HOME/packages/flutter/lib/src/material/bottom_navigation_bar.dart复制了代码，只进行了一次调整：在第480行，我将InkResponse更改为InkWell，现在它可以按您的要求工作了。

使用InkResponse：

使用InkWell：

我建议您使用覆盖的类在项目中创建覆盖文件夹，这是我的方法（我覆盖了默认的底层表类）：

然后，您可以像这样导入您覆盖的类：

import 'package:your_project/widgets/override/bottom_navigation_bar.dart' as BottomNavigationBarOverride;

并像这样使用它：

  bottomNavigationBar: BottomNavigationBarOverride.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'),
      ),
    ],
  ),

旧回复

如果您提供更多代码，我可以为您提供更多帮助。

从您提供的图片来看，这是预期的行为，因为底部导航行程并不打算很大。他们打算像material spec所建议的那样迅速而干净：

如果您只打算使用一个“选项”，建议您将小部件更改为FlatButton。但请注意，这与规范不符，因为出于可用性目的，底部导航iten至少应包含3个选项，最多应包含5个选项。

Answer 2

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

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

如何使墨水效果填充BottomNavigationBarItem中的所有空间

2 个答案:

旧回复