如何在flutter中去除或增加NavigationBar中所选项目的装饰?
NavigationBar(
elevation: 0,
selectedIndex: navIndex,
onDestinationSelected: (index) => setState(() {
navIndex = index;
}),
backgroundColor: Colors.transparent,
labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
destinations: const [
NavigationDestination(
icon: Text('Your subscriptions'),
label: '',
),
NavigationDestination(
icon: Text('Upcoming bills'),
label: '',
),
],
),
装修效果图
通常,NavigationDestination 图标必须是 Icon() 小部件。 但就你而言,它是文本。这就是文本超出突出显示区域的原因。
NavigationDestination(
icon: <This has to be a Icon>
label: '',
),
图标将使用 'NavigationBarThemeData.iconTheme' ,如果 'NavigationBarThemeData' 不存在,图标将使用 'IconThemeData'。在这两种情况下,我都找不到更改突出显示区域大小的方法。
你可以做这样的事情,它可以完成工作,但不是那么顺利。
int _selectedIndex = 0; // local variable
NavigationDestination(
icon: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: _selectedIndex == 0 ? Colors.blue.shade100 : Colors.transparent,
shape: BoxShape.rectangle),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Your subscriptions'),
)),
label: 'Your subscriptions',
),
通过添加 NavigationBarThemeData().copyWith 并为所选内容提供透明的十六进制值解决了同样的问题
navigationBarTheme: const NavigationBarThemeData().copyWith(
indicatorColor: const Color(0X00000000)
)
生成的导航看起来像这样
NavigationDestination(
selectedIcon: Icon(Icons.home_filled,color: Colors.grey[700]),
icon: const Icon(Icons.home_outlined,),
label: 'Home',
)
如果您使用BottomNavigationBar,可以使用它来更改导航栏中内容的颜色、文本样式和字体大小。
BottomNavigationBar(
selectedItemColor: Colors.white
selectedLabelStyle: const TextStyle(color: Colors.white),
selectedFontSize: 12,
ontap:(){...}
)