feat: complete bottom play bar

Hao-yiwen · Sep 3, 2024 · f0e618e · f0e618e
1 parent 0a6afda
commit f0e618e
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 31 deletions.
diff --git a/lib/pages/roaming/roaming.dart b/lib/pages/roaming/roaming.dart
@@ -84,9 +84,12 @@ class _RoamingState extends State<Roaming> {
             SizedBox(
               height: 60.w,
             ),
-            PlayAlbumCover(
-              rotating: true,
-              pading: 40.w,
+            Hero(
+              tag: "test",
+              child: PlayAlbumCover(
+                rotating: true,
+                pading: 40.w,
+              ),
             ),
             SizedBox(
               height: 60.w,

diff --git a/lib/widgets/bottom_player_bar.dart b/lib/widgets/bottom_player_bar.dart
@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:flutter_tabler_icons/flutter_tabler_icons.dart';
+import 'package:netease_cloud_music_app/common/utils/image_utils.dart';
+import 'package:netease_cloud_music_app/pages/home/home_controller.dart';
+import 'package:netease_cloud_music_app/pages/roaming/roaming.dart';
 
 class BottomPlayerBar extends StatelessWidget {
   const BottomPlayerBar({super.key});
@@ -10,36 +13,84 @@ class BottomPlayerBar extends StatelessWidget {
     return Container(
         height: 50,
         width: double.infinity,
-        decoration: BoxDecoration(
+        decoration: const BoxDecoration(
           color: Colors.white,
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
+          borderRadius: BorderRadius.vertical(top: Radius.circular(10)),
         ),
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            SizedBox(width: 20.w),
-            Icon(
-              TablerIcons.brand_netease_music,
-              size: 40,
-            ),
-            SizedBox(width: 10),
-            Text(
-              '播放条占位~',
-              style: TextStyle(
-                  fontSize: 18,
-                  fontWeight: FontWeight.bold,
-                  color: Colors.black,
-                  fontFamily: 'Roboto',
-                  // 指定字体族
-                  decoration: TextDecoration.none),
-              overflow: TextOverflow.ellipsis, // 处理溢出文本
-            ),
-            Spacer(),
-            Icon(TablerIcons.player_play, size: 20),
-            SizedBox(width: 10),
-            Icon(TablerIcons.music, size: 20),
-            SizedBox(width: 20),
-          ],
+        child: GestureDetector(
+          onTap: () {
+            Roaming.showBottomPlayer(context);
+          },
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              SizedBox(width: 20.w),
+              Stack(
+                children: [
+                  Image.asset(
+                    ImageUtils.getImagePath('play_disc_mask'),
+                    fit: BoxFit.cover,
+                  ),
+                  Positioned.fill(
+                      child: Image.asset(ImageUtils.getImagePath('play_disc'))),
+                  Positioned.fill(
+                      child: Padding(
+                    padding: EdgeInsets.all(20.w),
+                    child: Transform.rotate(
+                      angle: 0,
+                      child: ClipOval(
+                        child: Image.network(
+                          "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
+                          fit: BoxFit.cover,
+                        ),
+                      ),
+                    ),
+                  )),
+                ],
+              ),
+              SizedBox(width: 20.w),
+              Row(
+                children: [
+                  Text(
+                    "Trouble I'm In",
+                    style: TextStyle(
+                        fontSize: 30.w,
+                        color: Colors.black,
+                        fontFamily: 'Roboto',
+                        // 指定字体族
+                        decoration: TextDecoration.none),
+                    overflow: TextOverflow.ellipsis, // 处理溢出文本
+                  ),
+                  Text(
+                    "- Twinbed",
+                    style: TextStyle(
+                        fontSize: 26.w,
+                        color: Colors.grey[500],
+                        fontFamily: 'Roboto',
+                        // 指定字体族
+                        decoration: TextDecoration.none),
+                    overflow: TextOverflow.ellipsis, // 处理溢出文本
+                  ),
+                ],
+              ),
+              const Spacer(),
+              Image.asset(
+                ImageUtils.getImagePath('list_btn_play'),
+                width: 40.w,
+                height: 40.w,
+                fit: BoxFit.cover,
+                color: Colors.black,
+              ),
+              SizedBox(width: 25.w),
+              Image.asset(
+                ImageUtils.getImagePath('play_btn_src'),
+                width: 40.w,
+                height: 40.w,
+                fit: BoxFit.cover,
+              ),
+              SizedBox(width: 25.w),
+            ],
+          ),
         ));
   }
 }