Flutter 实现高仿开眼 APP 的页面开发 02

Posted 2022-06-23 熊喵先生

上一篇实战文章铺垫，本篇文章功能实现起来就会变得更加简单，此外上篇文章并没有涉及到任何的网络请求。这篇文章将会使用网络请求，并且对现有网络请求进行一些封装，在使用的时候会变得更加简单，避免一些模板代码的编写。此外这篇文章还会涉及到一些 UI 组件封装和使用，比如下拉刷新和上拉加载的实现。

1. 静态资源的导入

关于静态资源主要就是一些外部字体、JSON 文件、配置文件、图标和图片（JPEG、WebP、GIF、动画 WebP/GIF、PNG、BMP 和 WBMP）。关于静态资源的加载只需要在项目根目录新建一个 assets 目录，然后按照资源类型建立子目录。最后在 pubspec.yaml 文件中只要引入子目录文件夹即可，不需要引入目录中的每张图片资源。

对于 Assets 图片的加载，规则是这样的，默认的主资源是 1.0 倍分辨率图片，然后可以新建 2.0x、3.0x 的目录分别对应 2.0、3.0 倍分辨率图片目录。

在设备像素比率为 1.8 的设备上，…/2.0x/xxx.png 将被选择。对于 2.7 的设备像素比率，…/3.0x/xxx.png 将被选择。

如果未在 Image 控件上指定渲染图像的宽度和高度，以便它将占用与主资源相同的屏幕空间量（并不是相同的物理像素），只是分辨率更高。 也就是说，如果 …/xxx.png 是 72px 乘 72px，那么 …/3.0x/xxx.png 应该是 216px 乘 216px；但如果未指定宽度和高度，它们都将渲染为 72 像素×72 像素（以逻辑像素为单位）。此外需要注意的是 1x