最近 Flutter 发布到了 1.9 版本了，已经将 flutter_web 合并到了主分支，所以就将我之前开始的 web 项目也升级到 1.9 吧，正好也感受一下新版本的 Flutter。

我使用的是 1.9.7

1
2
3
4
5

➜  nishihouziqinglaidedoubima_fe git:(master) flutter --version
Flutter 1.9.7 • channel unknown • unknown source
Framework • revision 4984d1a33d (3 weeks ago) • 2019-08-28 17:04:07 -0700
Engine • revision f52c0b9270
Tools • Dart 2.5.0

之前的 pubspec.yaml 是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

name: nishihouziqinglaidedoubima_fe
environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'
dependencies:
  flutter_web: any
  flutter_web_ui: any
dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

最近使用 Flutter 实现了一个小的项目，分享一下；

项目背景

运行环境：wangpos, 实际为 Android-5.1.1
这个项目是重构的一个已经存在的项目，之前的项目使用 Android 原生 + Webview 混合开发的方式实现；
缺点如下：
1,需要嵌入浏览器内核到 apk，导致安装包的大小增加了 n*10M;
2,嵌入的浏览器内核对 css 的支持并不是特别完美，特别是一些新的特性，导致兼容性有一些问题；
3,代码相当于 public 的，意味着一些敏感信息写在代码里面会有顾虑；
优点：
1,可以无感知的更新版本;

正好 Google 正式发布了 Flutter，似乎上面的缺点可以完美解决，并保留优点（当时 Google 明确表示可以支持热更新，可惜后来叫停了，感觉上了贼船）,于是决定使用 Flutter 来重写；

下面介绍一下具体的实现：

状态管理

项目的状态管理是应该优先考虑的问题，如果状态管理没有考虑好，我们的项目往往会随着规模的扩大，复杂度的提升，慢慢的变得混乱，腐败；官方推荐的方式是 Bloc(Bussiness Logic Component) ,同时也查看了其它的一些实现，比如 fish-redux，最后还是发现 Bloc 的学习曲线比较平缓，借助于 Dart 的 Stream 和 Sinks，个人可以不借助第三方的框架或者 package 轻松的实现(实际用的是 RxDart, 一个对 Stream 和 Sinks 的封装)；

就像上图所示，widget 可以发送指令到 Bloc, 并且监听 Sream 获取状态变化，这样我们就可以很容易的将 业务逻辑 和 UI 分离开
more >>

最近使用 flutter_svg 这个 package 加载 svg 图片：
https://github.com/dnfield/flutter_svg.git

一开始的使用还算顺利，直到遇到了一个需求，需要设置 Container 的 DecorationImage，但是 DecorationImage 的 image 参数需要一个 ImageProvider:

1
2
3
4
5

/// The image to be painted into the decoration.
///
/// Typically this will be an [AssetImage] (for an image shipped with the
/// application) or a [NetworkImage] (for an image obtained from the network).
final ImageProvider image;

使用正常图片是没有问题的，但是如果能支持svg 的话岂不是很美，所以研究了一下 fluter_svg 这个 package，发现并没有提供相关的方法来调用，而且网上也没有相关的实现，那就只能自己动手，丰衣足食了。
先看看 ImageProvider 是个什么东东：

1

abstract class ImageProvider<T>

是个 abstract class ，似乎是个不错的信号，这意味着只要 extends ImageProvide 就可以作为参数传递进去了。那就先看看 Image 这个 Widget 是怎么实现的吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Image.memory(
    Uint8List bytes, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  }) : image = MemoryImage(bytes, scale: scale),
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);

工欲善其事，必先利其器。
之前用了挺长时间的 vim，最近接触 flutter，刚开始根据官方推荐在 Android studio 安装了插件，虽然也有 vim 插件，但是操作体验上难免不一致，而且有些操作避免不了要使用鼠标，最后下决心折腾一下 vim 下的开发环境，用了一段感觉还不错，分享一下。
这里默认大家已经安装了 dart SDK，flutter SDK。
more >>

最近 Flutter 刚刚宣布可以支持 web 开发，迫不及待的想要尝尝鲜，正好最近有开发一个网站的计划，直接开始吧。
安装 flutter_web 构建工具：

1

flutter pub global activate webdev

这里有个坑，会出现 webdev 版本 与 flutter 版本 不匹配的情况，可以重新激活一下指定版本：

1
2
3

pub global deactivate webdev
pub global activate webdev 2.0.6
flutter/flutter_web

flutter_web
这里是官方 flutter_web 的 GitHub 地址，我们把这个项目 clone 到本地：

1
2
3

cd examples/hello_world/
flutter pub upgrade
webdev serve

访问 ：

1

http://localhost:8080

