Flutter 1.17 Widget 之 NavigationRail 初探

时间 2020-06-02

标签 flutter 1.17 widget navigationrail 初探繁體版

原文原文链接

Flutter 1.17 Widget 之 NavigationRail 初探

Flutter 1.17 版本中加入了一个新的 Widget NavigationRail ，接下来就让咱们来简单看一下这个 Widget 如何使用。git

若是 Flutter SDK 不是最新版本请经过 flutter upgrade 命令来升级 SDK 。github

flutter upgrade
复制代码

1、NavigationRail 介绍

NavigationRail 这个组件是一个材料设计风格的组件，一般展现在应用程序的左边或者右边，经过这个组件来进行页面的导航，一般来讲页面数量都是3个或者5个之内。编程

NavigationRail 通常都是定义为 Row 的第一个或者最后一个元素，而 Row 都是作为 Scaffold 里面的 body 来进行布局。数组

NavigationRail 这个组件是为大屏设备布局设计的，如桌面程序、Web 或者平板设备等大屏设备上，而像手机这样的竖屏小屏设备，通常都是使用 BottomNavigationBar 来实现导航功能。bash

2、典型的使用方式和页面结构

和 BottomNavigationBar 同样具备导航功能，可是 NavigationRail 的使用方式和 BottomNavigationBar 彻底不一样，不像 BottomNavigationBar 同样，能够作为Scaffold 中的一个参数来使用。微信

通常来讲，想要使用 NavigationRail，都是用 Row 作为 Scaffold 的 body 组件，而 NavigationRail 作为 Row 的第一个或者最后一个元素，这样导航就会定义在最左边或者最右边，若是使用了 NavigationRail，那么剩下的布局一般都是使用 Expanded，这样才会占满屏幕的剩余空间。app

典型的页面结构是这样的。less

固然，彻底能够进一步美化，好比，这样的。ide

典型的代码结构以下。布局

Scaffold(
  //row 作为 body 布局
  body: Row(
    children: <Widget>[
      NavigationRail(
        selectedIndex: _selectedIndex,
        onDestinationSelected: (int index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        labelType: NavigationRailLabelType.selected,
        destinations: [
          NavigationRailDestination(
            icon: Icon(Icons.favorite_border),
            selectedIcon: Icon(Icons.favorite),
            label: Text('First'),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.bookmark_border),
            selectedIcon: Icon(Icons.book),
            label: Text('Second'),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.star_border),
            selectedIcon: Icon(Icons.star),
            label: Text('Third'),
          ),
        ],
      ),
      VerticalDivider(thickness: 1, width: 1),
      // This is the main content.
      //Expanded 占满剩下屏幕空间
      Expanded(
        child: Center(
          child: Text('selectedIndex: $_selectedIndex'),
        ),
      )
    ],
  ),
);
复制代码

3、属性说明

const NavigationRail({
    this.backgroundColor,           //背景色
    this.extended = false,          //是不是扩展状态
    this.leading,                   //destinations 上的 widget 布局
    this.trailing,                  // destinations 下方的 widget 
    @required this.destinations,    //导航条
    @required this.selectedIndex,   //当前选中的页面索引
    this.onDestinationSelected,     //点击了导航的图标的回调
    this.elevation,                 //z 轴方向高度
    this.groupAlignment,            //对齐方式
    this.labelType,                 //选择标签时的效果
    this.unselectedLabelTextStyle,  //没有选中的标签的样式
    this.selectedLabelTextStyle,    //选中的标签的样式
    this.unselectedIconTheme,       //未被选中的标签文字样式
    this.selectedIconTheme,         //选中的标签文字样式
    this.minWidth,                  
    this.minExtendedWidth,          
  }) :  assert(destinations != null && destinations.length >= 2),
        assert(selectedIndex != null),
        assert(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));
复制代码

destinations 表明了导航条，类型是 NavigationRailDestination 数组类型，NavigationRailDestination 就表明了每个 item 。

相似 BottomNavigationBar ， NavigationRail 导航的item 也有选中和未选中的状态，能够设置不一样的样式。

destinations: [
          NavigationRailDestination(
            icon: Icon(Icons.favorite_border),
            selectedIcon: Icon(Icons.favorite),
            label: Text('First'),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.bookmark_border),
            selectedIcon: Icon(Icons.book),
            label: Text('Second'),
          ),
          NavigationRailDestination(
            icon: Icon(Icons.star_border),
            selectedIcon: Icon(Icons.star),
            label: Text('Third'),
          ),
        ],
复制代码

