本篇为flutter开发音视频聊天框架所做的音视频UI框架,我的音视频开发流程为:
- 1.接入agora_flutter的demo,测试音视频渲染可行性
- 2.单独开发音视频UI框架
- 3.接入agora框架,编写业务
写这篇文章的时候,已经进入第三阶段了,这里大概讲下我觉得需要注意的几个点
浮层
flutter想要实现全局浮窗,只能使用OverlayEntry.
entry = OverlayEntry(builder: (context) {
return Positioned(
left: 0,
top: 0,
child: Container(
width: Screen.screenWidth,
height: Screen.screenHeight,
child: CallPage(),
),
);
});
Overlay.of(context)?.insert(entry!);
OverlayEntry是一个stack,所以可以使用position直接定位.
移除也十分简单
void dismissCall() {
// 离开房间
// 挂断接口调用
// UI变化
// im消息发送
entry?.remove();
}
这里有个延伸问题, 新添加entry一定会在老的entry之上,后续我会解决这个问题, 主要是维护一个全局的entries,entry继承并设置权重或者zindex等属性,然后通过rearrange重排.
大小窗动画
远端画面与本地画面切换, 小窗最小化
这里我自己封装了一个补间动画 SKPositionTween吗,主要是看了下系统的PositionedTransition使用的RelativeRect不太符合我的需求,我需要控制left, right, bottom, top, width, height属性,并且这6个属性都可为空,所以我自己封装了一个
class SKPosition {
double? left;
double? top;
double? right;
double? bottom;
double? width;
double? height;
SKPosition({
this.left = null,
this.top = null,
this.right = null,
this.bottom = null,
this.width = null,
this.height = null,
});
static SKPosition? lerp(SKPosition? a, SKPosition? b, double t) {
assert(t != null);
if (b == null) {
if (a == null) {
return null;
} else {
final double k = 1.0 - t;
return SKPosition(
left: a.left != null ? a.left! * k : null,
top: a.top != null ? a.top! * k : null,
right: a.right != null ? a.right! * k : null,
bottom: a.bottom != null ? a.bottom! * k : null,
width: a.width != null ? a.width! * k : null,
height: a.height != null ? a.height! * k : null,
);
}
} else {
if (a == null) {
return SKPosition(
left: b.left != null ? b.left! * t : null,
top: b.top != null ? b.top! * t : null,
right: b.right != null ? b.right! * t : null,
bottom: b.bottom != null ? b.bottom! * t : null,
width: b.width != null ? b.width! * t : null,
height: b.height != null ? b.height! * t : null,
);
} else {
return SKPosition(
left: (a.left != null && b.left != null)
? _lerpDouble(a.left!, b.left!, t)
: null,
top: (a.top != null && b.top != null)
? _lerpDouble(a.top!, b.top!, t)
: null,
right: (a.right != null && b.right != null)
? _lerpDouble(a.right!, b.right!, t)
: null,
bottom: (a.bottom != null && b.bottom != null)
? _lerpDouble(a.bottom!, b.bottom!, t)
: null,
width: (a.width != null && b.width != null)
? _lerpDouble(a.width!, b.width!, t)
: null,
height: (a.height != null && b.height != null)
? _lerpDouble(a.height!, b.height!, t)
: null,
);
}
}
}
static double _lerpDouble(double a, double b, double t) {
return a * (1.0 - t) + b * t;
}
@override
bool operator ==(Object other) =>
identical(this, other) ||
other is SKPosition &&
runtimeType == other.runtimeType &&
left == other.left &&
top == other.top &&
right == other.right &&
bottom == other.bottom &&
width == other.width &&
height == other.height;
@override
int get hashCode =>
left.hashCode ^
top.hashCode ^
right.hashCode ^
bottom.hashCode ^
width.hashCode ^
height.hashCode;
@override
String toString() {
return 'SKPosition{left: $left, top: $top, right: $right, bottom: $bottom, width: $width, height: $height}';
}
}
class SKPositionTween extends Tween {
SKPositionTween({SKPosition? begin, SKPosition? end})
: super(begin: begin, end: end);
@override
SKPosition? lerp(double t) => SKPosition.lerp(begin, end, t);
}
使用时:
// 大小窗
antlSmallBigWindow = AnimationController(duration: Duration(milliseconds: 500), reverseDuration: Duration(milliseconds: 350), vsync: this);
animWindowPositionForward = SKPositionTween(
// 默认全屏
begin: SKPosition(
right: 0,
top: 0,
width: Screen.screenWidth,
height: Screen.screenHeight,
),
// 小窗
end: SKPosition(
right: 20,
top: 80,
width: Screen.screenWidth * 0.25,
height: Screen.screenHeight * 0.25,
),
).animate(antlSmallBigWindow);
这里其实可以封装成显式动画的,这里主要是想给同事看到每个值变化的过程,所以没有封装,不过后面我应该还是会封装成SKPositionedTranstion这种.
手势拖拽
全局小窗时需要添加可移动手势,并添加吸边效果.
我自己封装了一个PanWidget, 代码太多,后续找个仓库把代码贴上去,大概使用样子
既然是拖摘的组件,外层一定是需要Stack的要不然没法定位.
PS
目前UI的逻辑层代码已经开始跟agora耦合起来了,后续看看能不能抽出来吧~
现在真是越来越懒得写blog了,给自己立点flag吧.