美文网首页
Flutter从入门到写出完整App Day14

Flutter从入门到写出完整App Day14

作者: JackLeeVip | 来源:发表于2020-06-22 23:38 被阅读0次

    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文件

    1. Bundle name 美食广场

    2. AppIcon
      网上工具生成图标

    3. 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

    相关文章

      网友评论

          本文标题:Flutter从入门到写出完整App Day14

          本文链接:https://www.haomeiwen.com/subject/kjuqfktx.html