flutter之桌面侧边导航栏 NavigationRail

资料来源

Flutter 组件集录 | 桌面导航 NavigationRail - 掘金 (juejin.cn) 

NavigationRail 构造函数

 const NavigationRail({
    Key? key,
    this.backgroundColor,
    this.extended = false,
    this.leading,
    this.trailing,
    required this.destinations,
    required this.selectedIndex,
    this.onDestinationSelected,
    this.elevation,
    this.groupAlignment,
    this.labelType,
    this.unselectedLabelTextStyle,
    this.selectedLabelTextStyle,
    this.unselectedIconTheme,
    this.selectedIconTheme,
    this.minWidth,
    this.minExtendedWidth,
    this.useIndicator,
    this.indicatorColor,
  }) :  assert(destinations != null && destinations.length >= 2),
        assert(selectedIndex == null || (0 <= selectedIndex && selectedIndex < destinations.length)),
        assert(elevation == null || elevation > 0),
        assert(minWidth == null || minWidth > 0),
        assert(minExtendedWidth == null || minExtendedWidth > 0),
        assert((minWidth == null || minExtendedWidth == null) || minExtendedWidth >= minWidth),
        assert(extended != null),
        assert(!extended || (labelType == null || labelType == NavigationRailLabelType.none)),
        super(key: key);

NavigationRail 必须传入两个参数

• destinations : 表示导航栏的信息，是 NavigationRailDestination 列表。
• selectedIndex: 表示激活索引，int 类型。

onDestinationSelected 回调方法

NavigationRail 通过 onDestinationSelected 回调方法，来监听用户和导航栏的交互事件，传递用点击的索引位置。

切换页面

使用PageView，通过 PageController 切换界面。在调用onDestinationSelected 回调方法更新索引时，通过 PageController 的 jumpToPage 方法进行界面跳转。

void switchTap(int value){
    print("click $value 个侧边栏");
    state.selectedIndex.value = value;
    state.pageController.jumpToPage(value);
    update();
  }

首尾组件与折叠

leading 和 trailing 属性相当于两个插槽，如下所示，表示导航菜单外的首尾组件。

final Widget? leading;

final Widget? trailing;

折叠

extended 的 bool 参数，用于控制是否展开侧边栏，当该属性变化时，会进行动画展开和收起。

影深 与 标签类型

elevation 表示阴影的深度，设置 elevation 之后右侧会有阴影，该值越大，阴影越明显。

labelType 参数表示标签类型，对应的属性是 NavigationRailLabelType 枚举。用于表示什么时候显示文字标签，默认是 none ，也就是只显示图标，没有文字。

enum NavigationRailLabelType {
  none,
  selected,
  all,
}

• 设置为 all 时，效果如下：导航菜单会同时显示 图标 和 文字标签。
• 设置为 selected 时，效果如下：只有激活的导航菜单会同时显示 图标 和 文字标签 。
• 有一点需要注意: 当 extended 属性为 true 时， labelType 必须为 none 不然会报错。

背景、文字、图标样式

• unselectedLabelTextStyle : 未选中签文字样式
• selectedLabelTextStyle : 选中标签文字样式
• unselectedIconTheme : 未选中图标样式
• selectedIconTheme : 选中图标样式