- （7）CollectionPage--組件收藏頁面
CollectionPage頁面相對比較簡單沸移，就一個列表頁面痪伦，開始吧。
初始化方法：
_CollectionPageState() {
final eventBus = new EventBus();
ApplicationEvent.event = eventBus;
}
CollectionControlModel _collectionControl = new CollectionControlModel();
List<Collection> _collectionList = [];
ScrollController _scrollController = new ScrollController();
var _icons;
@override
void initState() {
super.initState();
_getList();
ApplicationEvent.event.on<CollectionEvent>().listen((event) {//訂閱
_getList();
});
}
-
ApplicationEvent
ApplicationEvent是通過event_bus三方進行組件間事件傳遞的工具雹锣。event_bus這個庫大家有興趣可以自行去了解网沾。
訂閱：
ApplicationEvent.event.on<CollectionEvent>().listen((event) {//訂閱
_getList();
});
發(fā)送通知：
ApplicationEvent.event
.fire(CollectionEvent(widget.title, _router, true));
-
CollectionControlModel
CollectionControlModel負責收藏數(shù)據(jù)的存取，和上面的CatControlModel差不多：
final String table = 'collection';
Sql sql;
CollectionControlModel() {//set 表名
sql = Sql.setTable(table);
}
// 獲取所有的收藏
// 插入新收藏
Future insert(Collection collection) {
var result =
sql.insert({'name': collection.name, 'router': collection.router});
return result;
}
// 獲取全部的收藏
Future<List<Collection>> getAllCollection() async {
List list = await sql.getByCondition();
List<Collection> resultList = [];
list.forEach((item){
print(item);
resultList.add(Collection.fromJSON(item));
});
return resultList;
}
// 通過收藏名獲取router
Future getRouterByName(String name) async {
List list = await sql.getByCondition(conditions: {'name': name});
return list;
}
// 刪除
Future deleteByName(String name) async{
return await sql.delete(name,'name');
}
-
build函數(shù)
build的主要內(nèi)容在_renderList方法里面：
Widget _renderList(context, index) {
if (index == 0) {
return Container(//頭部標題
height: 40.0,
padding: const EdgeInsets.only(left: 10.0),
child: Row(
children: <Widget>[
Icon(
Icons.warning,
size: 22.0,
),
SizedBox(
width: 5.0,
),
Text('模擬器重新運行會丟失收藏'),
],
),
);
}
if (_collectionList[index - 1].router.contains('http')) {
if (_collectionList[index - 1].name.endsWith('Doc')) {
_icons = Icons.library_books;
} else {
_icons = Icons.language;
}
} else {
_icons = Icons.extension;
}
return Container(
padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
margin: const EdgeInsets.only(bottom: 7.0),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
new BoxShadow(
color: const Color(0xFFd0d0d0),
blurRadius: 1.0,
spreadRadius: 2.0,
offset: Offset(3.0, 2.0),
),
],
),
child: ListTile(
leading: Icon(
_icons,
size: 30.0,
color: Theme.of(context).primaryColor,
),
title: Text(
Uri.decodeComponent(_collectionList[index - 1].name),
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 17.0),
),
trailing:
Icon(Icons.keyboard_arrow_right, color: Colors.grey, size: 30.0),
onTap: () {
if (_collectionList[index - 1].router.contains('http')) {//如果是網(wǎng)頁就直接跳轉(zhuǎn)
// 注意這里title已經(jīng)轉(zhuǎn)義過了
Application.router.navigateTo(context,
'${Routes.webViewPage}?title=${_collectionList[index - 1].name}&url=${Uri.encodeComponent(_collectionList[index - 1].router)}');
} else {//不是網(wǎng)頁就跳轉(zhuǎn)相應(yīng)的頁面
Application.router
.navigateTo(context, "${_collectionList[index - 1].router}");
}
},
),
);
}
- （8）FourthPage--第四個頁面
這個頁面看似比較復(fù)雜蕊爵，但是實際層級結(jié)構(gòu)還是很清晰的：
Widget build(BuildContext context) {
return new Stack(
children: [
new Page(
// page 的主要內(nèi)容
viewModel: pages[activeIndex],
percentVisible: 1.0,
),
new PageReveal(//動畫page
revealPercent: slidePercent,
child: new Page(
viewModel: pages[nextPageIndex],
percentVisible: slidePercent,
),
),
new PagerIndicator(//指示
viewModel: new PagerIndicatorViewModel(
pages,
activeIndex,
slideDirection,
slidePercent,
),
),
new PageDragger(//負責滑動-->手勢
canDragLeftToRight: activeIndex > 0,
canDragRightToLeft: activeIndex < pages.length - 1,
slideUpdateStream: this.slideUpdateStream,
)
],
);
}
代碼我已經(jīng)盡量添加了詳細的注釋辉哥，可以看到分成四個部分：Page（主要內(nèi)容的顯示頁面activePage）、PageReveal（用于操作nextPage執(zhí)行滑動動畫）攒射、PagerIndicator（滑動指示條）醋旦、PageDragger（滑動手勢）
-
Page（主要內(nèi)容的顯示頁面)
初始化相關(guān)：
final PageViewModel viewModel;
final double percentVisible;
Page({
this.viewModel,//頁面信息
this.percentVisible = 1.0,//滑動百分百
});
build函數(shù)
Widget build(BuildContext context) {
return Stack(
//alignment: const Alignment(1.2, 0.6),
children: [
Container(
width: double.infinity,
/// height:MediaQuery.of(context).size.height-200.0,
color: viewModel.color,
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Opacity(
opacity: percentVisible,
child: ListView(
children: <Widget>[
layout(context),
],
),
)
),
Positioned(//右上角GitHub 按鈕
right: -5.0,
top: 2.0,
child: creatButton(context, 'GitHub', Icons.arrow_forward, 'goGithub')
),
]
);
}
在build函數(shù)中我們可以看到結(jié)構(gòu)分為兩部分，layout（主要視圖）会放、creatButton（左上角github按鈕）饲齐。
layout
Column layout(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Transform(//這個動畫效果是 向上慢慢移動的效果
transform: Matrix4.translationValues(
0.0, 50.0 * (1.0 - percentVisible), 0.0),
child: Padding(
padding: EdgeInsets.only(top: 20.0, bottom: 10.0),
child: Image.asset(viewModel.heroAssetPath,
width: 160.0, height: 160.0),
),
),
Transform(//這個動畫效果是 向上慢慢移動的效果
transform: Matrix4.translationValues(
0.0, 30.0 * (1.0 - percentVisible), 0.0),
child: Padding(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
child: Text(
viewModel.title,
style: TextStyle(
color: Colors.white,
fontFamily: 'FlamanteRoma',
fontSize: 28.0,
),
),
),
),
Transform(//這個動畫效果是 向上慢慢移動的效果
transform: Matrix4.translationValues(
0.0, 30.0 * (1.0 - percentVisible), 0.0),
child: Padding(
padding: EdgeInsets.only(bottom: 10.0),
child: Text(
viewModel.body,
textAlign: TextAlign.center,
style: TextStyle(
height: 1.2,
color: Colors.white,
fontFamily: 'FlamanteRomaItalic',
fontSize: 18.0,
),
),
),
),
// ButtonBar(
// alignment: MainAxisAlignment.center,
// children: <Widget>[
// creatButton(context, '開始使用', Icons.add_circle_outline, 'start'),
// creatButton(context, 'GitHub', Icons.arrow_forward, 'goGithub'),
// ],
// )
]);
}
creatButton
Widget creatButton(
BuildContext context, String txt, IconData iconName, String type) {
return RaisedButton.icon(
onPressed: () async {
if (type == 'start') {//這是看代碼應(yīng)該是關(guān)閉 歡迎頁
await SpUtil.getInstance()
..putBool(SharedPreferencesKeys.showWelcome, false);
_goHomePage(context);
} else if (type == 'goGithub') {//跳轉(zhuǎn) github
Application.router.navigateTo(context,
'${Routes.webViewPage}?title=${Uri.encodeComponent(txt)} Doc&&url=${Uri.encodeComponent("https://github.com/alibaba/flutter-go")}');
}
},
elevation: 10.0,
color: Colors.black26,
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.horizontal(left: Radius.circular(20.0))),
//如果不手動設(shè)置icon和text顏色,則默認使用foregroundColor顏色
icon: Icon(iconName, color: Colors.white, size: 14.0),
label: Text(
txt,
maxLines: 1,
style: TextStyle(
color: Colors.white, fontSize: 14, fontWeight: FontWeight.w700),
));
}
這里我都在原來的基礎(chǔ)上加上了一些注釋，可以結(jié)合看咧最，我不多說了捂人。
