Flutter Widget 之NavigationRail

BottomNavigationBars非常适合在屏幕宽度有限的移动设备上

但是网页或桌机这些屏幕较大的运行环境下，所有导航项都会显得过大且突兀，与其在不适合的地方强加BottomNavigationBar，

何不试试看NavigationRail

NavigationRail这种侧面导航菜单和BottomNavigationBar一样具备相同的功能，能让用户快速访问导航栏的，是专为提升大荧幕下的运作效能而设计的

要运行NavigationRail，得为其设定destinations清单

NavigationRail(
    destinations: <NavigationRailDestination>[
        NavigationRailDestination(
            icon: Icon(Icons.house_outlined),
            selectedIcon: Icon(Icons.house),
            label: Text('Home'),
        ),
        NavigationRailDestination(
            icon: Icon(Icons.star_border),
            selectedIcon: Icon(Icons.star),
            label: Text('Favorites'),
        ),
        NavigationRailDestination(
            icon: Icon(Icons.account_circle_outline),
            selectedIcon: Icon(Icons.account_circle),
            label:Text('Profile'),
        ),
    ],
)

加上selectedIndex,另外还有回调项onDestinationSelected以供每次选择导航项时调用

NavigationRail(
    selectedIndex: _selectedIndex,
    onDestinationSelected: changeDestination,
    destinations: <NavigationRailDestination> [...],
);

changeDestination(int index) {
    setState(
        _selectedIndex = index;
    );
}

然后，将NavigationRail添加到您的页面,这样就大功告成了

Row(
    children: <Widget>[
      NavitationRail(
          selectedIndex = _selectedIndex,
          onDestinationSelected: changeDestination,
          destinations: <NavigationRailDestionation>[...],
      ),  
      const: VerticalDivider(thickness: 1, width: 1),
      MainContent()
    ],
)

若要更引人一些,也可以NavigationRail设置宽度底线

NavigationRail(
    selectedIndex: _selectedIndx,
    onDestinationSelected: changeDestination,
    destinations: <NavigationRailDestination>[...],
    minWidth: 100
),

启用导航栏标签，并为其设置样式

NavigationRial(
    selectedIndex: _selectedIndex,
    onDestinationSelected: changeDestination,
    destination: <NavigationRailDestination>[...],
    labelType: NavigationRailLabelType.all,
    selectedLabelTextStyle: TextStyle(
        color: Colors.lightBlue[500]
    ),
    unSelectedLabelTextStyle: TextStyle(
        color: Colors.grep[500],
    ),
)

配置NavitarionRail的高度

NavitarionRail(
    selectedIndex: _selectedIndex,
    onDestionationSelected: changeDestination,
    destinations: <NavigationRailDestination>[...],
    elevation: 5
),

为选定图标添加圆弧的天色突显背景

NavigationRail(
    selectedIndex: _selectedIndex,
    onDestinationSelected: changeDestination,
    destination: <NavigationRailDestination>[...],
    useIndicator: true,
),

为NavigationRail添加backgroundColor来提升改善，或使用indicatorColor来更改圆弧的天色突显背景

NavigationRail(
    selectedIndex: _selectedIndex,
    onDestinationSelected: changeDestination,
    destinations: <NavigationRailDestination>[...],
    backgroundColor: Colors.grey[50],
    indicatorColor: Colors.cyan[50],
),

还可添加widget Leading和Trailing以便显示导航目标清单前后的项目

NavigationRail(
    selectedIndex: _selectedIndex,
    onDestinationSelected: changeDestination,
    destinations: <NavigationRailDenstination>[...],
    leading: MyLeadingWidget(),
    trailing: MyTrailingWidget(),
),

常见的技巧是使用Media查询来确定屏幕的整体尺寸并在宽度低于设置阈值时套用BottomNavigationBar，而高于设定阈值时就套用NavigationRail

如果想了解有关NavigationRail 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址