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);

}
複製代碼