如何用Flutter在两周以内上架一个小项目？For iOS o

2021-05-29  本文已影响0人  质行合一

原文地址：
https://juejin.cn/post/6967645147207041054

前言

前些日子朋友咨询可否爬网站数据，并制作一Windows程序。作为开发iOS/Android/MacOS/WatchOS/...的我没接触过C++/C#，用Java开发也不现实，重新认识Windows组件、网络、资源管理还是比较耗时的，于是打算推荐其使用众包平台发布任务。转念一想，大Flutter岂不是最合适之选，「Write once, Run anywhere」，可以避免平台兼容难、学习成本高等众多问题，最终在笔者挖坑填坑之旅中更加确定，Flutter会是移动端的未来。

本文为笔者利用下班和周末时间边学边做项目的历程，希望对于Flutter入门者有所帮助。其中大多为开发建议、推荐和思路，并非代码级的指引。阅读本文大约需20分钟。
**

一、准备工作

1、Flutter开发环境、开发工具、学习资料

① 工欲善其事，必先利其器。
开发Flutter如果想要同时打包iOS&Android，必须要有一台Mac电脑，没有怎么办？发挥你程序员的优势，安装MacOS虚拟机并在苹果官网下载Xcode安装包。
建议使用Android Studio(AS)开发，下载Flutter和Dart插件即可，更好兼容安卓模拟器。
笔者电脑安装有Xcode和AS，所以只需安装Flutter SDK即可，安装后使用万能指令，flutter doctor，发现问题，解决问题。

flutter doctor

注：Android license status unknown的警告是因为我本地java版本过高，不影响开发，可以忽略。
当然，也可以使用Visual Studio开发，开发Windows程序必选。并且编译打包EXE文件时，必须在Windows10电脑环境运行。
（所以笔者在项目收尾阶段安装Windows10虚拟机并安装VS后才能打包，占用我电脑40G的存储。🤣🤣🤣）

②推荐一些学习Flutter的学习资料网站：

字节跳动-幸福里FE团队某大神制作，入门最佳选择，保姆级资料。

官网资料，最为可靠。版本新，资源全，手把手视频教学及在线练习体验。

最全的中文控件库，使用与需求更贴切的良心官方控件，省时省心又省力。
吐槽一下用Android写UI，Android(ListView,RecycleView)输于iOS(UITableView,UICollectionView)的原因，就是iOS基本不需要自定义适配器。但Android使用XML写UI，非常方便，强于Xib。

相当于iOS之Cocoapods，Android之jcenter。常用第三方库可在中文网资料中获取，这里不一一列举。
强调一下，第三方库的叠加依赖会导致兼容失败，一般情况下，使用any版本即可,pub管理工具会自动下载不造成冲突的版本。特殊情况需要下载离线库进行配置。某些工具库在编译时需要注释掉，例如hive_generator，自动生成model属性转换方法时需要添加，编译时不注释会报错Dart Error: error: import of dart:mirrors is not supported in the current Dart runtime

值得推荐，以成品介绍组件。可惜的是可能是因为《闲鱼》App性能问题，阿里内部对Flutter热情不再，2年前已暂停维护。关于性能问题，目前的Flutter2.2已经有不小的性能提升和生态支持完善。

含高仿抖音，斗鱼，豆瓣，开源中国。基本包含市场App所有功能板块。

2、了解分析需求，爬取需求数据，确定开发流程

①需求

②爬取网站数据

凡是爬取网站里面不让爬取数据的行为都是不道德/违法的。

实际上，各公司之间有很多数据都是相互爬。但这也没有抵消笔者愧疚之心。况且此网站要爬取的接口都是有经过MD5加密后的动态Token的，所以再次打算推荐其使用众包平台。

在JS调试窗口，除标头还有预览页面。惊喜的是，网站的数据按500条/页展示在预览中，也就是说，我们只需要拷贝50页数据即可。😂😂😂
用命令行touch data{0..49}.json创建50个文件，依次粘贴文本。制作一个小工具，融合50个json文件得到1个20M的json文件，这样我们就得到原始数据。
当然，后续对数据查找和性能的优化过程中，按照本科、专科、体育、艺术、提前类型分为5个json文件，查找速度从原来的600ms提高到400ms以内。

