feat: UI pages

lib/pages/like/like_page.dart

@@ -1,6 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:skywood/main/lib_file.dart';
+import 'package:skywood/pages/like/pages/collection_page.dart';
+import 'package:skywood/pages/like/pages/play_log_page.dart';
+import 'package:skywood/pages/like/widget/like_header.dart';
+import 'package:skywood/pages/widgets/common_bg_page.dart';
 import 'package:skywood/pages/widgets/pixel_widgets.dart';
+import 'package:skywood/utils/extend/app_keep_alive.dart';
 
 class LikePage extends StatefulWidget {
   const LikePage({super.key});
@@ -13,6 +18,7 @@ class LikePage extends StatefulWidget {
 
 class _MainRootState extends State<LikePage> {
   int _tabIndex = 0;
+  final _pageController = PageController(initialPage: 0);
 
   final List<String> _collectionTitles = const [
     'Undercover Play',
@@ -25,32 +31,44 @@ class _MainRootState extends State<LikePage> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      body: PixelPageBackground(
-        child: SafeArea(
+    return CommonBgPage(
+      child: SafeArea(
           bottom: false,
           child: Padding(
-            padding: EdgeInsets.fromLTRB(15.w, 44.h, 15.w, 0),
-            child: PixelPanel(
-              padding: EdgeInsets.fromLTRB(10.w, 18.h, 10.w, 22.h),
-              child: Column(
-                children: [
-                  _buildTabs(),
-                  SizedBox(height: 20.h),
-                  Expanded(
-                    child: AnimatedSwitcher(
-                      duration: const Duration(milliseconds: 180),
-                      child: _tabIndex == 0
-                          ? _buildCollection()
-                          : _buildPlayLog(),
-                    ),
+            padding: EdgeInsets.only(left: 15.w, right: 15.w, top: 20.h, bottom: 10.h+50.h),
+            child: Stack(
+              children: [
+                HelpImg.asset(ConstImg.likeBg, width: AppScreen.screenWidth - 30.w, height: 700.h,
+                  fit: BoxFit.fill,
+                ),
+                Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 10.w, vertical: 10.h),
+                  child: Column(
+                    children: [
+                      Padding(
+                        padding: const EdgeInsets.only(left: 10, top: 10),
+                        child: LikeHeader(
+                          onSelectedIndex: (index) {
+                            _pageController.jumpToPage(index);
+                          },
+                        ),
+                      ),
+                      // 主页面
+                      Expanded(
+                        child: PageView(
+                          controller: _pageController,
+                          children: [
+                            AppKeepAlive(child: CollectionPage()),
+                            AppKeepAlive(child: PlayLogPage())
+                          ],
+                        ),
+                      )
+                    ],
                   ),
-                ],
-              ),
+                ),
+              ],
             ),
-          ),
-        ),
-      ),
+          )),
     );
   }
 

lib/pages/like/pages/collection_page.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:skywood/main/lib_file.dart';
+
+class CollectionPage extends StatefulWidget {
+
+  const CollectionPage({super.key});
+
+  @override
+  State<StatefulWidget> createState() {
+    return _CollectionPageState();
+  }
+}
+
+class _CollectionPageState extends State<CollectionPage> {
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 10.h),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        mainAxisSpacing: 4,
+        crossAxisSpacing: 10,
+        childAspectRatio: 100 / 174.0
+      ),
+      itemBuilder: (context, index) {
+        return _buildItem(index);
+      },
+      itemCount: 5,
+    );
+  }
+  
+  Widget _buildItem(int index) {
+    return Stack(
+      children: [
+        HelpImg.asset(ConstImg.collectionBg, width: 100.w, height: 174.w, fit: BoxFit.fill,),
+
+      ],
+    );
+  }
+}

