feat: ✨播放列表

xuergo · Mar 28, 2023 · 6dcad67 · 6dcad67
1 parent 8057bdd
commit 6dcad67
Show file tree

Hide file tree

Showing 24 changed files with 477 additions and 207 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,25 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "all-universe-flutter",
+            "request": "launch",
+            "type": "dart"
+        },
+        {
+            "name": "all-universe-flutter (profile mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile"
+        },
+        {
+            "name": "all-universe-flutter (release mode)",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release"
+        }
+    ]
+}
diff --git a/README.md b/README.md
@@ -33,6 +33,7 @@
 <img src="screenshots/sc4.png" alt="Gallery Image" width="30%" />
 <img src="screenshots/sc5.png" alt="Gallery Image" width="30%" />
 <img src="screenshots/sc6.png" alt="Gallery Image" width="30%" />
+<img src="screenshots/sc7.png" alt="Gallery Image" width="30%" />
 </p>
 
 ## 🌻学习参考  

diff --git a/ios/Runner.xcworkspace/contents.xcworkspacedata b/ios/Runner.xcworkspace/contents.xcworkspacedata
diff --git a/lib/components/play_btn.dart b/lib/components/play_btn.dart
@@ -54,9 +54,10 @@ class PlayBtn extends StatelessWidget {
   Widget _playerButtons() {
     final processingState = state.processingState;
 
-    if (data.id != state.playData!.id) {
+    if (data.id != state.playData?.id) {
       return _playBtn();
-    } else if (processingState == ProcessingState.loading ||
+    } else if (processingState == ProcessingState.idle ||
+        processingState == ProcessingState.loading ||
         processingState == ProcessingState.buffering) {
       return _loadingBtn();
     } else if (state.player.playing != true) {
@@ -74,13 +75,22 @@ class PlayBtn extends StatelessWidget {
       child: Container(
         padding: EdgeInsets.all(4.w),
         decoration: BoxDecoration(
-          color: color.withOpacity(0.1),
+          color: data.id == state.playData?.id
+              ? Colors.white
+              : color.withOpacity(0.1),
           borderRadius: BorderRadius.all(Radius.circular(100.r)),
+          border: Border.all(
+            color: data.id == state.playData?.id
+                ? AppColors.primaryGreyBackground
+                : color.withOpacity(0), // 设置边框颜色为红色
+            width: 4.0.w, // 设置边框宽度为 2 像素
+            style: BorderStyle.solid, // 使用实线样式
+          ),
         ),
         child: Icon(
           Icons.play_arrow_rounded,
           size: size != null ? size : 28.w,
-          color: color,
+          color: data.id == state.playData?.id ? Colors.black : color,
         ),
       ),
     );
@@ -92,13 +102,22 @@ class PlayBtn extends StatelessWidget {
       child: Container(
         padding: EdgeInsets.all(4.w),
         decoration: BoxDecoration(
-          color: color.withOpacity(0.1),
+          color: data.id == state.playData?.id
+              ? Colors.white
+              : color.withOpacity(0.1),
           borderRadius: BorderRadius.all(Radius.circular(100.r)),
+          border: Border.all(
+            color: data.id == state.playData?.id
+                ? AppColors.primaryGreyBackground
+                : color.withOpacity(0), // 设置边框颜色为红色
+            width: 4.0.w, // 设置边框宽度为 2 像素
+            style: BorderStyle.solid, // 使用实线样式
+          ),
         ),
         child: Icon(
           Icons.pause_rounded,
           size: size != null ? size : 28.w,
-          color: color,
+          color: data.id == state.playData?.id ? Colors.black : color,
         ),
       ),
     );

diff --git a/lib/pages/login/login_controller.dart b/lib/pages/login/login_controller.dart
@@ -4,6 +4,7 @@ import 'dart:developer';
 import 'package:all_universe_flutter/pages/login/login_state.dart';
 import 'package:all_universe_flutter/router/app_pages.dart';
 import 'package:all_universe_flutter/services/services.dart';
+import 'package:flutter_easyloading/flutter_easyloading.dart';
 import 'package:get/get.dart';
 
 class LoginController extends GetxController {
@@ -85,8 +86,10 @@ class LoginController extends GetxController {
         "phone": state.phoneController.text,
         "passWord": state.codeController.text,
       };
+      EasyLoading.show(status: 'loading...');
       await UserAPI.login(params: data);
       state.timer?.cancel();
+      EasyLoading.dismiss();
       Get.toNamed(AppRoutes.Tabbar);
     } catch (e) {
       log('$e');

diff --git a/lib/pages/login/login_view.dart b/lib/pages/login/login_view.dart
@@ -198,7 +198,7 @@ class LoginPage extends StatelessWidget {
           borderRadius: BorderRadius.all(Radius.circular(4.r)),
         ),
         child: Text(
-          '登录',
+          '登录 😁',
           style: TextStyle(
             color: Colors.white,
             fontSize: 18.sp,

diff --git a/lib/pages/play/bottom_play_bar_view.dart b/lib/pages/play/bottom_play_bar_view.dart
@@ -1,11 +1,11 @@
 import 'package:all_universe_flutter/common/colors/colors.dart';
 import 'package:all_universe_flutter/components/play_btn.dart';
 import 'package:all_universe_flutter/pages/play/play_controller.dart';
+import 'package:all_universe_flutter/pages/play/widgets/play_list_btn.dart';
 import 'package:all_universe_flutter/utils/common.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
-import 'package:just_audio/just_audio.dart';
 
 /// 底部播放栏
 class BottomPlayBarPage extends GetView<PlayController> {
@@ -73,18 +73,7 @@ class BottomPlayBarPage extends GetView<PlayController> {
                 SizedBox(width: 10.w),
                 PlayBtn(data: state.playData),
                 SizedBox(width: 10.w),
-                Container(
-                  padding: EdgeInsets.all(10.w),
-                  child: Icon(
-                    Icons.line_style_rounded,
-                    size: 20.w,
-                    color: AppColors.primaryColor,
-                  ),
-                  decoration: BoxDecoration(
-                    color: AppColors.primaryColor.withOpacity(0.1),
-                    borderRadius: BorderRadius.circular(100),
-                  ),
-                ),
+                PlayListBtn()
               ],
             ),
             decoration: BoxDecoration(

diff --git a/lib/pages/play/play_controller.dart b/lib/pages/play/play_controller.dart
@@ -1,7 +1,6 @@
 import 'dart:developer';
 
 import 'package:all_universe_flutter/pages/play/play_state.dart';
-import 'package:all_universe_flutter/services/home.dart';
 import 'package:get/get.dart';
 import 'package:just_audio/just_audio.dart';
 
@@ -12,49 +11,15 @@ class PlayController extends GetxController {
   void onInit() async {
     // await Future.delayed(Duration(seconds: 10));
 
-    /// 获取缓存数据
-
-    super.onInit();
-  }
-
-  @override
-  void onReady() {}
-
-  @override
-  void onClose() {
-    state.player.pause();
-    state.player.dispose();
-  }
-
-  /// 播放
-  void play(data) async {
-    /// 继续播放
-    if (state.playData != null && data.id == state.playData?.id) {
-      state.player.play();
-      return;
-    }
-
-    /// 切换歌曲
-    await state.player.stop();
-    await state.player.dispose();
-
-    state.player = AudioPlayer();
-    state.playData = await getDetails({'id': data.id});
-    update();
-    await state.player
-        .setAudioSource(AudioSource.uri(Uri.parse(state.playData!.url)));
-    state.player.play();
-
-    /// 时间转换系数
-    getTimeGini();
-
-    update();
-
     /// 监听播放器播放进度
     state.player.positionStream.listen(
       (position) {
         final duration = state.player.duration;
-        final remainingSeconds = (duration! - position).inSeconds;
+        if (duration == null) return;
+
+        /// 时间转换系数
+        getTimeGini();
+        final remainingSeconds = (duration - position).inSeconds;
         final remainingDuration = Duration(seconds: remainingSeconds);
         state.time =
             '${remainingDuration.inHours.toString().padLeft(2, '0')}:${remainingDuration.inMinutes.toString().padLeft(2, '0')}:${(remainingDuration.inSeconds % 60).toString().padLeft(2, '0')}';
@@ -78,6 +43,48 @@ class PlayController extends GetxController {
         update();
       },
     );
+
+    super.onInit();
+  }
+
+  @override
+  void onReady() {}
+
+  @override
+  void onClose() {
+    state.player.pause();
+    state.player.dispose();
+  }
+
+  /// 播放
+  void play(data) async {
+    /// 继续播放
+    if (state.playData != null && data.id == state.playData?.id) {
+      state.player.play();
+      return;
+    }
+
+    state.playData = data;
+    update();
+
+    /// 播放列表
+    int index =
+        state.playViewList.indexWhere((item) => item.id == state.playData.id);
+    if (index != -1) {
+      state.playViewList.removeAt(index);
+      await state.playList.removeAt(index);
+    }
+    state.playViewList.insert(0, state.playData);
+
+    await state.playList
+        .insert(0, AudioSource.uri(Uri.parse(state.playData.url)));
+
+    await state.player.setAudioSource(state.playList,
+        initialIndex: 0, initialPosition: Duration.zero);
+
+    await state.player.play();
+
+    update();
   }
 
   /// 拖动进度条
@@ -103,4 +110,19 @@ class PlayController extends GetxController {
     final totalSeconds = duration!.inSeconds;
     state.timeGini = 1 / totalSeconds;
   }
+
+  /// 拖拽事件
+  void onReorder(int oldIndex, int newIndex) {
+    if (oldIndex < newIndex) {
+      newIndex -= 1;
+    }
+
+    /// 视图列表
+    final item = state.playViewList.removeAt(oldIndex);
+    state.playViewList.insert(newIndex, item);
+
+    /// 播放列表
+    state.playList.removeAt(oldIndex);
+    state.playList.insert(0, AudioSource.uri(Uri.parse(item.url)));
+  }
 }