学习Flutter自己撸的一个项目，用来显示王者荣耀英雄列表的。
项目地址：https://github.com/flywo/HeroList
首页详解
首先，我们来看首页的最终样式：
屏幕快照 2019-05-20 上午11.48.57.png
从上到下分析一下首页：
- 导航栏
- 内容
- 底部导航栏
对应到Flutter的Widget分别是：
- AppBar
- GridView
- BottomNavigationBar
由于项目需要一个AppBar与BottomNavigationBar来管理页面的跳转，所以，上面这些Widget都应该放到Flutter的Scaffold中，该Widget带了AppBar和BottomNavigationBar的属性，可以拿来直接用。
所以最终Widget树关系应该为：
MaterialApp -> Scaffold -> AppBar、GridView、BottomNavigationBar。
实现
搭建MaterialApp
由于要用到界面跳转，于是集成了第三方fluro来管理路由。在pubspec.yaml文件中设置依赖：
dio: ^2.1.0
然后下载：
flutter packages get
为了方便管理，我新建了一个router管理类，如下：
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import '../View/AppHome.dart';
import '../View/HeroInfo.dart';
import '../View/AppComponent.dart';
import '../View/HeroVideo.dart';
class Application {
static Router router;
static buildRouter() {
router = Router();
router.define('/', handler: Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> parameters) {
return AppHome();
}
));
router.define('/hero_info', handler: Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> parameters) {
int index = int.parse(parameters['heroIndex'].first);
return HeroInfo(
hero: AppComponent.heros[index],
);
}
));
router.define('/hero_info/hero_video', handler: Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> parameters) {
int index = int.parse(parameters['heroIndex'].first);
return HeroVideo(
hero: AppComponent.heros[index],
);
}
));
}
}
里面定义了一个类属性router用来管理路由，buildRouter()方法来初始化路由。
创建了一个基础Widget类AppComponent，如下：
import 'package:flutter/material.dart';
import '../Router/AppRouter.dart';
import '../Model/ArticleData.dart';
import '../Model/HeroData.dart';
class AppComponent extends StatefulWidget {
static List<ArticleData> articles;
static List<HeroData> heros;
static List<CommonSkill> commonSkills;
AppComponent({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return _AppComponetState();
}
}
class _AppComponetState extends State<AppComponent> {
_AppComponetState() {
Application.buildRouter();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '王者荣耀',
theme: ThemeData(
primarySwatch: Colors.orange,
),
onGenerateRoute: Application.router.generator,
);
}
}
该类的作用是存储了数据和创建基础Widget。具体页面内容在具体的类中实现。
搭建Home
创建出Home页面内容的Widget。通过Scaffold我们依次创建出AppBar、BottomNavigationBar。
import 'package:flutter/material.dart';
import '../View/HomeContent.dart';
import '../View/ArticleContent.dart';
import '../View/CommonContent.dart';
class AppHome extends StatefulWidget {
AppHome({Key key}): super(key: key);
@override
State<StatefulWidget> createState() {
return _AppHomeState();
}
}
class _AppHomeState extends State<AppHome> {
// var _itemWidth = (MediaQueryData.fromWindow(window).size.width - 40)/3;
// var _itemWidth = (GlobalKey().currentContext.size.width - 40)/3;
int _currentTabbarIndex = 0;
Widget _getCurrentContent() {
Widget result;
switch (_currentTabbarIndex) {
case 0:
result = HomeContent();
break;
case 1:
result = ArticleContent();
break;
case 2:
result = CommonContent();
break;
}
return result;
}
String _getCurrentTitle() {
String result;
switch (_currentTabbarIndex) {
case 0:
result = "英雄列表";
break;
case 1:
result = "物品列表";
break;
case 2:
result = "召唤师技能";
break;
}
return result;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_getCurrentTitle(), style: TextStyle(color: Colors.white),),
),
body: _getCurrentContent(),
bottomNavigationBar: BottomNavigationBar(
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.white,
backgroundColor: Theme.of(context).primaryColor,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,),
title: Text(
'英雄'
)
),
BottomNavigationBarItem(
icon: Icon(Icons.apps,),
title: Text(
'物品'
)
),
BottomNavigationBarItem(
icon: Icon(Icons.insert_emoticon,),
title: Text(
'技能'
)
),
],
currentIndex: _currentTabbarIndex,
onTap: (int index) {
setState(() {
_currentTabbarIndex=index;
});
},
),
);
}
}
内容页面放在了HomeConten类中去实现。
- 之所以把内容也放到对应的类中去实现，是为了方便下方BottomNavigationBar切换时，方便界面的切换和代码管理。
HomeConten类
import 'package:flutter/material.dart';
import '../Model/HeroData.dart';
import '../Net/Net.dart';
import '../Router/AppRouter.dart';
import 'package:fluro/fluro.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../View/AppComponent.dart';
class HomeContent extends StatefulWidget {
HomeContent({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return _HomeContentState();
}
}
class _HomeContentState extends State<HomeContent> {
List<HeroData> _heroList = [];
@override
void initState() {
if (AppComponent.articles == null) {
final future = getArticle();
future.then((value) {
AppComponent.articles = value;
});
}
if (AppComponent.heros != null) {
_heroList = AppComponent.heros;
return;
}
final future = getMain();
future.then((value) {
setState(() {
_heroList = value;
AppComponent.heros = value;
});
});
}
Widget _getItem(double width, int index, HeroData hero) {
return GestureDetector(
onTap: () {
Application.router.navigateTo(
context,
Uri.encodeFull('/hero_info?heroIndex=$index'),
transition: TransitionType.native
);
},
child: Column(
children: <Widget>[
CachedNetworkImage(
width: width,
height: width,
fit: BoxFit.fill,
imageUrl: 'https:${hero.href}',
placeholder: (BuildContext context, String url) {
return CircularProgressIndicator();
},
errorWidget: (BuildContext context, String url, Object error) {
return Icon(Icons.error_outline);
},
),
Text(hero.name),
],
),
);
}
Widget loading() {
return Center(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20),
child: Text('加载中...'),
),
],
),
);
}
Widget listView() {
final width = (MediaQuery.of(context).size.width-40)/4;
final aspect = width/(width+20);
return GridView.builder(
padding: EdgeInsets.all(5),
itemCount: _heroList.length,
itemBuilder: (BuildContext context, int index) {
return _getItem(width, index, _heroList[index]);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: aspect
),
);
}
@override
Widget build(BuildContext context) {
return _heroList.length==0? loading() : listView();
}
}
在该类中，我们只需要专注于内容的实现就行。
结束
在UI层面与在文件层面，他们的对应关系是：
MaterialApp -> Scaffold -> AppBar、GridView、BottomNavigationBar
AppComponent -> AppHome -> HomeContent
之所以这样分层次分开，主要还是为了后面代码量越来越大，方便管理。
相信代码请查看:https://github.com/flywo/HeroList
喜欢的朋友给个star，非常感谢。
