feat(WordCardOverView): add force column setting

Signed-off-by: OctagonalStar <[email protected]>

Author: OctagonalStar

lib/sub_pages_builder/learning_pages/learning_pages_build.dart

@@ -573,13 +573,71 @@ class _WordCardOverViewPage extends State<WordCardOverViewPage> {
   ScrollController classController = ScrollController();
   bool allowJsonScorll = true;
   bool allowClassScorll = false;
+  int forceColumn = 0;
 
   @override
   Widget build(BuildContext context) {
     MediaQueryData mediaQuery = MediaQuery.of(context);
     return Scaffold(
       appBar: AppBar(
         title: Text("单词总览"),
+        actions: [
+          IconButton(
+            onPressed: () async {
+              await showDialog(
+                context: context, 
+                builder: (context) {
+                  return AlertDialog(
+                    content: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        StatefulBuilder(
+                          builder: (context, setLocalState) {
+                            return Row(
+                              mainAxisSize: MainAxisSize.min,
+                              children: [
+                                Text("设置固定列数"),
+                                Slider(
+                                  min: 0,
+                                  max: 5,
+                                  divisions: 5,
+                                  value: forceColumn.toDouble(), 
+                                  onChanged: (value){
+                                    setLocalState(() {
+                                      forceColumn = value.ceil();
+                                    });
+                                  }
+                                ),
+                                SizedBox(width: 60, child: Text(forceColumn == 0 ? "0(自动)" : forceColumn.toString()))
+                              ],
+                            );
+                          }
+                        ),
+                      ],
+                    ),
+                    actions: [
+                      ElevatedButton(
+                        onPressed: (){
+                          Navigator.pop(context);
+                          setState(() {}); // 刷新全局状态
+                        }, 
+                        child: Text("确认")
+                      ),
+                      ElevatedButton(
+                        onPressed: (){
+                          Navigator.pop(context);
+                        }, 
+                        child: Text("取消")
+                      )
+                    ],
+                  );
+                }
+              );
+              
+            }, 
+            icon: Icon(Icons.view_column)
+          )
+        ],
       ),
       body: ListView.builder(
         physics: allowJsonScorll ? null : NeverScrollableScrollPhysics(),
@@ -648,15 +706,15 @@ class _WordCardOverViewPage extends State<WordCardOverViewPage> {
                           height: mediaQuery.size.height * 0.8,
                           child: GridView.builder(
                             itemCount: context.read<Global>().wordData["Classes"][jsonName][className].length,
-                            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: mediaQuery.size.width ~/ 300), 
+                            gridDelegate: forceColumn == 0 ? SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: mediaQuery.size.width ~/ 300) : SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: forceColumn), 
                             itemBuilder: (context, index) {
                               return Container(
                                 margin: EdgeInsets.all(8.0),
                                 child: WordCard(
                                   word: context.read<Global>().wordData["Words"][context.read<Global>().wordData["Classes"][jsonName][className][index]],
                                   useMask: false,
-                                  width: mediaQuery.size.width / (mediaQuery.size.width ~/ 300),
-                                  height: mediaQuery.size.width / (mediaQuery.size.width ~/ 300),
+                                  width: mediaQuery.size.width / (forceColumn == 0 ? (mediaQuery.size.width ~/ 300) : forceColumn),
+                                  height: mediaQuery.size.width / (forceColumn == 0 ? (mediaQuery.size.width ~/ 300) : forceColumn),
                                 ),
                               );
                             }