Browse Source

悬浮窗的example的优化

Caijinglong 6 năm trước cách đây
mục cha
commit
5221dcf1cd
2 tập tin đã thay đổi với 71 bổ sung19 xóa
  1. 3 3
      TODOLIST.md
  2. 68 16
      example/lib/page/in_overlay_page.dart

+ 3 - 3
TODOLIST.md

@@ -73,7 +73,7 @@
   - [x] 切换全屏播放的示例代码
   - [x] 在列表中(ListView)
   - [x] 视频竖向分页滑动
-  - [ ] 在悬浮窗中播放
-    - [ ] 悬浮窗的UI控制器
-      - [ ] 允许
+  - [x] 在悬浮窗中播放
+    - [x] 悬浮窗的UI控制器
+      - [ ] 允许自定义UI
 - [x] iOS 部分视频无法显示图像的问题: 可能很长时间内都无法解决

+ 68 - 16
example/lib/page/in_overlay_page.dart

@@ -1,6 +1,8 @@
+import 'dart:ui' as ui;
+
 import 'package:flutter/material.dart';
-import 'package:ijkplayer_example/i18n/i18n.dart';
 import 'package:flutter_ijkplayer/flutter_ijkplayer.dart';
+import 'package:ijkplayer_example/i18n/i18n.dart';
 
 class InOverlayPage extends StatefulWidget {
   @override
@@ -92,24 +94,20 @@ class OverlayWidget extends StatefulWidget {
   _OverlayWidgetState createState() => _OverlayWidgetState();
 }
 
+const double _overlayWidth = 100;
+
 class _OverlayWidgetState extends State<OverlayWidget> {
   double dx = 0;
-  double dy = 0;
+  double dy = 1;
 
   @override
   Widget build(BuildContext context) {
-    var size = Size(200, 200 * widget.initVideoInfo.ratio);
     return NotificationListener<OffsetNotication>(
-      onNotification: (n) {
-        dx += n.offset.dx;
-        dy += n.offset.dy;
-        setState(() {});
-        return true;
-      },
+      onNotification: _onOffsetNoticiation,
       child: Align(
-        alignment: FractionalOffset.fromOffsetAndSize(Offset(dx, dy), size),
+        alignment: Alignment(dx, dy),
         child: Container(
-          width: 200,
+          width: _overlayWidth,
           child: AspectRatio(
             aspectRatio: widget.initVideoInfo.ratio,
             child: IjkPlayer(
@@ -126,6 +124,40 @@ class _OverlayWidgetState extends State<OverlayWidget> {
       ),
     );
   }
+
+  Offset _startOffset;
+
+  bool _onOffsetNoticiation(OffsetNotication notification) {
+    if (notification.type == OffsetType.start) {
+      _startOffset = Offset(dx, dy);
+      return true;
+    }
+
+    var offset = notification.offset;
+
+    var size = MediaQuery.of(context).size;
+
+    dx = _startOffset.dx + offset.dx / size.width * 2;
+    dy = _startOffset.dy + offset.dy / size.height * 2;
+
+    print("dx = $dx");
+    print("dy = $dy");
+
+    if (dx > 1) {
+      dx = 1;
+    } else if (dx < -1) {
+      dx = -1;
+    }
+
+    if (dy > 1) {
+      dy = 1;
+    } else if (dy < -1) {
+      dy = -1;
+    }
+
+    setState(() {});
+    return true;
+  }
 }
 
 class OverlayControllerWidget extends StatefulWidget {
@@ -170,18 +202,38 @@ class _OverlayControllerWidgetState extends State<OverlayControllerWidget> {
       child: child,
       behavior: HitTestBehavior.opaque,
       onTap: () => setState(() => showController = !showController),
-      // onLongPressMoveUpdate: (detail) {
-      //   print("onLongPressMoveUpdate detail = ${detail.offsetFromOrigin}");
+      // onPanUpdate: (detail) {
+      //   var notification = OffsetNotication()
+      //     ..offset = detail.delta
+      //     ..type = OffsetType.update;
+      //   notification.dispatch(context);
       // },
-      onPanUpdate: (detail) {
-        print("onPanUpdate detail = ${detail.delta}");
-        var notification = OffsetNotication()..offset = detail.delta;
+
+      // onPanStart: (detail) {
+      //   var notication = OffsetNotication()..type = OffsetType.start;
+      //   notication.dispatch(context);
+      // },
+      onLongPressMoveUpdate: (detail) {
+        var notification = OffsetNotication()
+          ..offset = detail.offsetFromOrigin
+          ..type = OffsetType.update;
         notification.dispatch(context);
       },
+      onLongPressStart: (detail) {
+        var n = OffsetNotication()..type = OffsetType.start;
+        n.dispatch(context);
+      },
     );
   }
 }
 
 class OffsetNotication extends Notification {
   Offset offset;
+
+  OffsetType type;
+}
+
+enum OffsetType {
+  start,
+  update,
 }