作者:到处旅游增加阅历入 | 来源:互联网 | 2023-09-14 22:57
初学Flutter,看了两天文档,花了两天时间利用gank.io提供的api接口实践了下Flutter,写了个Demo.主要实践了Flutter的如下几个知识点:如何使用dio框架
初学Flutter,看了两天文档,花了两天时间利用gank.io提供的api接口实践了下Flutter,写了个Demo.
主要实践了Flutter的如下几个知识点:
- 如何使用
dio
框架发起网络请求 - 如何实现常用布局,如:
- 水平布局:
Row
- 垂直布局:
Column
- 层叠布局:
Stack
- 如何设置间距:
Padding
- 如何显示网络图片
Image
- 如何使用下拉刷新组件:
RefreshIndicator
- 如何使用
ListView
组件,以及添加上拉加载更多功能 - 如何给普通
widget
添加事件监听: GestureDetector
- 如何实现水波纹效果:
InkWell
- 如何使用
Card
实现卡片式布局 - 在Flutter中如何使用
WebView
- 如何创建
Material Design
风格的应用以及自定义其主题样式 - 如何使用
AppBar
组件同时给其添加TabBarView
组件和BottomNavigationBar
- 如何进行页面跳转:
Navigator
Demo代码地址请戳这这这
Demo效果如如下:
![《Flutter实战之Gank Demo实践》](https://img.php1.cn/3cd4a/1eebe/cd5/45a090220e38e09d.webp)
![《Flutter实战之Gank Demo实践》](https://img.php1.cn/3cd4a/1eebe/cd5/086aec93f5e1e9b2.webp)
![《Flutter实战之Gank Demo实践》](https://img.php1.cn/3cd4a/1eebe/cd5/8373b1277127c518.webp)
![《Flutter实战之Gank Demo实践》](https://img.php1.cn/3cd4a/1eebe/cd5/0d80e8a685a9a87b.png)