Flutter从入门到写出完整App Day14

20.4.1 三

升级XCode
iOS -> Flutter -> App.framework文件夹删除重新运行
升级后的问题, 别人也会遇到

屏幕适配工具类
dart2.6之后的extension语法
更简单的来做适配
Swift的语法extension
对现有类来做一个扩展

class Person {

}

extension PersonE1 on Person {

}

系统的类来做扩展
String/int
jh_split(" ")
this, 谁调用我, 就代表谁

对屏幕适配现有的工具类进行扩展
=> 200.px()
对int/double进行扩展

考虑到项目开发中对很多东西进行扩展
项目目录建立extension文件夹
int_extension.dart
double_extension.dart
string_extension.dart

double_extension.dart中
import "..size_fit.dart"
extension DoubleFit on double {
double px() {
return JHSizeFit.setRpx(this);
}
}
get写法更简单 20.0.px

dart中没有隐式转换
int不会自动转成double类型
this.toDouble()
Swift中也可以用这种方式做个适配
Java在不断更新, 语言相对还是比较落后

再来说一个知识点
豆瓣解构的方法, 扩展, 当时翻译错了, 有问题
从2.3.0版本后才开始支持这个语法
...movie.title.runes.map()
报警告的原因, pubspec.yaml
environment:
sdk: ">=2.1.0 < 3.0.0"
改成2.3.0开始支持
警告就消失了
extension直到2.6.0开始才支持
改成2.6.0

新的项目
固定的事情
一. 新建项目
推荐通过终端来新建, 不会生成一些乱七八糟的东西
flutter create favorcate

二. 对项目进行配置
Flutter移动端 => App
都需要配置一些特殊的信息

• appid App在手机里的唯一标示
• 应用名称, 默认显示项目名字
• app icon
• launcher启动图

针对Android和iOS还不一样的

Android中:

AS中, android文件夹

1. appid修改 app文件夹 -> build.gradle
   -> defaultConfig -> applicationId "com.coderjh.favorcate"
   报错不用管

2. main文件夹 AndroidMainifest.xml -> android: lable="美食广场"

3. App图标 根据文件夹名字找对应的图标 icon="@mipmap/ic_launcher"

4. 启动图 android/app/src/main/res/drawable/launch_background.xml
   规律: 根据不同的分辨率, 来到对应的文件夹加载图片, 没有就到其他分辨率中找

iOS中的配置

不建议在AS中修改
建议在XCode中修改更加方便

1. Bundle Identity
   XCode打开, 点到文件夹不用到workspace

info.plist文件

2. Bundle name 美食广场

3. AppIcon
   网上工具生成图标

4. iOS启动图, 早期LaunchImage, iOS13开始LaunchScreen.storyboard

开始做项目了
三. 项目结构目录划分

• pages
• widgets
• services/network
• router
• viewmodel
• model
• theme
• shared
  开发过程中其他的文件夹
  constants
  utils
  ...
  另外一层考虑, 有一些目录结构会深一点, 结构更清晰
  core
  ui
  AS建包
  建议来到文件夹里, 创建好文件夹

四. 主题相关
//
canvasColor:

五. 路由配置
类型推导, Stirng可以省略
static const String routeName = "/";

lib/main非常的简洁
app.dart可以抽可以不抽, 尽量不想让lib文件尽可能简单

六.
希望在最开始就把项目划分的更精细点
单一职责原则 initialize_items.dart

一般先搞成StatelessWidget
有结构的时候都用Scaffold

再讲一个东西
如果想做一个首页
JSON解析, 不从服务器请求
也是一个异步的
category.json
建立assets文件夹

home.dart抽取
home_content.dart

services文件夹中
class JsonParse {
静态方法 getCategoryDate() 获取分类数据
1. 加载json文件

    final jsonString = rootBundle.loadString("assets/json/category.json");

    导入convert
    2.将jsonString转成Map/List
    json.decode(jsonString);

    3. 将Map中的内容转成一个个对象
    final resultList = result["category"];
    快速建模型的网站
    javiercbk.github.io/json_to_dart/
}

导入屏幕适配工具类extension文件夹

对JHSizeFit进行初始化

颜色不一样, 还有渐变效果
不是随机的
颜色来自json文件
字符串 -> Color对象

1. 截取计算对应的255数字
2. Color(16进制数字)
   1. 将color字符串转成十六进制的数字
      final colorInt = int.parse(color, radix: 16)
   2. 将透明度加进去
      |或运算符
      cColor = Color(colorInt | 0xFF000000);

没有生效, 重新跑一下, hot restart