Flutter之侧滑导航栏

废话不多说&＃xff0c;先看图&＃xff1a;

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

添加Drawer Widget

首先在Android Studio中新建Flutter工程&＃xff0c;并删除无用代码&＃xff0c;删除后的main.dart长这样&＃xff1a;

import &＃39;package:flutter/material.dart&＃39;;void main() &＃61;> runApp(MyApp());//main主入口&＃xff0c;相当于Android原生的Application&＃xff0c;随后runApp用于指定应用的首个Widget页面&＃xff0c;这里就是MyAppclass MyApp extends StatelessWidget {// This widget is the root of your application.&＃64;overrideWidget build(BuildContext context) {return MaterialApp(title: &＃39;Flutter Demo&＃39;,theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: &＃39;Flutter Demo Home Page&＃39;),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;&＃64;override_MyHomePageState createState() &＃61;> _MyHomePageState();
}class _MyHomePageState extends State {&＃64;overrideWidget build(BuildContext context) {return Scaffold(//整个页面的总布局&＃xff0c;相当于原生的Window ContentViewappBar: AppBar(// 相当于Android原生的TitleBar和Toolbartitle: Text(widget.title),),body: Container( //相当于原生的DecorView&＃xff0c;做了Column到Container的修改child: Text("drawer demo page"),));}
}


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

&＃64;overrideWidget build(BuildContext context) {return Scaffold(drawer: new Drawer(//添加侧滑菜单Widget),appBar: AppBar(title: Text(widget.title),),body: Center(child: Text("Drawer Demo Home Page&＃xff01;"),),);}


运行查看效果&＃xff1a;

添加Drawer Content

定义DrawerHeader Widget&＃xff0c;代码如下&＃xff1a;

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


随后定义DrawerBody Widget&＃xff1a;

Widget _buildDrawerBody() {return new Column(//列控件children: [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: () {//关闭drawerNavigator.of(context).pop();//跳转到新页面&＃xff0c;将当前页面加入回退栈Navigator.pushNamed(context, "drawerPage2");},),],);}


定义Drawer content并填充到drawer内&＃xff1a;

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


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


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

Widget _buildCustomDrawerHeader() {return new DrawerHeader(child: new Container(child: Row(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: [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?s=#34;),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: [new Row(children: [new Text("UserName")],),new Row(children: [new Text("user introduction"),],),],),)],),),);}


运行效果如下&＃xff1a;