fix: classtable toprow initalize

Author: BenderBlog

lib/page/classtable/classtable_constant.dart

@@ -51,3 +51,5 @@ List<String> weekList = [
   '周六',
   '周日',
 ];
+
+String pageTitle = "我的课表";

lib/page/classtable/classtable_page.dart

@@ -20,26 +20,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import 'dart:developer';
 import 'dart:io';
 
 import 'package:flutter/material.dart';
+import 'package:watermeter/page/classtable/class_table_view/class_table_view.dart';
 import 'package:watermeter/page/classtable/classtable_constant.dart';
 import 'package:watermeter/page/classtable/classtable_state.dart';
 import 'package:watermeter/page/classtable/not_arranged_class_list.dart';
-import 'package:watermeter/page/classtable/classtable_page_view.dart';
-import 'package:watermeter/page/classtable/week_choice_row.dart';
+import 'package:watermeter/page/classtable/week_choice_button.dart';
 import 'package:watermeter/repository/network_session.dart';
 import 'package:watermeter/repository/preference.dart' as preference;
 
-/// The [ClassTablePage] contains [WeekChoiceRow] and [ClassTablePageView].
 class ClassTablePage extends StatefulWidget {
   const ClassTablePage({super.key});
 
   @override
-  State<ClassTablePage> createState() => _ClassTablePageState();
+  State<StatefulWidget> createState() => _ClassTablePageState();
 }
 
 class _ClassTablePageState extends State<ClassTablePage> {
+  /// A lock of the week choice row.
+  /// When locked, choiceWeek cannot be changed.
+  bool isTopRowLocked = false;
+
+  /// Classtable pageView controller.
+  late PageController pageControl;
+
+  /// Week choice row controller.
+  late PageController rowControl;
+
   late BoxDecoration decoration;
   late ClassTableState classTableState;
 
@@ -56,13 +66,87 @@ class _ClassTablePageState extends State<ClassTablePage> {
             )
           : null,
     );
+
     super.initState();
   }
 
   @override
   void didChangeDependencies() {
-    super.didChangeDependencies();
     classTableState = ClassTableState.of(context)!;
+    log("Classtable state inited, ${classTableState.currentWeek}");
+    pageControl = PageController(
+      initialPage: classTableState.controllers.chosenWeek,
+      keepPage: true,
+    );
+
+    /// (weekButtonWidth + 2 * weekButtonHorizontalPadding)
+    /// is the width of the week choose button.
+    rowControl = PageController(
+      initialPage: classTableState.controllers.chosenWeek,
+      viewportFraction: (weekButtonWidth + 2 * weekButtonHorizontalPadding) /
+          MediaQuery.sizeOf(context).width,
+      keepPage: true,
+    );
+
+    super.didChangeDependencies();
+  }
+
+  /// Change the position in the topRow
+  void changeTopRow(int index) => rowControl.animateTo(
+        (weekButtonWidth + 2 * weekButtonHorizontalPadding) * index,
+        curve: Curves.easeInOut,
+        duration: const Duration(milliseconds: changePageTime),
+      );
+
+  /// A row shows a series of buttons about the classtable's index.
+  ///
+  /// This is at the top of the classtable. It contains a series of
+  /// buttons which shows the week index, as well as an overview in a 5x5 dot gridview.
+  ///
+  /// When user click on the button, the pageview will show the class table of the
+  /// week the button suggested.
+  Widget _topView() {
+    return SizedBox(
+      /// Related to the overview of the week.
+      height: MediaQuery.sizeOf(context).height >= 500
+          ? topRowHeightBig
+          : topRowHeightSmall,
+      child: Container(
+        padding: const EdgeInsets.only(
+          top: 2,
+          bottom: 4,
+        ),
+        child: PageView.builder(
+          controller: rowControl,
+          physics: const ClampingScrollPhysics(),
+          scrollDirection: Axis.horizontal,
+          itemCount: classTableState.semesterLength,
+          itemBuilder: (BuildContext context, int index) {
+            return WeekChoiceButton(
+              onTap: () {
+                isTopRowLocked = true;
+
+                /// The following sequence is used when triggering changing page.
+                ///  * topRowLocked
+                ///  * change the chosen week
+                ///  * trigger pageview controller [pageControl] change, as well as
+                ///  * change the [WeekChoiceRow]
+                classTableState.controllers.chosenWeek = index;
+                pageControl.animateToPage(
+                  index,
+                  curve: Curves.easeInOutCubic,
+                  duration: const Duration(milliseconds: changePageTime),
+                );
+                changeTopRow(index);
+
+                setState(() {});
+              },
+              index: index,
+            );
+          },
+        ),
+      ),
+    );
   }
 
   /// If no class, a special page appears.
@@ -109,25 +193,31 @@ class _ClassTablePageState extends State<ClassTablePage> {
                         ? topRowHeightBig
                         : topRowHeightSmall,
                   ),