就可以看到 hello world! 的页面了。

那么就开始新建一个项目吧，官方推荐 VS Code 和 IntelliJ 创建项目，鉴于之前刚刚从 VS Code 脱坑，不想折腾，想使用 command 直接创建，奈何没有找到方式，官方貌似也没有相关的说明，那就将 GitHub 上的 hello world 拿过来开始吧，我的项目名称叫 nishihouziqinglaidedoubima_fe(哈哈：你是猴子请来的逗比吗)：

1
2
3

mkdir nishihouziqinglaidedoubima_fe
cd nishihouziqinglaidedoubima_fe
cp xxx/flutter_web/examples/hello_web/* ./

最近 3D 打印机的价格算是比较亲民了，于是入手了一台两千元以内的 3D 打印机，刚刚开始的时候踩了很多的坑，导致浪费了大量的时间和精力，这里分享出来希望可以帮助更多志同道合的朋友。

• 打印时不出料,这是新手常犯的错误:

  • 检查进料是否充分;
  • 官方指导的挤出头温度是否偏低，适当调高一下挤出头温度;

• 模型不能固定到平台上，导致打印失败:

  • 平台是否调平,调平是不要忘了处理掉挤出头上残留的线材;
  • 平台是否易于模型黏贴，可以使用美纹纸将平台铺上;
  • 模型的首层打印速度是否过快，适当降低一下首层的打印速度;
  • 过早的启用了风扇降温，禁用首层的风扇降温，可以避免因为过快的冷却导致黏贴不牢;
  • 如果平台有加温的功能，适当提高一下平台的温度;
  • 平台上是否有异物，小的坑洞，如果有的话尽快处理掉，这些小的细节看起来不起眼，但是经常会导致打印失败;

• 模型顶部出现轮廓变平的情况:

  • 挤出头的温度太高;
  • 没有启用风扇冷却;

• 相邻的两个不连续的高点存在严重的拉丝现象:

  • 没有启用回抽功能;
  • 打印速度过快;

没有太多，但是以上每一条都是中肯的建议，希望可以有用。

我走在铺满月光的小路上

一只小白兔气喘吁吁的从路旁的灌木丛里跑出来

我就着月光看到她毛茸茸的漂亮极了

她张开胳膊拦住我

你 你不准再往前走了

为什么

你再走 再走就踩到月亮啦

我不再理她继续往前走

她往后挪了挪继续拦住我

都说啦不让你往前走了 你要踩到月亮啦 不让走就不让走

说完她紧张的咽了口唾沫 毛茸茸的耳朵也泌上了细细的汗珠

我无奈的笑笑

转身折了回去

眼角的余光看见她长吁了一口气 蹦蹦跳跳回到了灌木丛里

我 怎么可能踩得到月亮的啊

最近实现了一个挺有意思的功能。这里来记录一下。
需求：根据用户条件筛选出可用数据。

比如，有几条个人信息的数据，A用户想看到的数据是男性用户，B用户想看到的数女性用户，C用户想看到的是年龄大于30的女性用户，等等、、、

1
2
3

性别：男，年龄：28，居住地：北京；
性别：女，年龄：23，居住地：杭州；
性别：未知，年龄：16，居住地：济南；

一开始的想法是，为每个用户对应个人信息字段添加一个标示或者多个标示，作为过滤条件。

1
2
3

A 性别：男，年龄上限：无，年龄下限：无，居住地：无，
B 性别：女，年龄上限：无，年龄下限：无，居住地：无，
C 性别：女，年龄上限：无，年龄下限：30，居住地：无，

貌似可以满足需求，等等，以上的每个用户的判断条件之间都是·与·的关系，如果是·或·的关系怎么办，比如用户想看到的数据是大于30岁的男性或者小于20岁的女性：

1
2

性别：男，年龄上限：无，年龄下限：30，居住地：无，
性别：女，年龄上限：20，年龄下限：无，居住地：无，

用多条数据来标示·或·的关系，貌似也可以。但是如果用户想看到的数据是大于30岁的男性与居住于北京小于40岁的女性或者小于20岁的女性（当然前面与的结果是空，但是不妨碍会有这种需求啊，变态有的是），这种方式就没办法满足了，冥思苦想没有解决方案，同事建议可以看看后缀表达式，一看果然是好东西，这个条件可以表达成为：

1

性别男==年龄30>&&居住地北京==年龄40<&&性别女==&&&&性别女==年龄20<||（这里规定每个操作符都只能操作前面两个元素）

这个可读性好像比较差，用逗号隔开吧：

1

性别，男，==，年龄，30，>，&&，居住地，北京，==，年龄，40，<，&&，性别，女，==，&&，&&，性别，女，==，年龄，20，<，||

可以加上括号看看逻辑：

1

（（（（性别，男），==，（年龄，30），>），&&，（（（居住地，北京），==，（年龄，40），<），&&，（性别，女），==），&&），&&，（性别，女），==，（年龄，20），<），||

最近在做视频解码相关的工作，有一个功能需要将整个视频解码之后放到内存里面，经测试，一分钟的视频解码需要20s，不算太理想，考虑用多线程来实现。
基本思路是获取所有关键帧信息，然后开启不同的线程来从不同的关键帧开始解码。

1，获取所有关键帧信息，获取所有的关键帧时间戳，大约会花费0.2s：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

+ (NSMutableArray *)keyFramePtsWithM3u8Path:(NSString *)path{
    NSMutableArray *timestamp_array = [[NSMutableArray alloc] init];
    canceled = false;
    AVFormatContext *qFormatCtx = NULL;
    AVCodecContext *qCodeCtx = NULL;
    AVCodec *qCodec = NULL;
    AVPacket qPacket;
    struct SwsContext *qSwsCtx;
    const char *filePath = [path UTF8String];
    
    if (filePath == nil) {
        return nil;
    }
    
    av_register_all();
    
    if (avformat_open_input(&qFormatCtx, filePath, NULL, NULL) != 0) {
        return nil;
    }
    
    if (avformat_find_stream_info(qFormatCtx, NULL) < 0) {
        return nil;
    }
    
    av_dump_format(qFormatCtx, 0, filePath, 0);
    
    int videoStream = -1;
    for (int i = 0;i < qFormatCtx->nb_streams;i++) {
        if (qFormatCtx->streams[i]->codecpar->codec_type == AVMEDIA_TYPE_VIDEO) {
            videoStream = i;
            break;
        }
    }
    if (videoStream == -1) {
        return nil;
    }
    
    qCodeCtx = avcodec_alloc_context3(NULL);
    if (avcodec_parameters_to_context(qCodeCtx, qFormatCtx->streams[videoStream]->codecpar) < 0) {
        return nil;
    }
    qCodec = avcodec_find_decoder(qCodeCtx->codec_id);
    if (qCodeCtx == NULL) {
        return nil;
    }
    if (avcodec_open2(qCodeCtx, qCodec, NULL) < 0) {
        return nil;
    }
    
    qSwsCtx = sws_getContext(qCodeCtx->width,
                             qCodeCtx->height,
                             qCodeCtx->pix_fmt,
                             qCodeCtx->width,
                             qCodeCtx->height,
                             AV_PIX_FMT_RGBA,
                             SWS_BICUBIC, NULL, NULL, NULL);
    while (av_read_frame(qFormatCtx, &qPacket) >= 0) {
        if (qPacket.stream_index == videoStream) {
            if(canceled){
                av_packet_unref(&qPacket);
                break;
            }
            if(qPacket.flags==1){
                [timestamp_array addObject:[NSString stringWithFormat:@"%lld",qPacket.pts]];
            }
        }
        av_packet_unref(&qPacket);
    }
    sws_freeContext(qSwsCtx);
    avcodec_close(qCodeCtx);
    avformat_close_input(&qFormatCtx);
    return timestamp_array;
}

有时候我们需要将大量的图片放到内存里面，但是又不想占用太多内存。比如实现进度条拖拽流畅的正播倒播，只能先把视频帧解码之后放到内存中才能实现。如果是原始图片大小，假设为1280*720的图片，4通道，我们可以简单估算一下时长一分钟帧率为24视频解码之后所占内存的大小：

1

60*24*(1280*720*4/8)/1024 kB = 648000 kB = 632 MB

632 MB 的内存对于PC端好像还可以接受，但是对于移动端来说就显得弥足珍贵了，如果对图片的质量要求不要太高，我们可以改变图片的宽高来实现节省内存的目的，比如宽高都变为1/4，就可以将内存占用将为原来的1/16，这可是相当可观的，四通道的图片在内存中是以RGBARGBARGBA…这种方式排列的，所以我们可以用如下方式改变图片的宽高：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

int heigth = origin_height>>2;
int width = origin_width>>2;
for(int i = 0; i < heigth; i++){
    for(int j = 0; j < width; j++){
        mini_buffer[(i * width + j)<<2]         
            = buffer[(i * origin_width + j) << 4];
        mini_buffer[((i * width + j)<<2) + 1]   
            = buffer[((i * origin_width + j) << 4) + 1];
        mini_buffer[((i * width + j)<<2) + 2]   
            = buffer[((i * origin_width + j) << 4) + 2];
        mini_buffer[((i * width + j)<<2) + 3]   
            = buffer[((i * origin_width + j) << 4) + 3];
    }
}

当然你可以采用cv_resize，如果条件允许的话。