【AICon】探索八个行业创新案例,教你在教育、金融、医疗、法律等领域实践大模型技术! >>> 了解详情
写点什么

Agora Flutter SDK:一套代码,实现双端通话(二)

  • 2019-11-30
  • 本文字数:2586 字

    阅读完需:约 8 分钟

Agora Flutter SDK:一套代码,实现双端通话(二)

绿色部分为我们定义的 Stingy,红色小方块为 Stingy 的 child ,这里是一个 Container


代码中的输入如下 (iphone 6 尺寸):


flutter: constraints: BoxConstraints(100.0<=w<=375.0, 100.0<=h<=300.0)flutter: childParentData: offset=Offset(275.0, 200.0)flutter: size: Size(375.0, 300.0)
复制代码


上述我们自定义 RenderBox 的 performLayout() 中做的事情可大概分为如下三个步骤:


  • 使用 child.layout(…) 来布局 child,这里是为 child 根据 parent 传递过来的约束选择一个大小

  • child.parentData.offset , 这是在为 child 如何摆放设置一个偏移量

  • 设置当前 widget 的 size


在我们的例子中,Stingy 的 child 是一个 Container,并且 Container 没有 child,因此他会使用 child.layout(…) 中设置的最大约束。通常,每个 widget 都会以不同的方式来处理提供给他的约束。如果我们使用 RaiseButton 替换 Container:


Stingy(    child: RaisedButton(      child: Text('Button'),    onPressed: (){}  )  )
复制代码


效果如下:



可以看到,RaisedButton 的 width 使用了 parent 给他传递的约束值 100,但是高度很明显没有 100,RaisedButton 的高度默认为 48 ,由此可见 RaisedButton 内部对 parent 传递过来的约束做了一些处理。


我们上面的 Stingy 继承的是 SingleChildRenderObjectWidget,也就是只能有一个 child。那如果有多个 child 怎么办,不用担心,这里还有一个 MultiChildRenderObjectWidget,而这个类有一个子类叫做 CustomMultiChildLayout,我们直接用这个子类就好。


先来看看 CustomMultiChildLayout 的构造方法如下:


/// The [delegate] argument must not be null.
CustomMultiChildLayout({ Key key, @required this.delegate, List<Widget> children = const <Widget>[],})
复制代码


  • key:widget 的一个标记,可以起到标识符的作用

  • delegate:这个特别重要,注释上明确指出这个参数一定不能为空,我们在下会说

  • children:这个就很好理解了,他是一个 widget 数组,也就是我们们需要渲染的 widget


上面的 delegate 参数类型如下:


  /// The delegate that controls the layout of the children.  final MultiChildLayoutDelegate delegate;
复制代码


可以看出 delegate 的类型为 MultiChildLayoutDelegate,并且注释也说明了它的作用:控制 children 的布局。也就是说,我们的 CustomMultiChildLayout 里面要怎么布局,完全取决于我们自定义的 MultiChildLayoutDelegate 里面的实现。所以 MultiChildLayoutDelegate 中也会有类似的 performLayout(…) 方法。


另外,CustomMultiChildLayout 中的每个 child 必须使用 LayoutId 包裹,注释如下:


/// Each child must be wrapped in a [LayoutId] widget to identify the widget for  /// the delegate.
复制代码


LayoutId 的构造方法如下:


  /// Marks a child with a layout identifier.  /// Both the child and the id arguments must not be null.  LayoutId({    Key key,    @required this.id,        @required Widget child  })
复制代码


注释的大概意思说的是:使用一个布局标识来标识一个 child;参数 child 和 参数 id 不定不能为空。 我们在布局 child 的时候会根据 child 的 id 来布局。


下面我们来使用 CustomMultiChildLayout 实现一个用于展示热门标签的效果:


Container(   child: CustomMultiChildLayout(     delegate: _LabelDelegate(itemCount: items.length, childId: childId),     children: items,   ), )
复制代码


我们的 _LabelDelegate 里面接受两个参数,一个为 itemCount,还有是 childId。


_LabelDelegate 代码如下:


