Flutter之侧滑导航栏

废话不多说，先看图：

上述动图中的效果，相信大多数小伙伴已经很熟悉了，在刚开始接触Android时，小伙伴做的最多的应该就是底部导航栏和侧滑导航栏了，作为Android开发中的经典业务场景，它们使用跨平台Flutter框架该怎么实现呢？接下来我们来一起看下侧滑导航栏在Flutter内的实现。

添加Drawer Widget

首先在Android Studio中新建Flutter工程，并删除无用代码，删除后的main.dart长这样：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());//main主入口，相当于Android原生的Application，随后runApp用于指定应用的首个Widget页面，这里就是MyApp

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(//整个页面的总布局，相当于原生的Window ContentView
      appBar: AppBar(// 相当于Android原生的TitleBar和Toolbar
        title: Text(widget.title),
      ),
      body: Container( //相当于原生的DecorView，做了Column到Container的修改
        child: Text("drawer demo page"),
      )
    );
  }
}

随后添加Drawer到页面布局中后，修改_MyHomePageState#build函数代码如下

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: new Drawer(//添加侧滑菜单Widget

      ),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text("Drawer Demo Home Page！"),
      ),
    );
  }

运行查看效果：

添加Drawer Content

定义DrawerHeader Widget，代码如下：

  Widget _buildUserAccountDrawerHeader() {
    return new UserAccountsDrawerHeader(//系统提供的一种DrawerHeader layout样式
      accountName: Text("Thai"),//用户名
      accountEmail: Text("Thai@gmail.com"),//用户邮箱
      currentAccountPicture: Image.network( //头像
        "https://b-ssl.duitang.com/uploads/item/201602/15/20160215235057_EU3tS.thumb.700_0.jpeg",
        fit: BoxFit.cover,
      ),
    );
  } 

随后定义DrawerBody Widget：

  Widget _buildDrawerBody() {
    return new Column(//列控件
      children: <Widget>[
        ListTile(
          title: Text("Ttem 1"),
          trailing: Icon(Icons.arrow_forward),
          onTap: () {
            Navigator.of(context).pop();
            Navigator.pushNamed(context, "drawerPage1");
          },
        ),
        ListTile(
          title: Text("Item 2"),
          trailing: Icon(Icons.arrow_forward),
          onTap: () {
            //关闭drawer
            Navigator.of(context).pop();
            //跳转到新页面，将当前页面加入回退栈
            Navigator.pushNamed(context, "drawerPage2");
          },
        ),
      ],
    );
  }

定义Drawer content并填充到drawer内：

  Widget buildDrawer(BuildContext context) {
    return new ListView(
      children: <Widget>[
        _buildUserAccountDrawerHeader(),
        _buildDrawerBody(),
      ],
    );
  }

drawer: new Drawer(
        child: buildDrawer(context),
),

运行即可看到开头的效果。
当前我们也可以自定义DrawerHeader布局，这里简单实现了，代码如下：

 Widget _buildCustomDrawerHeader() {
    return new DrawerHeader(
      child: new Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Container(
              width: 100.0,
              height: 100.0,
              margin: const EdgeInsets.all(10.0),
              decoration: new BoxDecoration(
                color: Colors.white,
                image: new DecorationImage(
                    image: new NetworkImage(
                        "https://b-ssl.duitang.com/uploads/item/201602/15/20160215235057_EU3tS.thumb.700_0.jpeg"),
                    fit: BoxFit.cover),
                shape: BoxShape.circle,
              ),
            ),
            new Container(
              height: 200,
              margin: const EdgeInsets.only(top: 40.0, left: 15.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Row(
                    children: <Widget>[new Text("UserName")],
                  ),
                  new Row(
                    children: <Widget>[
                      new Text("user introduction"),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

运行效果如下：

个人微信公众号，欢迎大家加入。