-                  child: const WeekChoiceRow(),
+                  child: _topView(),
                 ),
                 Expanded(
                   child: DecoratedBox(
                     decoration: decoration,
-                    child: const ClassTablePageView(),
+                    child: _classTablePage(),
                   ),
                 ),
               ],
             )
           : Container(
               decoration: decoration,
+              // color: Colors.grey.shade200.withOpacity(0.75),
               child: const Center(
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                    Icon(Icons.error, size: 100),
-                    SizedBox(height: 30),
-                    Text("本学期学期没有课程，不会吧?"),
+                    Icon(
+                      Icons.error,
+                      size: 100,
+                    ),
+                    SizedBox(
+                      height: 30,
+                    ),
+                    Text("这个学期没有课程，不会吧?"),
                     Text("如果你没选课，快去 xk.xidian.edu.cn！"),
                     Text("如果你要毕业了，祝你前程似锦。"),
                     Text("如果你已经毕业，快去关注 SuperBart 哔哩哔哩帐号！"),
@@ -137,4 +227,31 @@ class _ClassTablePageState extends State<ClassTablePage> {
             ),
     );
   }
+
+  /// The [_classTablePage] is controlled by [pageControl].
+  Widget _classTablePage() => PageView.builder(
+        scrollDirection: Axis.horizontal,
+        controller: pageControl,
+        onPageChanged: (value) {
+          /// When [pageControl.animateTo] triggered,
+          /// page view will try to refresh the [chosenWeek] everytime the page
+          /// view changed into a new page. Because animateTo will load every page
+          /// it passed.
+          ///
+          /// So that's the [isTopRowLocked] is used for. When week choice row is
+          /// locked, it will not refresh the [chosenWeek]. And when [chosenWeek]
+          /// is equal to the current page, unlock the [isTopRowLocked].
+          if (!isTopRowLocked) {
+            setState(() {
+              changeTopRow(value);
+              classTableState.controllers.chosenWeek = value;
+            });
+          }
+          if (classTableState.controllers.chosenWeek == value) {
+            isTopRowLocked = false;
+          }
+        },
+        itemCount: classTableState.semesterLength,
+        itemBuilder: (context, index) => ClassTableView(index: index),
+      );
 }

lib/page/classtable/classtable_page_view.dart

@@ -20,9 +20,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import 'dart:developer';
+
 import 'package:flutter/material.dart';
 import 'package:watermeter/model/xidian_ids/classtable.dart';
-import 'package:watermeter/page/classtable/classtable_constant.dart';
 
 /// The controllers and shared datas of the class table.
 class ClassTableState extends InheritedWidget {
@@ -54,11 +55,6 @@ class ClassTableState extends InheritedWidget {
   /// The changeable data of the state.
   late final ClassTableWidgetState controllers;
 
-  /// Refrence [ClassTableWidgetState.isTopRowLocked]
-  bool get isTopRowLocked => controllers.isTopRowLocked;
-  set isTopRowLocked(bool status) =>
-      status ? controllers.lockTopRow() : controllers.unlockTopRow();
-
   ClassTableState({
     super.key,
     required super.child,
@@ -79,7 +75,10 @@ class ClassTableState extends InheritedWidget {
     } else {
       toShowChoiceWeek = currentWeek;
     }
-    controllers = ClassTableWidgetState(choiceWeek: toShowChoiceWeek, totalWeek: semesterLength,);
+    controllers = ClassTableWidgetState(
+      chosenWeek: toShowChoiceWeek,
+    );
+    log("Chosen Week is ${controllers.chosenWeek}");
   }
 
   static ClassTableState? of(BuildContext context) {
@@ -94,54 +93,10 @@ class ClassTableState extends InheritedWidget {
 
 /// The changeable data of the class table state.
 class ClassTableWidgetState extends ChangeNotifier {
-  /// Week choice row controller.
-  late ScrollController rowControl;
-
-  /// Classtable pageView controller.
-  late PageController pageControl;
-
   /// Current showing week.
-  late int chosenWeek;
-
-  /// From the length of the semester.
-  final int totalWeek;
-
-  /// A lock of the week choice row.
-  ///
-  /// When locked, choiceWeek cannot be changed.
-  bool isTopRowLocked = false;
-
-  void changeTopRow(int index) => rowControl.animateTo(
-        (weekButtonWidth + 2 * weekButtonHorizontalPadding) * index,
-        curve: Curves.easeInOut,
-        duration: const Duration(milliseconds: changePageTime ~/ 1.5),
-      );
+  int chosenWeek;
 
   ClassTableWidgetState({
-    required int choiceWeek,
-    required this.totalWeek,
-  }) {
-    chosenWeek = choiceWeek;
-    pageControl = PageController(
-      initialPage: chosenWeek,
-      keepPage: true,
-    );
-
-    /// (weekButtonWidth + 2 * weekButtonHorizontalPadding)
-    /// is the width of the week choose button.
-    rowControl = ScrollController(
-      initialScrollOffset:
-        totalWeek - chosenWeek < 5 ? (weekButtonWidth + 2 * weekButtonHorizontalPadding) * (totalWeek - 5)
-        :
-          (weekButtonWidth + 2 * weekButtonHorizontalPadding) * chosenWeek,
-    );
-  }
-
-  void lockTopRow() => isTopRowLocked = true;
-
-  /// When top row unlocked, notify the week choice row to refresh the state.
-  void unlockTopRow() {
-    isTopRowLocked = false;
-    notifyListeners();
-  }
+    required this.chosenWeek,
+  });
 }