Flutter 初体验:WebRTC DataChannel P2P Chat

去年年底了解了 Flutter 后,我就一直希望能够体验一把。半个月前,我想到可以把 WebRTC 的 DataChannel 带到 Flutter 的世界里,在 pub 上搜索 webrtc 无果后,我知道,机会来了。

说干就干,安卓的 WebRTC demo 以及 DataChannel 使用我都已经比较熟悉了(https://blog.piasy.com/2017/08/30/WebRTC-P2P-part1/),但 iOS 的 WebRTC demo 我还一直没有碰过,为此我需要把 iOS 的 demo 摘出来,并熟悉它的工作流程,所以也就有了「WebRTC-Native 源码导读(六):iOS P2P 连接过程和 DataChannel 使用」(https://blog.piasy.com/2018/04/05/WebRTC-iOS-DataChannel/)。

最后就是 Flutter plugin 的开发、demo 功能的开发了。plugin 开发主要还是平台相关代码的编写,熟悉了两端 WebRTC demo 的工作流程之后,做起来还是比较轻松的,demo 开发就完全进入 Flutter 的领地了,在这里我碰到了不少刺头,最大的就是「.9 图」(nine patch)的显示问题。

nine patch 显示

比如我们要给聊天消息增加气泡背景,那可以用 包一层 ,并给 设置图片 ,当然,为了能有左右分列的效果,我们在外面再包一层 ,最终代码如下:

如何设置,一开始完全是一头雾水,琢磨了一整晚上我才弄明白,原来它是 nine patch 横纵可拉伸区域的范围,比如下面这张图里,气泡所指的中间区域:

虽然这个区域在文件格式里肯定有记录,但 Flutter 并未实现其读取逻辑,因为目前还没有相关规范。从 Android Studio 的编辑器里,我们可以看到这个区域的左上角是 ,宽为 12,高为 8,所以 centerSlice 的取值就是 。

看起来很简单对不对?一开始如果有人这么告诉我,那也确实很简单……

此外,看到截图里左边和上边的黑色标记了吗?其实它们就是表明可拉伸区域的,安卓原生显示 nine patch 时,会自动忽略这一个像素的边框,但 Flutter 不会,所以如果我们使用的 nine patch 包含这些黑色标记,那就会被显示出来,所以还得在 Android Studio 编辑器里把这两个黑条给去掉:拖到它们宽度为 0 即可。

最后,我一开始是用设计师给的 2x 图,安卓原生放在 xhdpi 里显示正常,但在 Flutter 里就必须把上面的尺寸都乘 2,而这会让所有的元素都显得特别大,所以只能使用 1x 的图片了,不过这会让图像显示略有瑕疵。

虽然 Flutter 支持添加多种尺寸的图片,但一旦我加了 2x 的图后,Flutter 渲染时就会抛出异常:centerSlice was used with a BoxFit that does not guarantee that the image is fully visible. 正如报错信息所言,要么是我用得不对,要么是 Flutter 的 bug,interesting…

啰嗦这么多,主要是为了凑够 300 字数,够了够了 :)

欢迎大家去 GitHub star 支持!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180416G0BJI000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券