如何从 BottomNavigationBar 中删除图标?
How to remove icons from the BottomNavigationBar?
我只需要 BottomNavigationBarItem 中的标签,但我找不到删除它们的方法。
您可以将 showSelectedLabels
和 showUnselectedLabels
设置为 false 的标签隐藏,但没有等效的图标。
构造函数:
BottomNavigationBar({
Key key,
@required this.items,
this.onTap,
this.currentIndex = 0,
this.elevation = 8.0,
BottomNavigationBarType type,
Color fixedColor,
this.backgroundColor,
this.iconSize = 24.0,
Color selectedItemColor,
this.unselectedItemColor,
this.selectedIconTheme = const IconThemeData(),
this.unselectedIconTheme = const IconThemeData(),
this.selectedFontSize = 14.0,
this.unselectedFontSize = 12.0,
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels = true,
bool showUnselectedLabels,
})
这个问题关键看个人BottomNavigationBarItem()
.
如果您插入高度为 0.0 的容器作为标题,您将获得图标或 activeIcon 项目的所有垂直 space。由于 BottomNavigationBarItem
接受 任何小部件 作为图标或 activeIcon,您几乎可以自由使用任何您想要的东西。
在你的情况下可能只是一个像这样的 Text()
小部件:
BottomNavigationBarItem(
icon: Text("My Item"),
activeIcon: Text("My Item"),
title: Container(
height: 0.0,
),
)
我认为更好的方法是配置BottomNavigationBar。只需添加这一行,它就可以正常工作。无需为每个项目添加行
selectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
unselectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
例如
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
],
currentIndex: _selectedIndex,
selectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
unselectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
我只需要 BottomNavigationBarItem 中的标签,但我找不到删除它们的方法。
您可以将 showSelectedLabels
和 showUnselectedLabels
设置为 false 的标签隐藏,但没有等效的图标。
构造函数:
BottomNavigationBar({
Key key,
@required this.items,
this.onTap,
this.currentIndex = 0,
this.elevation = 8.0,
BottomNavigationBarType type,
Color fixedColor,
this.backgroundColor,
this.iconSize = 24.0,
Color selectedItemColor,
this.unselectedItemColor,
this.selectedIconTheme = const IconThemeData(),
this.unselectedIconTheme = const IconThemeData(),
this.selectedFontSize = 14.0,
this.unselectedFontSize = 12.0,
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels = true,
bool showUnselectedLabels,
})
这个问题关键看个人BottomNavigationBarItem()
.
如果您插入高度为 0.0 的容器作为标题,您将获得图标或 activeIcon 项目的所有垂直 space。由于 BottomNavigationBarItem
接受 任何小部件 作为图标或 activeIcon,您几乎可以自由使用任何您想要的东西。
在你的情况下可能只是一个像这样的 Text()
小部件:
BottomNavigationBarItem(
icon: Text("My Item"),
activeIcon: Text("My Item"),
title: Container(
height: 0.0,
),
)
我认为更好的方法是配置BottomNavigationBar。只需添加这一行,它就可以正常工作。无需为每个项目添加行
selectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
unselectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
例如
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
],
currentIndex: _selectedIndex,
selectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
unselectedIconTheme: IconThemeData(opacity: 0.0, size: 0),
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,