Flutter实战:用纯Flutter编写一个《日报》

这篇文章开始用实战的方式来介绍Flutter。
我们来使用纯Flutter编写一个《日报》。
如果还没有Dart基础的可以先通过前面文章了解。

特别感谢

知乎日报API

声明

以下项目API由知乎提供,本人仅用于学习研究用,如有不当之处请告知本人,本人立即处理此文章。若被告知需停止共享与使用,本人会及时删除此文章。请您了解相关情况,并遵守知乎协议。

API分析

正常的开发流程都会先做需求分析,出原型,评审,出ui开发再来对接,但是我们这个是一个练习项目,依赖的是知乎日报的api,就不存在这些过程了,只有一点:api有什么我们就做成什么样。
上面的API中我们使用的是1.2版本的获取今日日报api,下面以这个api返回为例,节选一部分来分析各个字段的含义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
"date": "20181102",
"news": [
{
"title": "再见开普勒,感谢你告诉我们不孤独",
"url": "http://news-at.zhihu.com/api/1.2/news/9700512",
"image": "https://pic4.zhimg.com/v2-4be601d3481acf1aebafbf48996d67ab.jpg",
"share_url": "http://daily.zhihu.com/story/9700512",
"thumbnail": "https://pic2.zhimg.com/v2-15e2dc4804bc1ebf5382f93973a6f221.jpg",
"ga_prefix": "110216",
"id": 9700512
},
{
"title": "重庆坠江公交的黑匣子视频里,司机真的是一气之下反打方向盘吗?",
"url": "http://news-at.zhihu.com/api/1.2/news/9700505",
"image": "https://pic4.zhimg.com/v2-918d5a584b3b87201d71f9351d18f82b.jpg",
"share_url": "http://daily.zhihu.com/story/9700505",
"thumbnail": "https://pic1.zhimg.com/v2-2f47503da529e4fc184ad979b8e1bb18.jpg",
"ga_prefix": "110214",
"id": 9700505
}
]
top_stories": [
{
"image_source": "NASA",
"title": "再见开普勒,感谢你告诉我们不孤独",
"url": "http://news-at.zhihu.com/api/1.2/news/9700512",
"image": "https://pic4.zhimg.com/v2-4be601d3481acf1aebafbf48996d67ab.jpg",
"share_url": "http://daily.zhihu.com/story/9700512",
"ga_prefix": "110216",
"id": 9700512
},
{
"image_source": "《阿凡达》",
"title": "未来想看真 · 裸眼 3D,尴尬的光镊是个不错的选择",
"url": "http://news-at.zhihu.com/api/1.2/news/9699965",
"image": "https://pic2.zhimg.com/v2-1f4cb6cc039be11469474cccecced4b5.jpg",
"share_url": "http://daily.zhihu.com/story/9699965",
"ga_prefix": "110209",
"id": 9699965
}
]

上面是 http://news.at.zhihu.com/api/1.2/stories/latest 返回到数据节选,其中news跟top_stories分别对应是知乎日报官方版本的“今日新闻”和“banner头条新闻”:
知乎日报

下面提取我们需要的信息,整理一份表格及说明对应表如下:

| — | — |
| 字段 | 说明 |
| — | — |
| title | 新闻标题 |
| share_url | 新闻对应分享地址(也就是网页地址)|
| image | 新闻图片 |
| id | 新闻id |

成品

先看一下写完之后是什么样的:
主界面

新闻阅读

技术栈分析

项目结构比较简单,将会涉及到基础布局,异步网络编程,json数据解析和路由跳转等知识,如果看到这还没搭建Flutter开发环境的可以先看前面系列文章和Dart基础文章。

接下来一段时间的文章会对这个简单的项目进行剖析。

文章作者: Kevin Wu
文章链接: https://kevinwu.cn/p/bb5511ae/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 KevinWu.CN
支付宝打赏