第一个页面
页面效果.png
页面类关系.png
入口函数
一个Flutter工程的入口函数与Dart命令行工程一样是main，不同的是在Flutter中执行runApp(ArticleApp()) 就能够在手机屏幕上展示这个Widget。
import 'package:flutter/material.dart';
void main() => runApp(new ArticleApp());
ArticleApp
我们要实现的文章列表页面UI就在ArticleApp中定义：
class ArticleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text(
'文章',
style: const TextStyle(color: Colors.white),
),
),
body: new ArticlePage(),
),
);
}
}
build方法中返回的就是我们需要显示在屏幕上的widget。MaterialApp代表使用Material Design风格，这是一个封装了很多Android MD设计所必须要的组件的小部件。假设我们需要显示一个Text,而没有包裹在MaterialApp内：
class ArticleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Center:摆放在中间
return Center(
child: Text("你好!"),
);
}
}
无Material异常.png
因此我们不得不给Text指名textDirection属性:
class ArticleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("你好!",
style: const TextStyle(color: Colors.white),
textDirection: TextDirection.ltr),
);
}
}
但是如果包含在MaterialApp当中我们就不需要指名类似textDirection这样的属性了，因为内部已经内置了一套风格，指明了这些必须属性。而Scaffold则实现了基本的 Material Design布局结构，在 Material 设计中定义的单个界面上的各种布局元素，在 Scaffold 中都支持。比如：AppBar、抽屉菜单、BottomNavigationBar等等。
ArticlePage
在我们的布局中指定了Scaffold的body(主体)为ArticlePage，这是一个我们自定义的组合Widget。
class ArticlePage extends StatefulWidget {
@override
_ArticlePageState createState() => _ArticlePageState();
}
class _ArticlePageState extends State {
///滑动控制器
ScrollController _controller = new ScrollController();
///控制小菊花的显示
bool _isLoading = true;
///请求到的文章数据
List articles = [];
///banner图
List banners = [];
///总文章数有多少
var listTotalSize = 0;
///分页加载，当前页码
var curPage = 0;
@override
void initState() {
super.initState();
_controller.addListener(() {
///获得 SrollController 监听控件可以滚动的最大范围
var maxScroll = _controller.position.maxScrollExtent;
///获得当前位置的像素值
var pixels = _controller.position.pixels;
///当前滑动位置到达底部，同时还有更多数据
if (maxScroll == pixels && articles.length < listTotalSize) {
///加载更多
_getArticlelist();
}
});
_pullToRefresh();
}
_getArticlelist([bool update = true]) async {
/// 请求成功是map，失败是null
var data = await Api.getArticleList(curPage);
if (data != null) {
var map = data['data'];
var datas = map['datas'];
///文章总数
listTotalSize = map["total"];
if (curPage == 0) {
articles.clear();
}
curPage++;
articles.addAll(datas);
///更新ui
if (update) {
setState(() {});
}
}
}
_getBanner([bool update = true]) async {
var data = await Api.getBanner();
if (data != null) {
banners.clear();
banners.addAll(data['data']);
if (update) {
setState(() {});
}
}
}
///下拉刷新
Future _pullToRefresh() async {
curPage = 0;
Iterable futures = [_getArticlelist(), _getBanner()];
await Future.wait(futures);
_isLoading = false;
setState(() {});
return null;
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
///小菊花
Offstage(
offstage: !_isLoading, //是否隐藏
child: new Center(child: CircularProgressIndicator()),
),
///内容
Offstage(
offstage: _isLoading,
child: new RefreshIndicator(
child: ListView.builder(
itemCount: articles.length + 1,
itemBuilder: (context, i) => _buildItem(i),
controller: _controller,
),
onRefresh: _pullToRefresh),
)
],
);
}
Widget _buildItem(int i) {
if (i == 0) {
return new Container(
height: 180.0,
child: _bannerView(),
);
}
var itemData = articles[i - 1];
return new ArticleItem(itemData);
}
Widget _bannerView() {
var list = banners.map((item) {
return Image.network(item['imagePath'], fit: BoxFit.cover);
}).toList();
return list.isNotEmpty
? BannerView(
list,
intervalDuration: const Duration(seconds: 3),
)
: null;
}
}
这个Widget的代码比较多，它配置了我们见到的banner、与文章列表。代码中重写了State的生命周期方法initState与build。我们首先来观察build方法:
@override
Widget build(BuildContext context) {
//Stack：帧布局
return Stack(
children: [
///正在加载
Offstage( //可以控制是否隐藏
offstage: !_isLoading, //是否隐藏
child: new Center(child: CircularProgressIndicator()),//圆形进度指示器(小菊花)
),
///内容
Offstage(
offstage: _isLoading,
child: new RefreshIndicator( //下拉刷新
child: ListView.builder(
itemCount: articles.length + 1, //列表视图的个数
itemBuilder: (context, i) => _buildItem(i),//类似adapter，item显示什么？返回widget
controller: _controller,//滑动控制器
),
onRefresh: _pullToRefresh),//刷新回调方法
)
],
);
}
这段代码中各个部分都给到了注释，_buildItem与_pullToRefresh方法分别用于条目视图的生成与新数据的获取。
_pullToRefresh
_pullToRefresh是传递给下拉刷新组件:RefreshIndicator的刷新回调方法参数，它需要返回一个Future，同时我们初次进入页面也需要自动的去获取一次数据，所以我们还会在initState方法中主动的调用一次该方法。
Future _pullToRefresh() async {
curPage = 0;
Iterable futures = [_getArticlelist(), _getBanner()];
await Future.wait(futures);
_isLoading = false;
setState(() {});
return null;
}
在这个方法中，我们需要重新请求文章列表与banner图，因此借助Future.wait组合两个任务，在两个任务都完成后，再利用setState更新UI完成重绘。
_buildItem
获取到数据之后，接下来我们需要对这些数据进行展示
Widget _buildItem(int i) {
if (i == 0) {
return new Container(
height: 180.0,
child: _bannerView(),
);
}
var itemData = articles[i - 1];
return new ArticleItem(itemData);
}
Widget _bannerView() {
///banners是请求到的banner信息组，其中imagePath代表了图片地址
///map意为映射，对banners中的数据进行遍历并返回Iterable迭代器，
///？则是在map的参数：一个匿名方法中返回的类型
var list = banners.map((item) {
return Image.network(item['imagePath'], fit: BoxFit.cover);
}).toList();
///BannerView的条目不能为空
return list.isNotEmpty
? BannerView(
list,
///切换时间
intervalDuration: const Duration(seconds: 3),
)
: null;
}
_buildItem用于生成ListView当中的条目。注意在配置ListView时，我们给的itemCount为：articles.length + 1。articles就是请求到的文章信息数量，而+1则是为了显示banner。因此当i=0，显示第一个条目时候，我们返回了一个BannerView。这个BannerView其实是一个库（关于如何导入第三方库在最后）。而ArticleItem则又是我们自己定义的用于显示文章信息item的组合Widget。
ArticleItem
class ArticleItem extends StatelessWidget {
final itemData;
const ArticleItem(this.itemData);
@override
Widget build(BuildContext context) {
///时间与作者
Row author = new Row( //水平线性布局
children: [
//expanded 最后摆我，相当于linearlayout的weight权重
new Expanded(
child: Text.rich(TextSpan(children: [
TextSpan(text: "作者: "),
TextSpan(
text: itemData['author'],
style: new TextStyle(color: Theme.of(context).primaryColor))
]))),
new Text(itemData['niceDate'])//时间
],
);
///标题
Text title = new Text(
itemData['title'],
style: new TextStyle(fontSize: 16.0, color: Colors.black),
textAlign: TextAlign.left,
);
///章节名
Text chapterName = new Text(itemData['chapterName'],
style: new TextStyle(color: Theme.of(context).primaryColor));
Column column = new Column( //垂直线性布局
crossAxisAlignment: CrossAxisAlignment.start, //子控件左对齐
children: [
new Padding(
padding: EdgeInsets.all(10.0),
child: author,
),
new Padding(
padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
child: title,
),
new Padding(
padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 10.0),
child: chapterName,
),
],
);
return new Card(
///阴影效果
elevation: 4.0,
child: column,
);
}
}
Expanded
可以按比例“扩伸”Row、Column所占用的空间。
const Expanded({
int flex = 1,
@required Widget child,
})
flex为弹性系数，和Android中的LinearLayout的weight比重效果一致。
class _LayoutWidgetState extends State {
@override
Widget build(BuildContext context) {
return Row(
//将Row 分成 2+3+1分，
children: [
Expanded(flex:2,child: Container(child: Text('1'), color: Colors.red)),
Expanded(flex:3,child: Container(child: Text('1'), color: Colors.blue)),
Expanded(flex:1,child: Container(child: Text('1'), color: Colors.yellow)),
],
);
}
}
网络请求
一个app中，网络请求是最基本的功能，我们需要使用网络请求数据用于显示或者进行不同的逻辑处理。在我们的案例中，同样需要请求文章数据与banner数据。在Dart SDK中的io库其实提供了HttpClient 进行网络请求。大家都知道，Java中也提供了HttpConnection,但是我们更喜欢使用更加方便的OkHttp，所以一般开发中，我们可能使用一些更加方便的网络库，比如http、dio等等。进入https://pub.dartlang.org/ 输入库名就能够搜索到相关的库。这次我们使用dio来完成网络的请求：
class HttpManager {
Dio _dio;
static HttpManager _instance;
factory HttpManager.getInstance() {
if (null == _instance) {
_instance = new HttpManager._internal();
}
return _instance;
}
//以 _ 开头的函数、变量无法在库外使用
HttpManager._internal() {
///基础配置
BaseOptions options = new BaseOptions(
baseUrl: Api.baseUrl, //基础地址
connectTimeout: 5000, //连接服务器超时时间，单位是毫秒
receiveTimeout: 3000, //读取超时
);
_dio = new Dio(options);
}
request(url, {String method = "get"}) async {
try {
///默认使用get请求
Options option = new Options(method: method);
Response response = await _dio.request(url, options: option);
///一般来说，提供的是json字符串，response.data得到的就是这个json对应的map
return response.data;
} catch (e) {
return null;
}
}
}
导入库
在Flutter工程中存在一个pubspec.yaml文件。此文件类似build.gradle，在这个文件中进行我们整个工程的一些配置，其中就包括了库的导入。配置完成之后，点击右上角的Packages get就能自动下载依赖。
使用库.png
库的最新版本可以进入https://pub.dartlang.org/ 搜索。