[Change] adjust mobile playPage

canxin121 · Jul 29, 2024 · 6d32b88 · 6d32b88
1 parent 12188b8
commit 6d32b88
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 81 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -48,24 +48,23 @@ class _MyAppState extends State<MyApp> {
       builder: (context, constraints) {
         _isWidthGreaterThanHeight = isWidthGreaterThanHeight(context);
         return ToastificationWrapper(
-          child: CupertinoApp(
-            localizationsDelegates: const [
-              DefaultMaterialLocalizations.delegate,
-              DefaultCupertinoLocalizations.delegate,
-              DefaultWidgetsLocalizations.delegate,
-            ],
-            theme: CupertinoThemeData(
-              applyThemeToAll: true,
-              textTheme: CupertinoTextThemeData(
-                textStyle: const TextStyle(color: CupertinoColors.black)
-                    .useSystemChineseFont(),
-              ),
+            child: CupertinoApp(
+          localizationsDelegates: const [
+            DefaultMaterialLocalizations.delegate,
+            DefaultCupertinoLocalizations.delegate,
+            DefaultWidgetsLocalizations.delegate,
+          ],
+          theme: CupertinoThemeData(
+            applyThemeToAll: true,
+            textTheme: CupertinoTextThemeData(
+              textStyle: const TextStyle(color: CupertinoColors.black)
+                  .useSystemChineseFont(),
             ),
-            home: _isWidthGreaterThanHeight
-                ? const DesktopHome()
-                : const MobileHome(),
           ),
-        );
+          home: _isWidthGreaterThanHeight
+              ? const DesktopHome()
+              : const MobileHome(),
+        ));
       },
     );
   }

