flutter - 如何让 Flutter Draggable 与 Agora Video 框架一起工作
问题描述
我有这个正在开发的视频通话应用程序。一切似乎都在原地踏步。我尝试实现的一种 UI 效果存在一个小问题。
所以情况是这样的:在实时通话中,比如在 messenger 或任何其他视频通话应用程序上,我希望用户 0 能够将他们的视频帧拖放到屏幕上的不同位置。
我使用颤振可拖动尝试了这个:
/// Video 0 View Customization to include draggable effect
Offset? position;
double prevScale = 1;
double scale = 1;
void updatePosition(Offset newPosition) =>
setState(() => position = newPosition);
ValueNotifier<Offset?> positionNotifier = ValueNotifier(null);
/// Video layout wrapper
Widget _viewRows() {
final views = _getRenderViews();
switch (views.length) {
case 1:
return Container(
child: Column(
children: <Widget>[_videoView(views[0])],
));
case 2:
return Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
_expandedVideoRow([views[1]]),
Positioned(
left: position == null
? MediaQuery.of(context).size.width / 1.5
: position!.dx,
top: position == null ? 50 : position!.dy,
child: Draggable(
maxSimultaneousDrags: 1,
feedback: Transform.scale(
scale: scale,
child: Container(
height: MediaQuery.of(context).size.height / 4.5,
width: MediaQuery.of(context).size.width / 3.2,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: _expandedVideoRow([views[0]]))),
),
childWhenDragging: Opacity(
opacity: .3,
child: Transform.scale(
scale: scale,
child: Container(
height: MediaQuery.of(context).size.height / 4.5,
width: MediaQuery.of(context).size.width / 3.2,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: _expandedVideoRow([views[0]]))),
),
),
onDragEnd: (details) => updatePosition(details.offset),
child: Transform.scale(
scale: scale,
child: Container(
height: MediaQuery.of(context).size.height / 4.5,
width: MediaQuery.of(context).size.width / 3.2,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: _expandedVideoRow([views[0]]))),
),
),
),
],
));
default:
}
return Container();
}
然后将它们显示在另一个主堆栈中:@override Widget build(BuildContext context) { Stack( fit: StackFit.expand, children: [
if (widget.calltype == 'videocall') ...[
child: _viewRows(),
]
...
有没有更好的方法来实现这种 UI Draggable 效果?
解决方案
您可以使用此小部件使其可拖动 https://pub.dev/packages/draggable_widget
推荐阅读
- javascript - Angular Universal APP & Lumen API, 本地开发 HttpErrorResponse (Http failure response for (unknown url): 0 Unknown Error)
- laravel - 针对唯一值的 Laravel 验证
- javascript - 如何在 JavaScript 中从最大值中随机取一个十进制数
- vb.net - 在 .Where(..).Tolist 之后 BindingList 是否仍然是绑定列表
- c - 链表上的指针问题
- android - Gradle 构建错误:协议族不可用
- javafx - 我正在尝试在某种双向链接列表上实现 GUI
- c - 来自用户的字符串输入
- wpf - WPF按钮文本在鼠标悬停时滚动
- javascript - 将 JSON 数据打印到 innerHTML 中变得未定义 - [对象]