lib/pages/like/pages/play_log_page.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:skywood/main/lib_file.dart';
+import 'package:skywood/utils/tools/widgets/sky_common_widget.dart';
+
+class PlayLogPage extends StatefulWidget {
+
+  const PlayLogPage({super.key});
+
+  @override
+  State<StatefulWidget> createState() {
+    return _CollectionPageState();
+  }
+}
+
+class _CollectionPageState extends State<PlayLogPage> {
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.separated(
+      padding: const EdgeInsets.only(top: 20, left: 12, right: 12),
+      itemCount: 5,
+      itemBuilder: (context, index) {
+        return index == 0 ? _buildFirstItem() : _buildNormalItem();
+      },
+      separatorBuilder: (context, index) {
+        return SizedBox(height: 5);
+      }
+    );
+  }
+
+  Widget _buildNormalItem() {
+    return Stack(
+      children: [
+        HelpImg.asset(ConstImg.playlogBg, width: double.infinity, height: 90, fit: BoxFit.fill),
+        _ProgressLine(value: 0.2)
+      ],
+    );
+  }
+
+  Widget _buildFirstItem() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        HelpImg.asset(ConstImg.playlogBg, width: double.infinity, height: 140, fit: BoxFit.fill),
+        const SizedBox(height: 20),
+        SkyText(text: 'Watch History',
+          color: CommonColor.black,
+          fontSize: 16,
+          fontWeight: FontWeight.bold,
+        )
+      ],
+    );
+  }
+
+}
+
+
+class _ProgressLine extends StatelessWidget {
+  const _ProgressLine({required this.value});
+
+  final double value;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: Container(
+            height: 6.h,
+            decoration: BoxDecoration(
+              color: Colors.white.withValues(alpha: 0.7),
+              border: Border.all(color: const Color(0xFF1C1E1F), width: 0.5.w),
+              borderRadius: BorderRadius.circular(10.r),
+            ),
+            alignment: Alignment.centerLeft,
+            child: FractionallySizedBox(
+              widthFactor: value,
+              child: Container(
+                decoration: BoxDecoration(
+                  color: const Color(0xFF00EE02),
+                  borderRadius: BorderRadius.circular(10.r),
+                ),
+              ),
+            ),
+          ),
+        ),
+        SizedBox(width: 4.w),
+        Text('${(value * 100.0).toInt()}%', style: TextStyle(fontSize: 10.sp, height: 1)),
+      ],
+    );
+  }
+}

lib/pages/like/widget/like_header.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:skywood/main/lib_file.dart';
+import 'package:skywood/utils/tools/widgets/sky_common_widget.dart';
+
+class LikeHeader extends StatefulWidget {
+
+  const LikeHeader({super.key,
+    required this.onSelectedIndex,
+  });
+
+  final Function(int) onSelectedIndex;
+
+  @override
+  State<StatefulWidget> createState() {
+    return _LikeHeaderState();
+  }
+}
+
+class _LikeHeaderState extends State<LikeHeader> {
+
+  int _selectedIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 55,
+      child: Row(
+        children: [
+          _buildCollectionBg(0, 'My collection'),
+          _buildCollectionBg(1, 'Play Log'),
+        ],
+      ),
+    );
+  }
+
+
+  // shadows: [Shadow(offset: Offset(1, 1), blurRadius: 0, color: Color(0xFF040408).withOpacity(1.00))],
+  Widget _buildCollectionBg(int index, String title) {
+    String img = index == _selectedIndex ? ConstImg.likeSelectedBg : ConstImg.likeUnselectBg;
+    return SizedBox(
+      width: 155.w, height: 55,
+      child: Stack(
+        children: [
+          HelpImg.asset(img, width: 155.w, height: 55, fit: BoxFit.fill),
+          Positioned(
+            right: 22, bottom: 12, left: 28,
+            child: SkyText(text: title,
+              fontSize: 14,
+              fontWeight: FontWeight.w800,
+              color: index == _selectedIndex ? Colors.white : CommonColor.withValue('B1B1B1'),
+              shadow: index == _selectedIndex
+                  ? Shadow(offset: Offset(1, 1), blurRadius: 0, color: Color(0xFF040408).withOpacity(1.00))
+                  : null,
+              textAlign: TextAlign.center,
+            ),
+          )
+        ],
+      ),
+    ).addInkWell(onTap: () {
+      if (_selectedIndex == index) return;
+      setState(() {
+        _selectedIndex = index;
+      });
+      widget.onSelectedIndex(index);
+    },);
+  }
+
+  _buildLogBg() {
+    return Container(
+      width: 160.w, height: 55,
+      child: HelpImg.asset(ConstImg.playlogBg, fit: BoxFit.fill),
+    ).addInkWell(onTap: () {
+      if (_selectedIndex == 1) return;
+      setState(() {
+        _selectedIndex = 1;
+      });
+    },);
+  }
+}