diff --git a/lib/mobile/comps/chores/badge.dart b/lib/mobile/comps/chores/badge.dart
@@ -4,18 +4,17 @@ import 'package:flutter/material.dart';
 class Badge extends StatelessWidget {
   final String label;
   final VoidCallback? onClick;
+  final bool isDarkMode;
 
   const Badge({
     super.key,
     required this.label,
     this.onClick,
+    required this.isDarkMode,
   });
 
   @override
   Widget build(BuildContext context) {
-    final Brightness brightness = MediaQuery.of(context).platformBrightness;
-
-    final bool isDarkMode = brightness == Brightness.dark;
     Color backgroundColor =
         isDarkMode ? Colors.white : const Color.fromRGBO(0, 0, 0, 0.56);
     Color textColor = isDarkMode ? Colors.black : Colors.white;

diff --git a/lib/mobile/comps/music_container_comp/music_container_image_card.dart b/lib/mobile/comps/music_container_comp/music_container_image_card.dart
@@ -62,6 +62,7 @@ class MusicContainerImageCard extends StatelessWidget {
                         left: 3,
                         child: Badge(
                           label: sourceToShort(musicContainer.info.source),
+                          isDarkMode: isDarkMode,
                         ),
                       ),
                     Positioned(

diff --git a/lib/mobile/comps/music_container_comp/music_container_list_item.dart b/lib/mobile/comps/music_container_comp/music_container_list_item.dart
@@ -1,4 +1,3 @@
-import 'package:app_rhyme/mobile/comps/chores/badge.dart';
 import 'package:app_rhyme/pulldown_menus/music_container_pulldown_menu.dart';
 import 'package:app_rhyme/src/rust/api/bind/type_bind.dart';
 import 'package:app_rhyme/types/music_container.dart';
@@ -122,11 +121,9 @@ class _MusicContainerListItemState extends State<MusicContainerListItem> {
                   )
                 : _hasCache!
                     ? const Padding(
-                        padding: EdgeInsets.only(right: 8.0),
-                        child: Badge(
-                          label: '缓存',
-                        ),
-                      )
+                        padding: EdgeInsets.symmetric(horizontal: 5),
+                        child: Icon(CupertinoIcons.arrow_down_circle_fill,
+                            color: CupertinoColors.systemGrey2))
                     : const SizedBox.shrink(),
           // 具有误导性，暂时不显示
           // // 标志音乐信息来源的Badge

diff --git a/lib/mobile/comps/musiclist_comp/musiclist_image_card.dart b/lib/mobile/comps/musiclist_comp/musiclist_image_card.dart
@@ -44,6 +44,7 @@ class MusicListImageCard extends StatelessWidget {
               left: 3,
               child: Badge(
                 label: sourceToShort(musicListW.source()),
+                isDarkMode: isDarkMode,
               ),
             ),
             Positioned(

diff --git a/lib/mobile/comps/musiclist_comp/musiclist_list_item.dart b/lib/mobile/comps/musiclist_comp/musiclist_list_item.dart
@@ -84,6 +84,7 @@ class MusicListListItem extends StatelessWidget {
           // 标志音乐信息来源的Badge
           Badge(
             label: sourceToShort(musicListW.source()),
+            isDarkMode: isDarkMode,
           ),
           // 歌曲的操作按钮
           GestureDetector(

diff --git a/lib/mobile/comps/play_display_comp/progress_slider.dart b/lib/mobile/comps/play_display_comp/progress_slider.dart
@@ -7,7 +7,9 @@ import 'package:interactive_slider/interactive_slider.dart';
 
 class ProgressSlider extends StatefulWidget {
   final EdgeInsets padding;
-  const ProgressSlider({super.key, required this.padding});
+  final bool isDarkMode;
+  const ProgressSlider(
+      {super.key, required this.padding, required this.isDarkMode});
   @override
   ProgressSliderState createState() => ProgressSliderState();
 }
@@ -45,14 +47,11 @@ class ProgressSliderState extends State<ProgressSlider> {
 
   @override
   Widget build(BuildContext context) {
-    final isDarkMode =
-        MediaQuery.of(context).platformBrightness == Brightness.dark;
-
     return Container(
       padding: widget.padding,
       child: GestureDetector(
         child: InteractiveSlider(
-          brightness: isDarkMode ? Brightness.light : Brightness.dark,
+          brightness: widget.isDarkMode ? Brightness.light : Brightness.dark,
           padding: const EdgeInsets.all(0),
           controller: _progressController,
           onProgressUpdated: (value) {

diff --git a/lib/mobile/comps/play_display_comp/quality_time.dart b/lib/mobile/comps/play_display_comp/quality_time.dart
@@ -25,15 +25,18 @@ class QualityTimeState extends State<QualityTime> {
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          Obx(() => Text(
-                formatDuration(
-                    globalAudioUiController.position.value.inSeconds),
-                textAlign: TextAlign.left,
-                style: TextStyle(
-                  color: CupertinoColors.systemGrey6,
-                  fontWeight: FontWeight.w300,
-                  fontSize: widget.fontHeight,
-                ).useSystemChineseFont(),
+          Obx(() => SizedBox(
+                width: 60,
+                child: Text(
+                  formatDuration(
+                      globalAudioUiController.position.value.inSeconds),
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                    color: CupertinoColors.systemGrey6,
+                    fontWeight: FontWeight.w300,
+                    fontSize: widget.fontHeight,
+                  ).useSystemChineseFont(),
+                ),
               )),
           // 音质信息按钮
           GestureDetector(
@@ -53,29 +56,32 @@ class QualityTimeState extends State<QualityTime> {
             },
             child: Obx(() {
               return Badge(
+                isDarkMode: true,
                 label: globalAudioHandler
                         .playingMusic.value?.currentQuality.value?.short ??
                     "Quality",
               );
             }),
           ),
-          Obx(() => Text(
-                formatDuration(
-                    globalAudioUiController.duration.value.inSeconds),
-                textAlign: TextAlign.right,
-                style: TextStyle(
-                  color: CupertinoColors.systemGrey6,
-                  fontWeight: FontWeight.w300,
-                  fontSize: widget.fontHeight,
-                ).useSystemChineseFont(),
+          Obx(() => SizedBox(
+                width: 60,
+                child: Text(
+                  formatDuration(
+                      globalAudioUiController.duration.value.inSeconds),
+                  textAlign: TextAlign.right,
+                  style: TextStyle(
+                    color: CupertinoColors.systemGrey6,
+                    fontWeight: FontWeight.w300,
+                    fontSize: widget.fontHeight,
+                  ).useSystemChineseFont(),
+                ),
               )),
         ],
       ),
     );
   }
 }
 
-// 选择变更后的quality的触发操作
 List<PullDownMenuEntry> qualitySelectPullDown(
         BuildContext context,
         List<Quality> qualitys,

diff --git a/lib/mobile/comps/play_display_comp/volume_slider.dart b/lib/mobile/comps/play_display_comp/volume_slider.dart
@@ -6,7 +6,8 @@ import 'package:interactive_slider/interactive_slider.dart';
 
 class VolumeSlider extends StatefulWidget {
   final EdgeInsetsGeometry? padding;
-  const VolumeSlider({super.key, this.padding});
+  final bool isDarkMode;
+  const VolumeSlider({super.key, this.padding, required this.isDarkMode});
 
   @override
   State<StatefulWidget> createState() => VolumeSliderState();
@@ -31,14 +32,12 @@ class VolumeSliderState extends State<VolumeSlider> {
 
   @override
   Widget build(BuildContext context) {
-    final bool isDarkMode =
-        MediaQuery.of(context).platformBrightness == Brightness.dark;
-
     return Container(
       padding: widget.padding,
       child: InteractiveSlider(
-        brightness: isDarkMode ? Brightness.light : Brightness.dark,
-        iconColor: isDarkMode ? CupertinoColors.white : CupertinoColors.black,
+        brightness: widget.isDarkMode ? Brightness.light : Brightness.dark,
+        iconColor:
+            widget.isDarkMode ? CupertinoColors.white : CupertinoColors.black,
         controller: volumeController,
         padding: const EdgeInsets.all(0),
         onProgressUpdated: (value) {

diff --git a/lib/mobile/pages/play_display_page.dart b/lib/mobile/pages/play_display_page.dart
@@ -51,14 +51,12 @@ class SongDisplayPageState extends State<SongDisplayPage> {
 
   @override
   Widget build(BuildContext context) {
-    final brightness = MediaQuery.of(context).platformBrightness;
-    final bool isDarkMode = brightness == Brightness.dark;
-    final backgroundColor = brightness == Brightness.dark
-        ? CupertinoColors.black
-        : CupertinoColors.white;
-    final textColor = brightness == Brightness.dark
-        ? CupertinoColors.white
-        : CupertinoColors.black;
+    const bool isDarkMode = true;
+    const animateBackgroundColor = CupertinoColors.white;
+    const backgroundColor1 = Color.fromARGB(255, 56, 56, 56);
+    const backgroundColor2 = Color.fromARGB(255, 31, 31, 31);
+
+    const textColor = CupertinoColors.white;
 
     double screenWidth = MediaQuery.of(context).size.width;
     double screenHeight = MediaQuery.of(context).size.height;
@@ -94,15 +92,15 @@ class SongDisplayPageState extends State<SongDisplayPage> {
               children: [
                 Text(
                   '待播清单',
-                  style: TextStyle(
+                  style: const TextStyle(
                     color: textColor,
                     fontSize: 16.0,
                   ).useSystemChineseFont(),
                 ),
                 GestureDetector(
                   child: Text(
                     '删除所有',
-                    style: TextStyle(
+                    style: const TextStyle(
                       color: textColor,
                       fontSize: 16.0,
                     ).useSystemChineseFont(),
@@ -116,9 +114,7 @@ class SongDisplayPageState extends State<SongDisplayPage> {
           ),
           // 应当占据剩下的所有高度
           MusicListComp(
-            maxHeight: Platform.isIOS
-                ? screenHeight * 0.87 - 350
-                : screenHeight * 0.87 - 300,
+            maxHeight: screenHeight * 0.87 - 300,
           ),
         ];
         break;
@@ -130,9 +126,7 @@ class SongDisplayPageState extends State<SongDisplayPage> {
           ),
           // 应当占据剩下的空间
           LyricDisplay(
-            maxHeight: (Platform.isIOS)
-                ? screenHeight * 0.87 - 290
-                : screenHeight * 0.87 - 240,
+            maxHeight: screenHeight * 0.87 - 240,
             isDarkMode: isDarkMode,
           )
         ];
@@ -142,22 +136,15 @@ class SongDisplayPageState extends State<SongDisplayPage> {
     return DismissiblePage(
       isFullScreen: true,
       direction: DismissiblePageDismissDirection.down,
-      backgroundColor: backgroundColor,
+      backgroundColor: animateBackgroundColor,
       onDismissed: () => Navigator.of(context).pop(),
       child: Container(
           clipBehavior: Clip.antiAliasWithSaveLayer,
-          decoration: BoxDecoration(
+          decoration: const BoxDecoration(
             gradient: LinearGradient(
               begin: Alignment.topRight,
               end: Alignment.bottomLeft,
-              colors: [
-                brightness == Brightness.dark
-                    ? CupertinoColors.darkBackgroundGray
-                    : CupertinoColors.systemGrey2,
-                brightness == Brightness.dark
-                    ? CupertinoColors.black
-                    : CupertinoColors.systemGrey,
-              ],
+              colors: [backgroundColor2, backgroundColor1],
             ),
           ),
           child: Stack(children: [
@@ -190,6 +177,7 @@ class SongDisplayPageState extends State<SongDisplayPage> {
                   const ProgressSlider(
                     padding: EdgeInsets.only(
                         top: 10, bottom: 10, left: 20, right: 20),
+                    isDarkMode: true,
                   ),
                   // 占据 12 高度
                   const QualityTime(
@@ -206,6 +194,7 @@ class SongDisplayPageState extends State<SongDisplayPage> {
                       )),
                   const VolumeSlider(
                     padding: EdgeInsets.only(left: 20, right: 20),
+                    isDarkMode: true,
                   ),
                   // if (!Platform.isIOS) const VolumeSlider(),
                   // 占据 55 的高度