包管理
一个完整的应用或多或少会使用一些第三方包来开发,这样可以避免重复造轮子,就像Java开发Android引入的Xutils,Glide以及奶油刀等。其中,我们都知道Android中对包的管理是gradle,IOS用Cocoapods对包进行管理。(侧滑菜单实现效果图)
而在Flutter中,则通过pubspec.yaml配置文件对包进行管理,就像博主前面讲解Image组件时候引入自己的图片,就需要在里面声明。
如上图所示,我们可以在dependencies和dev_dependencies中加入所需要的依赖包,这些包都是官方或第三方开发者上传的。我们可以在Pub官方网站(https://pub.dartlang.org/)上搜索一些Flutter的第三方包,输入版本号后,在项目的根目录里输入命令“flutter packages get”,把包下载下来即可使用,或者在IDE里同步所需要的依赖包。
同样,我们也可以自行开发一些插件上传到pub上托管。pubspec.yaml配置文件的配置项参数如下表:
参数 | 取值 |
---|---|
name | 表示应用或包的名称,项目里import的包名和这里设定的值一致 |
description | 应用或包的描述信息 |
version | 应用或包的当前版本号 |
dependencies | 应用或包依赖的插件或其他第三方包 |
dev_dependencies | 开发环境下依赖的包 |
flutter | 一些配置项,例如fonts和assets |
实现侧滑效果
如何使用各个组件的章节到这里全部就讲解完成,既然学了这么多,实践一下也是有必要的,所以这里小编将实现侧滑菜单效果,来巩固前面章节学习的所有知识。
首先,我们分析一下Android App侧滑菜单有那些特性,肯定有左侧滑动菜单,右侧显示区域对不对?而左侧滑动菜单上面还有一个背景图片,一个头像以及一个设置图片按钮。
所以这里我们先来实现右侧显示效果,也就是right_page.dart页面,代码如下:
import 'package:flutter/material.dart';
class RightPage extends StatelessWidget {
final String pageText;//确定右侧的文字
RightPage(this.pageText);//构造函数传入设置页面的文字
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: new Text(pageText),//该页面标题栏与文字相同
),
body: Center(
child: new Text(pageText),//该页面标题栏与文字相同
),
);
}
}
右侧不是重要的,我们这里只确定是否跳转到该页面用文字确定一下,文字通过构造页面的时候传入。接着就是非常重要的,也是最主要的左侧滑动页面left_page.dart,代码如下:
import 'package:flutter/material.dart';
import 'package:flutter_app/page/right_page.dart';
class LeftPage extends StatefulWidget{
@override
_LeftPageState createState() => new _LeftPageState();
}
class _LeftPageState extends State<LeftPage> {
//头像与设置按钮图片
String headImageUrl="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580303478532&di=1478f90ea84d8431546853ee4b9b02d6&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F04%2F20151104140542_tBusS.jpeg";
String profileImageUrl="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580303491035&di=1abfac6069e86a510b8deec36e4be614&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F26%2F20160726185736_yPmrE.thumb.224_0.jpeg";
//交换头像与设置图片的方法
void exchangeImage() {
String backupString = headImageUrl;
this.setState((){
headImageUrl = profileImageUrl;
profileImageUrl = backupString;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: new Text("侧滑效果"),
),
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new UserAccountsDrawerHeader(//左侧菜单上面的显示区域
accountName: new Text("liyuanjinglyj"),//姓名或者昵称
accountEmail: new Text("[email protected]"),//邮箱地址
currentAccountPicture: new GestureDetector(//大头像点击事件
onTap: ()=>print("点击事件"),
child: new CircleAvatar(
backgroundImage: new NetworkImage(this.headImageUrl),
),
),
otherAccountsPictures: <Widget>[//设置图像的点击事件
new GestureDetector(
onTap: ()=>this.exchangeImage(),//点击交换图片
child: new CircleAvatar(
backgroundImage: new NetworkImage(this.profileImageUrl),
),
)
],
decoration: new BoxDecoration(//左侧菜单上面的显示区域背景,设置图片以及填充方式
image: new DecorationImage(image: new NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3138597732,1722388446&fm=26&gp=0.jpg"),fit: BoxFit.fill)
),
),
new ListTile(//一个固定高度的行,通常包含一些文本,以及一个行前或行尾图标。
title: new Text("第一个菜单"),
trailing: new Icon(Icons.accessibility),
onTap: (){
Navigator.of(context).pop();//出栈
Navigator.of(context).push(//进栈
new MaterialPageRoute(
builder: (BuildContext context)=>new RightPage("第一个菜单"),
));
},
),
new ListTile(
title: new Text("第二个菜单"),
trailing: new Icon(Icons.search),
onTap: (){
Navigator.of(context).pop();//出栈
Navigator.of(context).push(//进栈
new MaterialPageRoute(
builder: (BuildContext context)=>new RightPage("第二个菜单页面")
));
},
),
new Divider(),//分割线
new ListTile(
title: new Text("第三个菜单"),
trailing: new Icon(Icons.playlist_add_check),
onTap: ()=>Navigator.of(context).pop(),
)
],
),
),
body: new Center(
child: new Text("主页面",style: new TextStyle(fontSize: 35.0),),
),
);
}
}
注释已经够详细了,这里还是注意一下,Flutter是通过堆栈的方式存储页面路径。所以,常规操作进栈(push)和出栈(pop)是必不可少的,其他的代码中都有注释,看一下就很好理解,最后就是我们的main.dart代码:
import 'package:flutter/material.dart';
import 'package:flutter_app/page/left_page.dart';
void main(){
runApp(
new MaterialApp(
home: LeftPage(),
),
);
}
这样侧滑效果的Flutter项目就完成了,实现的效果如该博文首图一摸一样,下一篇博文依旧讲解应用组件的实践:登录界面与轮播图效果实现。