你问我为什么不直接粘贴在一个json文件里？有兴趣的朋友可以试用任何编辑器打开20M的json文件。
~~
③开发流程

二、功能模块

遍历《选校方案》的功能模块，分析其中使用的Flutter知识，从iOS和Android开发者视角来解释。

1、UI：万物基于Widget。通俗来讲，StatefulWidget是可变的控件，StatelessWidget是不可变的控件。单从创建UI来讲，Android dev更有优势一些，因为XML也是嵌套模式。iOS dev接触过SwiftUI或者Rx系列或者RAC更容易理解，嵌套型UI是把iOS中所有约束，属性，控件，参数，交互、动画融合在一起，不以控件为主要对象，形成的响应式UI。从开发便利性来说，笔者感觉Hot Reload和响应式编程是所有移动端的趋势。
①避免嵌套，以封装治理地狱式套娃

@override
  Widget build(BuildContext context) {
    passValue = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      body: Column(
        children: [
          _getTopSearchView(context), //顶部搜索栏
          Container(
            height: 40,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int position) {
                return _getTitleColumn(position, Global.titles[position]);
              },
              itemCount: Global.titles.length,
              controller: firstRowController,
            ),
          ),//数据表头
          Expanded(child: Container(child: _getCoreListView())),//数据核心区
          _getPageView()//分页区
        ],
      ),
    );
  }
image-2.png image-3.png

②整体布局的思路


image-4.png 
Wrap(
alignment: WrapAlignment.center,
spacing: 20,
runSpacing: 10,
children: []
)

//监听第一行变动
firstRowController.addListener(() {
  double offset = secondedRowController.offset;
  double offset1 = firstRowController.offset;
  if (offset1 != offset) {
    secondedRowController.jumpTo(offset1);
  }
});
//监听第二行变动
secondedRowController.addListener(() {
  double offset = secondedRowController.offset;
  double offset1 = firstRowController.offset;
  if (offset != offset1) {
    firstRowController.jumpTo(offset);
  }
});

笔者耗时整整两天才搞定此功能，一开始使用官方控件DataTable，发现在自定义单元格展示不同UI时，需大量代码匹配其代理方法；滚动性能极差；不可懒加载，遂代码全部废弃，重新布局。
受益于iOS构建UI时的灵活性处理，笔者突发奇想，使用横向SingleChildScrollView内部嵌套竖向ListView，ListView使用itemBuilder构建。这样一来，横竖向滚动，性能，懒加载全部拥有。
单条item最后的“添加/删除”按钮操作，刷新UI几乎无卡顿。

更换100条/页或其他页码时，使用实例变量来标记单页条数，数组的getRange方法重新分割数据，刷新ListView与页码数。

image-5.png

2、数据库

Hive，pub上1.8KLike，GitHub上2.3kStar，在Flutter中算是欢迎度比较高的。

项目中建表方式：

shared_preferences，类似于iOS之NSUserDefaults，Android之SharedPreferences，可用于本地小数据存储。

3、第三方库、全局文件及资源库

image-6.png

4、与原生通信，原生适配。

本App有导出Excel文件的需求(MacOS与iOS通信方式相同)，此时就需要做平台兼容(Platform.isAndroid or Platform.isIOS etc.)。对于Windows平台来说，没有强制规定向用户请求权限，所以直接保存至任何普通文件地址，触发Flutter事件后调用原生SavePanel方法。对于MacOS来说，需要请求User Selected File-Read/Write，而不是下面的Folder权限，并启动原生文件保存窗口。这也是审核被拒的重要原因。

image-7.png image-8.png

5、macOS App Store上架历程（由于App Store的严格审核机制，一定要把握住权限，连续5天几个版本的拒审你懂的。Android dev可以略过）

image-9.png image-10.png

三、Flutter、SwiftUI、Android(鸿蒙)的简单思考

笔者打算将Flutter、iOS、Android、鸿蒙、小程序、快应用、RN等移动开发的未来发展单独介绍分析，奈何篇幅不够，现只做简单阐述，稍后会发布另一篇文章仔细分析。

上一篇 下一篇

猜你喜欢

热点阅读