布局集录进行中...

allen8517 · Apr 4, 2024 · e43cc9f · e43cc9f
1 parent 2520eae
commit e43cc9f
Show file tree

Hide file tree

Showing 27 changed files with 758 additions and 197 deletions.
diff --git a/packages/app/lib/app/platform_adapter/window/windows_adapter.dart b/packages/app/lib/app/platform_adapter/window/windows_adapter.dart
@@ -12,7 +12,7 @@ class WindowsAdapter {
       await windowManager.ensureInitialized();
       WindowOptions windowOptions = const WindowOptions(
         size: Size(920,680),
-        minimumSize: Size(920,690),
+        minimumSize: Size(920/2,690/2),
         center: true,
         backgroundColor: Colors.transparent,
         skipTaskbar: false,

diff --git a/packages/artifact/lib/src/articles/view/desk_artifact_page.dart b/packages/artifact/lib/src/articles/view/desk_artifact_page.dart
@@ -34,8 +34,10 @@ class _DeskKnowledgePageState extends State<DeskKnowledgePage>  with SingleTicke
   }
   ArticleRepository aRepository = const ArticleRepository();
   ColumnizeRepository cRepository = const ColumnizeRepository();
+
   @override
   Widget build(BuildContext context) {
+    super.build(context);
 
     return MultiBlocProvider(
       providers: [

diff --git a/packages/layout/lib/src/bloc/display_logic.dart b/packages/layout/lib/src/bloc/display_logic.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import '../data/display_map/display_map.dart';
+import '../data/model/display_frame.dart';
 import 'display_state.dart';
 
 class DisplayLogic with ChangeNotifier {
@@ -9,19 +11,32 @@ class DisplayLogic with ChangeNotifier {
 
   DisplayState get state => _state;
 
-  bool get enableNext => _state.activeIndex < _state.total-1;
+  bool get enableNext => _state.activeIndex < _state.total - 1;
+
   bool get enablePrev => _state.activeIndex > 0;
 
   void nextPage() {
-    if(enableNext){
-      _state = _state.copyWith(activeIndex: _state.activeIndex+1);
+    if (enableNext) {
+      _state = _state.copyWith(activeIndex: _state.activeIndex + 1);
+      notifyListeners();
+    }
+  }
+
+  void active(String path) {
+    if (path != _state.router) {
+      int length = kDisplayMap[path]!.length;
+      _state = DisplayState(
+        router: path,
+        activeIndex: 0,
+        total: length,
+      );
       notifyListeners();
     }
   }
 
   void prevPage() {
-    if(enablePrev){
-      _state = _state.copyWith(activeIndex: _state.activeIndex-1);
+    if (enablePrev) {
+      _state = _state.copyWith(activeIndex: _state.activeIndex - 1);
       notifyListeners();
     }
   }

diff --git a/packages/layout/lib/src/bloc/display_state.dart b/packages/layout/lib/src/bloc/display_state.dart
@@ -1,5 +1,7 @@
 import 'package:layout/src/data/model/display_frame.dart';
 
+import '../data/display_map/display_map.dart';
+
 class DisplayState {
   final String router;
   final int activeIndex;
@@ -11,7 +13,9 @@ class DisplayState {
     required this.total,
   });
 
-  DisplayFrame get frame => kDisplayMap[router]![activeIndex];
+  DisplayFrame get frame {
+    return kDisplayMap[router]![activeIndex];
+  }
 
   DisplayState copyWith({
     int? total,

diff --git a/packages/layout/lib/src/data/display_map/base.dart b/packages/layout/lib/src/data/display_map/base.dart
@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:layout/src/views/base/positioned/positioned_show.dart';
+
+import '../../views/base/align/align_show.dart';
+import '../../views/base/align/align_show2.dart';
+import '../../views/base/padding/inner_padding.dart';
+import '../../views/base/padding/outer_padding.dart';
+import '../../views/base/padding/sizedbox_padding.dart';
+import '../../views/base/size/size_loss_by_align.dart';
+import '../../views/base/size/size_tight_constraint.dart';
+import '../../views/base/size/size_unconstraint.dart';
+import '../model/display_frame.dart';
+
+List<DisplayFrame> get baseSize => [
+      DisplayFrame(
+        title: '父级中的紧约束',
+        desc: "当前虽然指定 SizeBox 宽高为 150*100。但由于父级的紧约束被强制固定尺寸。"
+            "下一步，将父级的紧约束改为宽松约束。",
+        src: '',
+        display: (BuildContext context) => const SizeTightConstraint(
+          info: "受到紧约束\n尺寸无法生效",
+        ),
+      ),
+      DisplayFrame(
+        title: '用布局组件放宽父级约束',
+        desc:
+            "通过嵌套 Align、Row、Column、Flex、Scaffold 等组件， 提供一个宽松的父级约束，让 SizeBox 指定的尺寸可以生效"
+            "就可以生效。",
+        src: '',
+        display: (BuildContext context) => const LossDisplay(),
+      ),
+      DisplayFrame(
+        title: '用 UnconstrainedBox 组件解除约束',
+        desc: "通过嵌套 UnconstrainedBox 组件，可以解除之前父级对当前区域的约束，从而使指定尺寸生效。",
+        src: '',
+        display: (BuildContext context) => const SizeUnconstrain(),
+      ),
+    ];
+
+List<DisplayFrame> get basePadding => [
+  DisplayFrame(
+    title: 'Padding 实现内边距',
+    desc: "将色块区域视为边界，文字距离边界有一定的内边距。",
+    src: '',
+    display: (BuildContext context) => const InnerPadding(),
+  ),
+  DisplayFrame(
+    title: 'Padding 实现外边距',
+    desc:
+    "两个色块区域之间,右侧可以通过 Padding 嵌套，距离外部有边距。Container 的 margin 属性就是这个原理。",
+    src: '',
+    display: (BuildContext context) => const OuterPadding(),
+  ),
+  DisplayFrame(
+    title: 'SizedBox 实现边距',
+    desc:
+    "有时在行列布局中，可以通过空白的 SizedBox 组件进行站位，来简单地实现边距效果。",
+    src: '',
+    display: (BuildContext context) => const SizedBoxPadding(),
+  ),
+];
+
+List<DisplayFrame> get baseAlign => [
+  DisplayFrame(
+    title: 'Align 组件实现对齐',
+    desc: "Align 组件可以在自身区域内(示例中灰色)，对子组件(蓝色)进行对齐定位。",
+    src: '',
+    display: (BuildContext context) => const AlignShow(),
+  ),
+  DisplayFrame(
+    title: 'Align 实现 sin 排布',
+    desc: "由于Alignment对象可指定在父容器中宽高的分率位置，可以使用Align实现一些复杂的排布需求，比如按指定的数学方程变化位置。",
+    src: '',
+    display: (BuildContext context) => const AlignShow2(),
+  ),
+];
+
+List<DisplayFrame> get basePostioned => [
+  DisplayFrame(
+    title: 'Positioned 组件实现定位',
+    desc: "Positioned 组件可以在 Stack 组件内，对子组件指定位置(左上右下)进行定位布局。",
+    src: '',
+    display: (BuildContext context) => const PositionedShow(),
+  ),
+];
diff --git a/packages/layout/lib/src/data/display_map/display_map.dart b/packages/layout/lib/src/data/display_map/display_map.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+
+import '../../views/base/size/size_loss_by_align.dart';
+import '../../views/base/size/size_tight_constraint.dart';
+import '../../views/base/size/size_unconstraint.dart';
+import '../../views/popable/autocomplete_demo.dart';
+import '../../views/popable/dropdown_button_demo.dart';
+import '../../views/popable/dropdown_menu_demo.dart';
+import '../model/display_frame.dart';
+import 'base.dart';
+
+Map<String, List<DisplayFrame>> get kDisplayMap => {
+  '/base/size': baseSize,
+  '/base/padding': basePadding,
+  '/base/align': baseAlign,
+  '/base/positioned': basePostioned,
+
+  // '/popable/DropdownButton': [
+  //   DisplayFrame(
+  //     title: '下拉按钮 DropdownButton',
+  //     desc:
+  //     "Material 风格的下拉选择按钮。基于 Navigator 导航实现，推入 _DropdownRoute 路由，所以点击外部区域时，弹框消失，且外部无法响应该次点击事件。视图构建逻辑非常固定，可定制性低。条目一次性完全加载，不适合海量条目。",
+  //     src: '',
+  //     display: (BuildContext context) => const CustomDropDownButton(),
+  //   ),
+  // ],
+  // '/popable/DropdownMenu': [
+  //   DisplayFrame(
+  //     title: '下拉按钮 DropdownMenu',
+  //     desc:
+  //     "Material 风格的下拉选择按钮。基于 Navigator 导航实现，推入 _DropdownRoute 路由，所以点击外部区域时，弹框消失，且外部无法响应该次点击事件。视图构建逻辑非常固定，可定制性低。条目一次性完全加载，不适合海量条目。",
+  //     src: '',
+  //     display: (BuildContext context) => const DropdownMenuNode1(),
+  //   ),
+  // ],
+  // '/popable/Autocomplete': [
+  //   DisplayFrame(
+  //     title: '自动填充 Autocomplete',
+  //     desc:
+  //     "Material 风格的下拉选择按钮。基于 Navigator 导航实现，推入 _DropdownRoute 路由，所以点击外部区域时，弹框消失，且外部无法响应该次点击事件。视图构建逻辑非常固定，可定制性低。条目一次性完全加载，不适合海量条目。",
+  //     src: '',
+  //     display: (BuildContext context) => const AutocompleteDemo(),
+  //   ),
+  // ],
+};
diff --git a/packages/layout/lib/src/data/model/display_frame.dart b/packages/layout/lib/src/data/model/display_frame.dart
@@ -3,6 +3,9 @@ import 'package:flutter/cupertino.dart';
 import '../../views/base/size/size_tight_constraint.dart';
 import '../../views/base/size/size_loss_by_align.dart';
 import '../../views/base/size/size_unconstraint.dart';
+import '../../views/popable/autocomplete_demo.dart';
+import '../../views/popable/dropdown_button_demo.dart';
+import '../../views/popable/dropdown_menu_demo.dart';
 
 class DisplayFrame {
   final String title;
@@ -18,27 +21,4 @@ class DisplayFrame {
   });
 }
 
-Map<String, List<DisplayFrame>> get kDisplayMap => {
-      '/base/size': [
-        DisplayFrame(
-          title: '父级中的紧约束',
-          desc: "当前虽然指定 SizeBox 宽高为 150*100。但由于父级的紧约束被强制固定尺寸。"
-              "下一步，将父级的紧约束改为宽松约束。",
-          src: '',
-          display: (BuildContext context) => const SizeTightConstraint(info: "受到紧约束\n尺寸无法生效",),
-        ),
-        DisplayFrame(
-          title: '用布局组件放宽父级约束',
-          desc: "通过嵌套 Align、Row、Column、Flex、Scaffold 等组件， 提供一个宽松的父级约束，让 SizeBox 指定的尺寸可以生效"
-              "就可以生效。",
-          src: '',
-          display: (BuildContext context) => const LossDisplay(),
-        ),
-        DisplayFrame(
-          title: '用 UnconstrainedBox 组件解除约束',
-          desc: "通过嵌套 UnconstrainedBox 组件，可以解除之前父级对当前区域的约束，从而使指定尺寸生效。",
-          src: '',
-          display: (BuildContext context) => const SizeUnconstrain(),
-        ),
-      ]
-    };
+
diff --git a/packages/layout/lib/src/navigation/menu/flex.dart b/packages/layout/lib/src/navigation/menu/flex.dart
@@ -1,31 +1,36 @@
 import 'package:flutter/material.dart';
 // import 'package:iroute/app/res/fx_icon.dart';
-
+//     {
+//       'path': '/expanded',
+//       'label': '延展布局',
+//       // 'icon': Icons.text_fields,
+//     },
+// {
+// 'path': '/holy',
+// 'label': '圣杯布局',
+// // 'icon': Icons.text_fields,
+// },
 Map<String, dynamic> get drawMenus => {
-  'path': '/flex',
+  'path': '/multi',
   // 'icon': FxIcon.icon_paint,
-  'icon':Icons.local_florist,
-  'label': '行列布局',
+  'icon':Icons.multitrack_audio,
+  'label': '多子布局',
   'children': [
     {
-      'path': '/row',
-      'label': '行布局',
+      'path': '/row_column',
+      'label': '行列布局',
       // 'icon': Icons.text_fields,
     },
     {
-      'path': '/column',
-      'label': '列布局',
+      'path': '/wrap',
+      'label': '包裹布局',
       // 'icon': Icons.text_fields,
     },
     {
-      'path': '/expanded',
-      'label': '延展布局',
-      // 'icon': Icons.text_fields,
-    },
-    {
-      'path': '/holy',
-      'label': '圣杯布局',
+      'path': '/stack',
+      'label': '堆叠布局',
       // 'icon': Icons.text_fields,
     },
+
   ]
 };
diff --git a/packages/layout/lib/src/navigation/menu/grid_layout.dart b/packages/layout/lib/src/navigation/menu/grid_layout.dart
diff --git a/packages/layout/lib/src/navigation/menu/menu_repository_impl.dart b/packages/layout/lib/src/navigation/menu/menu_repository_impl.dart
@@ -1,10 +1,11 @@
 import 'dart:async';
 
+import 'package:layout/src/navigation/menu/popable.dart';
 import 'package:toly_menu/toly_menu.dart';
 import 'package:toly_menu_manager/toly_menu_manager.dart';
 
 import 'base_layout.dart';
-import 'grid_layout.dart';
+import 'scroll.dart';
 import 'layout.dart';
 import 'flex.dart';
 
@@ -19,6 +20,7 @@ class MenuRepositoryImpl implements MenuRepository {
         baseMenus,
         drawMenus,
         calcMenus,
+        // popableMenus,
       ]
     });
   }

diff --git a/packages/layout/lib/src/navigation/menu/popable.dart b/packages/layout/lib/src/navigation/menu/popable.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+// import 'package:iroute/app/res/fx_icon.dart';
+
+Map<String, dynamic> get popableMenus => {
+  'path': '/popable',
+  'icon': Icons.layers_rounded,
+  'label': '菜单浮层',
+  'children': [
+    {
+      'path': '/DropdownButton',
+      'label': '下拉按钮',
+    },
+    {
+      'path': '/DropdownMenu',
+      'label': '下拉菜单',
+      // 'icon': Icons.calculate_outlined,
+    },
+    {
+      'path': '/Autocomplete',
+      'label': '自动填充',
+      // 'icon': Icons.calculate_outlined,
+    },
+  ]
+};