一般来讲，每个 item 都有三个元素： icon、selectedIcon 和 label 。

icon 未被选中状态下的图标(一般都是轮廓)。
selectedIcon 可选的，选择状态下的图标。
label 必需要有的，图标下方的描述文字。

4、示例

class NanigationRailMain extends StatefulWidget {
  @override
  NanigationRailMainState createState() => NanigationRailMainState();
}


class NanigationRailMainState extends State<NanigationRailMain>    {
  int _selectedIndex = 0;
  final padding = 8.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff28292E),
      body: SafeArea(
        child: Row(
          children: <Widget>[
            NavigationRail(
              minWidth: 56.0,
              groupAlignment: 1.0,
              backgroundColor: Color(0xff2D3035),
              selectedIndex: _selectedIndex,
              onDestinationSelected: (int index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              labelType: NavigationRailLabelType.all,
              leading: Column(
                children: <Widget>[
                  SizedBox(
                    height: 8,
                  ),
                  Center(
                    child: CircleAvatar(
                      radius: 16,
                      backgroundImage: NetworkImage(
                          "https://t9.baidu.com/it/u=86853839,3576305254&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1591363041&t=58576d535d450f80e9248bd0ee84c8c0"),
                    ),
                  ),
                  SizedBox(
                    height: 108,
                  ),
                  RotatedBox(
                    quarterTurns: -1,
                    child: IconButton(
                      icon: Icon(Icons.tune),
                      color: Color(0xffFCCFA8),
                      onPressed: () {},
                    ),
                  )
                ],
              ),
              selectedLabelTextStyle: TextStyle(
                color: Color(0xffFCCFA8),
                fontSize: 13,
                letterSpacing: 0.8,
                decoration: TextDecoration.underline,
                decorationThickness: 2.0,
              ),
              unselectedLabelTextStyle: TextStyle(
                fontSize: 13,
                letterSpacing: 0.8,
              ),
              destinations: [
                buildRotatedTextRailDestination("Popular", padding),
                buildRotatedTextRailDestination("Favourites", padding),
                buildRotatedTextRailDestination("Inspiration", padding),
                buildRotatedTextRailDestination("All", padding),
              ],
            ),
            // This is the main content.
            ContentSpace(_selectedIndex)
          ],
        ),
      ),
    );
  }
}

NavigationRailDestination buildRotatedTextRailDestination(
    String text, double padding) {
  return NavigationRailDestination(
    icon: SizedBox.shrink(),
    label: Padding(
      padding: EdgeInsets.symmetric(vertical: padding),
      child: RotatedBox(
        quarterTurns: -1,
        child: Text(text),
      ),
    ),
  );
}

class ContentSpace extends StatelessWidget {
  final int _selectedIndex;

  ContentSpace(this._selectedIndex);

  final List<String> images = [
    "https://images.unsplash.com/photo-1524758631624-e2822e304c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
    "https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
    "https://images.unsplash.com/photo-1538688525198-9b88f6f53126?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80",
    "https://images.unsplash.com/photo-1513161455079-7dc1de15ef3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
    "https://images.unsplash.com/photo-1544457070-4cd773b4d71e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=843&q=80",
    "https://images.unsplash.com/photo-1532323544230-7191fd51bc1b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
    "https://images.unsplash.com/photo-1549488344-cbb6c34cf08b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
  ];

  final List<String> titles = [
    "Popular\nIdeas",
    "Favourites",
    "Inspiration\nIdeas",
    "All"
  ];

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(24, 8, 0, 0),
        child: MediaQuery.removePadding(
          removeTop: true,
          context: context,
          child: ListView(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.calendar_today),
                    onPressed: () {},
                  ),
                ],
              ),
              SizedBox(
                height: 24,
              ),
              Text(titles[_selectedIndex],
                  style: TextStyle(
                    color: Color(0xffFCCFA8),
                    fontSize: 16,
                    letterSpacing: 0.8,
                    decoration: TextDecoration.underline,
                    decorationThickness: 2.0,
                  ),

              ),
              SizedBox(
                height: 24,
              ),


              for (var i in images) ImageCard(i),


            ],
          ),
        ),
      ),
    );
  }
}

class ImageCard extends StatelessWidget {
  final uri;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.fromLTRB(0, 0, 24, 24),
      child: Image.network(uri),
      clipBehavior: Clip.antiAliasWithSaveLayer,
      elevation: 0.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),

      ),
    );
  }

  const ImageCard(this.uri);

}
复制代码

效果

github

最后

欢迎关注「Flutter 编程开发」微信公众号。