Browse Source

fix(style): 修正进度条问题 #0008676

gavin.chen 2 years ago
parent
commit
26ec9ec8d6

+ 1 - 1
lib/view/mobile_view/mobile_control_board/progress_bar.dart

@@ -93,7 +93,7 @@ class _ProgressBarState extends State<_ProgressBar> {
     if (index < 0) {
       index = 0;
     } else {
-      max = controller.totalFramesCount.toDouble();
+      max = controller.totalFramesCount.toDouble() - 1;
     }
 
     return SliderTheme(

+ 1 - 1
lib/view/player/control_board/control_board.dart

@@ -79,7 +79,7 @@ class _VidPlayerControlBoardState extends State<VidPlayerControlBoard> {
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             _PlayButton(),
-            const SizedBox(width: 12),
+            const SizedBox(width: 6),
             _PrevButton(),
             const SizedBox(width: 2),
             Expanded(child: _ProgressBar()),

+ 63 - 42
lib/view/player/control_board/progress_bar.dart

@@ -27,6 +27,7 @@ class _ProgressBarState extends State<_ProgressBar> {
   late String diagnosisOrganName = '';
   late final aiPatintController = Get.find<AiPatintController>();
   double curCursorIndex = -10;
+  static const marginSpace = 10.0;
 
   /// 获取关键帧
   void getKeyFrame() {
@@ -130,9 +131,9 @@ class _ProgressBarState extends State<_ProgressBar> {
     if (index < 0) {
       index = 0;
     } else {
-      max = controller.totalFramesCount.toDouble();
+      /// 第一帧下标为0 ,所以max要减1
+      max = controller.totalFramesCount.toDouble() - 1;
     }
-
     return SliderTheme(
       data: const SliderThemeData(
         trackHeight: 12,
@@ -143,51 +144,71 @@ class _ProgressBarState extends State<_ProgressBar> {
         BuildContext layoutBuilderContext,
         BoxConstraints constraints,
       ) {
+        final BoxConstraints insideConstraints = constraints.copyWith(
+          maxWidth: constraints.maxWidth - marginSpace * 2,
+        );
         return Stack(
           alignment: Alignment.center,
           children: [
-            Slider(
-              max: max,
-              value: index,
-              onChanged: (v) {
-                controller.pause();
-                controller.gotoFrame(v.toInt());
-              },
+            Container(
+              margin: const EdgeInsets.only(
+                left: marginSpace,
+                right: marginSpace,
+              ),
+              child: Slider(
+                max: max,
+                value: index,
+                onChanged: (v) {
+                  controller.pause();
+                  controller.gotoFrame(v.toInt());
+                },
+              ),
             ),
-            ...aiKeyFrame.map((i) {
-              return Obx(() {
-                if (aiPatintController.state.isShowAi) {
-                  return _PanelPoint(
-                    max: max,
-                    index: index,
-                    constraints: constraints,
-                    currentIndex: i.index,
-                    onChanged: () {
-                      controller.pause();
-                      controller.gotoFrame(i.index.toInt());
+            Container(
+              padding: const EdgeInsets.only(
+                left: marginSpace,
+              ),
+              child: Stack(
+                alignment: Alignment.center,
+                children: [
+                  ...aiKeyFrame.map((i) {
+                    return Obx(() {
+                      if (aiPatintController.state.isShowAi) {
+                        return _PanelPoint(
+                          max: max,
+                          index: index,
+                          constraints: insideConstraints,
+                          currentIndex: i.index,
+                          onChanged: () {
+                            controller.pause();
+                            controller.gotoFrame(i.index.toInt());
+                          },
+                          aiDiagnosticOrganName: i.name,
+                          curCursorIndex: curCursorIndex,
+                        );
+                      } else {
+                        return const SizedBox();
+                      }
+                    });
+                  }).toList(),
+                  _CursorTrack(
+                    constraints: insideConstraints,
+                    cursorUpdateCallback: (localPositionX) {
+                      setState(() {
+                        curCursorIndex =
+                            (localPositionX / insideConstraints.maxWidth * max)
+                                .roundToDouble();
+                      });
                     },
-                    aiDiagnosticOrganName: i.name,
-                    curCursorIndex: curCursorIndex,
-                  );
-                } else {
-                  return const SizedBox();
-                }
-              });
-            }).toList(),
-            _CursorTrack(
-              constraints: constraints,
-              cursorUpdateCallback: (localPositionX) {
-                setState(() {
-                  curCursorIndex = (localPositionX / constraints.maxWidth * max)
-                      .roundToDouble();
-                });
-              },
-              cursorExit: () {
-                setState(() {
-                  curCursorIndex = -10;
-                });
-              },
-            )
+                    cursorExit: () {
+                      setState(() {
+                        curCursorIndex = -10;
+                      });
+                    },
+                  )
+                ],
+              ),
+            ),
           ],
         );
       }),