我使用的是Material 3
NavigationBar,目标是像Gmail**一样的外观,没有文本标签,底部的导航栏中没有标签文本的空间。
源代码:
bottomNavigationBar: NavigationBar(
backgroundColor: const Color(0xFFF2F6F3),
indicatorColor: const Color(0xFFB9F0CB),
selectedIndex: _currentIndex,
onDestinationSelected: (int index) {
setState(() {
_currentIndex = index;
});
},
// selectedLabelStyle: const TextStyle(fontSize: 0),
// unselectedLabelStyle: const TextStyle(fontSize: 0),
destinations: const <NavigationDestination>[
NavigationDestination(
selectedIcon: Icon(Icons.window),
icon: Icon(Icons.window_outlined),
label: '',
),
NavigationDestination(
selectedIcon: Icon(Icons.search),
icon: Icon(Icons.search_outlined),
label: '',
),
NavigationDestination(
selectedIcon: Icon(Icons.person),
icon: Icon(Icons.person_outline),
label: '',
),
],
),
1条答案
按热度按时间i2byvkas1#
找到一个简单的解决方案,只需在NavigationBar内添加以下代码:
参考:
Flutter下面的这个Playground演示了可用
labelBehavior
选项之间的差异。Flutter NavigationBar类🐦
最终代码: