可以使用以下代码轻松创建导航栏:
NavigationRail(
extended: true,
backgroundColor: Colors.blue,
destinations: [
NavigationRailDestination(
icon: Icon(...),
label: Text('Dashboard'),
),
],
),
上面的代码会使整个导航栏变成蓝色,那么如何将所选导航栏的颜色更改为白色呢?未选定的保持蓝色,只有选定的才会更改为其他颜色。
这是一个dribbble设计,我想做这样的事情:
你应该尝试一下这个
Row(
children: <Widget>[
NavigationRail(
selectedIconTheme: IconThemeData(
color: Colors.white,
),
selectedLabelTextStyle: TextStyle(
color: Color(0xffFCCFA8),
fontSize: 13,
letterSpacing: 0.8,
decoration: TextDecoration.underline,
decorationThickness: 2.0,
),
unselectedLabelTextStyle: TextStyle(
fontSize: 13,
letterSpacing: 0.8,
),
backgroundColor: Colors.blue,
selectedIndex: _selectedIndex,
destinations: [
NavigationRailDestination(
icon: icon,
label: Text('Menu 1'),
),
NavigationRailDestination(
icon: icon,
label: Text('Menu 2'),
),
NavigationRailDestination(
icon: icon,
label: Text('Menu 3'),
),
],
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
),
Expanded(
child: Container(
color: Colors.green,
child: Center(
child: Text('Content of Menu $_selectedIndex'),
),
),
),
],
),
所以你想要这样
NavigationRail(
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
}, backgroundColor: Colors.blue,
labelType: NavigationRailLabelType.selected,
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.favorite_border, color: Colors.white),
selectedIcon: Icon(Icons.favorite,color: Colors.green),
label: Text('First'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border,color: Colors.white),
selectedIcon: Icon(Icons.book,color: Colors.green),
label: Text('Second'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border,color: Colors.white),
selectedIcon: Icon(Icons.star,color: Colors.green),
label: Text('Third'),
),
],
),
您还可以更改
Text('First',style:TextStyle(color:Colors.white)),
不要尝试更改
NavigationRail
仅更改 Icon
或 Text
小部件
应用程序中所有 NavigationRails 的外观都可以使用 NavigationRailTheme 指定。因此,您需要创建 ThemeData 并指定所有内容。
https://api.flutter.dev/flutter/material/NavigationRailTheme-class.html
截图后编辑。 那不是导航铁路。您专门询问了 NavigationRail Widget,我回答了。更好的问题是“如何在颤振中实现这一点”,这是一个自定义小部件。这样你就会激怒那些试图帮助你的人。您最好使用该屏幕截图创建新问题,并且没有可以执行此操作的小部件,您需要创建一个容器和一个 ListView,然后为每个 ListTile 创建一个容器。查看 YouTube 上的 Flutter Way 频道:https://www.youtube.com/watch?v=LN668OAUrK4 并了解如何创建自定义布局
我知道这个问题已有十亿年历史了,但我最近遇到了一个非常相似的问题。我刚刚花了一周时间重新设计了一堆 Flutter 小部件,并发布了包含结果的
custom_adaptive_scaffold
包。