class _LabelDelegate extends MultiChildLayoutDelegate {  final int itemCount;  final String childId;    // x 方向上的偏移量  double dx = 0.0;    // y 方向上的偏移量  double dy = 0.0;
_LabelDelegate({@required this.itemCount, @required this.childId}); @override void performLayout(Size size) { // 获取父控件的 width double parentWidth = size.width; for (int i = 0; i < itemCount; i++) { // 获取子控件的 id String id = '${this.childId}$i'; // 验证该 childId 是否对应一个 非空的 child if (hasChild(id)) { // layout child 并获取该 child 的 size Size childSize = layoutChild(id, BoxConstraints.loose(size)); // 换行条件判断 if (parentWidth - dx < childSize.width) { dx = 0; dy += childSize.height; } // 根据 Offset 来放置 child positionChild(id, Offset(dx, dy)); dx += childSize.width; } } } /// 该方法用来判断重新 layout 的条件 @override bool shouldRelayout(_LabelDelegate oldDelegate) { return oldDelegate.itemCount != this.itemCount; }}
复制代码


在 _LabelDelegate 中,重写了 performLayout(…) 方法。方法中有一个参数 size,这个 size 表示的是当前 widget 的 parent 的 size,在我们这个例子中也就表示 Container 的 size。我们可以看看 performLayout(…)方法的注释:


  /// Override this method to lay out and position all children given this  /// widget's size.  ///  /// This method must call [layoutChild] for each child. It should also specify  /// the final position of each child with [positionChild].  void performLayout(Size size);
复制代码


还有一个是 hasChild(…) 方法,这个方法接受一个 childId,childId 是由我们自己规定的,这个方法的作用是判断当前的 childId 是否对应着一个非空的 child。


满足 hasChild(…) 之后,接着就是 layoutChild(…) 来布局 child , 这个方法中我们会传递两个参数,一个是 childId,另外一个是 child 的约束(Constraints),这个方法返回的是当前这个 child 的 Size。


布局完成之后,就是如何摆放的问题了,也就是上述代码中的 positionChild(…) 了,此方法接受一个 childId 和 一个当前 child 对应的 Offset,parent 会根据这个 Offset 来放置当前的 child。


最后我们重写了 shouldRelayout(…) 方法用于判断重新 Layout 的条件。


完整源码在文章末尾给出。


效果如下:


2 Flutter 和 Native 的交互

我们这里说的 Native 指的是 Android 平台。


2019-11-30 15:04628

评论

发布
暂无评论
发现更多内容

微信视频号的排版,怎样才好看 | 视频号 28 天 (07)

赵新龙

28天写作

区块链轻节点:“身”轻,责任重

华为云开发者联盟

区块链 数据 数据隐私 轻节点

TypeScript 渐进迁移指南

LeanCloud

JavaScript typescript nodejs

Serverless 架构到底要不要服务器?

Serverless Devs

Java 云计算 Serverless 运维 云原生

GaussDB(DWS)性能调优系列实现篇六:十八般武艺Plan hint运用

华为云开发者联盟

数据库 性能优化 sql GaussDB 算子

一个奇怪的 Elasticsearch 节点

escray

elasticsearch elastic 28天写作 死磕Elasticsearch 60天通过Elastic认证考试

BI项目失败?看看是不是缺少了这几项闭环!

博文视点Broadview

开发更便捷 阿里云推出一站式应用研发平台EMAS 2.0

移动研发平台EMAS

阿里云 Serverless AI 低代码 移动研发平台

【HTML】已经废弃的align(图像对齐方式)

德育处主任

html html5 Web html/css 28天写作

开发老人笔记:Git 常用命令清单

华为云开发者联盟

git 代码 bug

OpenYurt v0.3.0 重磅发布:全面提升边缘场景下应用部署效率

阿里巴巴云原生

阿里巴巴 开源 容器 云原生 k8s

如何利用策略模式避免冗长的if-else/switch分支判断代码?

码农架构

Java 学习 设计模式

量化对冲搬砖套利交易APP开发|量化对冲搬砖套利交易系统软件开发

系统开发

流行的后台管理系统模板总结

老魚

程序员 建站 web全栈

百度智能小程序打造购票观影一站式体验,影视宣发新玩法助力行业复苏

DT极客

解决Windows2012 R2下安装PostgreSQL报错的问题

PostgreSQLChina

数据库 postgresql 开源

浅析Mysql数据库优化设计规范的“度”

三石

MySQL 28天写作

区块链双仓合约交易所系统开发

需求条目化:一个让用户故事有效落地的套路

华为云开发者联盟

敏捷 项目 需求条目化

即构微信小程序直播组件是什么?有哪些功能?哪些小程序类目可以使用?

ZEGO即构

量化策略交易软件开发|量化策略交易系统APP开发

系统开发

比特币矿机工作原理

v16629866266

比特币 比特币区块链

量化交易系统开发

威掂l8929545452

区块链 系统开发 量化交易系统 交易所

Redis 学习笔记 03:字典

架构精进之路

redis 七日更 28天写作

数据库表数据量大读写缓慢如何优化(2)「查询分离」

我爱娃哈哈😍

数据库 大数据 架构 后端 优化

Intel首次公布11代酷睿桌面处理器性能:8核i9斩落锐龙12核

科技新消息

自动驾驶汽车的发展史

anyRTC开发者

人工智能 自动驾驶 AI

红牛交易所app系统开发

威掂l8929545452

区块链 系统开发 APP开发 红牛交易所

Java Optimizing 读书笔记(一)

绝影-大数据

避免短信接口被黑客刷取的方法

香芋味的猫丶

短信防刷 接口安全 短信验证码 短信防轰炸 短信防火墙

百度研究院的追星逐浪,中国科技的奋发自强

脑极体

Agora Flutter SDK:一套代码,实现双端通话(二)_文化 & 方法_声网_InfoQ精选文章