flutter架构项目基础

2026-09-04 15:22:20 +08:00
parent 70967229d0
commit 0c5aee59c0
265 changed files with 35484 additions and 0 deletions
@@ -0,0 +1,166 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:new_learn/core/utils/img_url.dart';
+import 'package:new_learn/features/class/class_update_view.dart';
+import 'package:new_learn/features/class/point_rank_view.dart';
+
+/// ============================================================
+/// 【ClassPage】「班级」tab 页 —— 对标 Vue pages/tabbar/class/class.vue
+///
+/// 一、Vue 源结构（壳 + 两个子页）：
+///   NavBar（透明、无返回）的 title 插槽 = 顶部 tab「班级动态 / 积分排行」
+///   content-body = ClassUpdate(tab0) + PointRank(tab1)，v-show 切换
+///
+/// 二、换算规则（本工程统一）：Vue 的 `N rpx` → Flutter 的 `(N/2).w/.h/.sp/.r`
+///   例：间距 20rpx → 10.w；卡片圆角 30rpx → 15.r；字号 28rpx → 14.sp
+///
+/// 三、对应关系：
+///   v-show 切换保留状态  → IndexedStack（保持两子页状态）
+///   v-if 懒加载          → _loadedTabs 首次切到才 build
+///   switchTab 后 handleShow → TODO(业务逻辑): 切回时刷新子页数据
+///
+/// 四、底部 Tabbar 由 MainTabPage 承载，此处不重复实现。
+/// ============================================================
+class ClassPage extends StatefulWidget {
+  const ClassPage({super.key});
+
+  @override
+  State<ClassPage> createState() => _ClassPageState();
+}
+
+class _ClassPageState extends State<ClassPage> {
+  static const Color _titleColor = Color(0xFF1D2B47);
+  static const Color _subtitleColor = Color(0xFF495A7A);
+  static const Color _primary = Color(0xFF3D7DF5);
+
+  static const List<String> _tabs = ['班级动态', '积分排行'];
+
+  int _currentTab = 0;
+
+  /// 懒加载标记（对标 Vue 的 loadedTabs）：首次切到才创建对应子页
+  final List<bool> _loadedTabs = [true, false];
+
+  void _switchTab(int index) {
+    if (_currentTab == index) return;
+    setState(() {
+      _loadedTabs[index] = true;
+      _currentTab = index;
+    });
+    // TODO(业务逻辑): 对应 Vue switchTab 的 nextTick 后调用子组件 handleShow 刷新。
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Stack(
+        children: [
+          // 页面底色（class-container 的 background-color: #F5F8FA）
+          const Positioned.fill(child: ColoredBox(color: Color(0xFFF5F8FA))),
+          // 顶部背景图：background-size 100% 512rpx → 高 256.h
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 256.h,
+            child: CachedNetworkImage(
+              imageUrl: ImgUrl.build(
+                '/StaticResource/2026-04-03/class-header-background-small.png',
+              ),
+              fit: BoxFit.fill,
+              width: double.infinity,
+            ),
+          ),
+          // 积分排行左上角装饰图（仅 tab1 显示；280rpx → 140.w）
+          if (_currentTab == 1)
+            Positioned(
+              top: 0,
+              left: 0,
+              width: 140.w,
+              height: 140.h,
+              child: IgnorePointer(
+                child: CachedNetworkImage(
+                  imageUrl: ImgUrl.build(
+                    '/StaticResource/2026-07-31/img_points1785468064641.png',
+                  ),
+                  fit: BoxFit.cover,
+                ),
+              ),
+            ),
+          SafeArea(
+            child: Column(
+              children: [
+                _buildTabBar(),
+                Expanded(
+                  child: IndexedStack(
+                    index: _currentTab,
+                    children: [
+                      if (_loadedTabs[0])
+                        const ClassUpdateView()
+                      else
+                        const SizedBox.shrink(),
+                      if (_loadedTabs[1])
+                        const PointRankView()
+                      else
+                        const SizedBox.shrink(),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// 顶部 tab 栏（对标 NavBar title 插槽）
+  Widget _buildTabBar() {
+    return SizedBox(
+      height: 44.h,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          for (int i = 0; i < _tabs.length; i++) ...[
+            if (i > 0) SizedBox(width: 20.w), // 两个 tab 各 margin 20rpx
+            _buildTabItem(i),
+          ],
+        ],
+      ),
+    );
+  }
+
+  Widget _buildTabItem(int index) {
+    final active = _currentTab == index;
+    return GestureDetector(
+      onTap: () => _switchTab(index),
+      behavior: HitTestBehavior.opaque,
+      child: SizedBox(
+        height: 44.h,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              _tabs[index],
+              style: TextStyle(
+                fontSize: active ? 16.sp : 14.sp,
+                fontWeight: active ? FontWeight.w700 : FontWeight.w400,
+                color: active ? _titleColor : _subtitleColor,
+              ),
+            ),
+            SizedBox(height: 6.h),
+            // 下划线指示（36rpx × 6rpx）
+            Container(
+              width: 18.w,
+              height: 3.h,
+              decoration: BoxDecoration(
+                color: active ? _primary : Colors.transparent,
+                borderRadius: BorderRadius.circular(2.r),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}