Layout Playground

Author: toly1994328

packages/layout/lib/src/data/display_map/display_map.dart

@@ -17,6 +17,8 @@ Map<String, List<DisplayFrame>> get kDisplayMap => {
   '/base/positioned': basePostioned,
 
   '/multi/flex': multiFlex,
+  '/multi/wrap': multiWrap,
+  '/multi/stack': multiStack,
 
   // '/popable/DropdownButton': [
   //   DisplayFrame(

packages/layout/lib/src/data/display_map/multi.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:layout/src/views/base/positioned/positioned_show.dart';
+import 'package:layout/src/views/playground/view/stack/stack_playground.dart';
 
 import '../../views/base/align/align_show.dart';
 import '../../views/base/align/align_show2.dart';
@@ -10,11 +11,18 @@ 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/multi/flex/column_show.dart';
-import '../../views/multi/flex/flex_playground.dart';
+import '../../views/playground/view/flex/flex_playground.dart';
 import '../../views/multi/flex/row_show.dart';
+import '../../views/playground/view/wrap/wrap_playground.dart';
 import '../model/display_frame.dart';
 
 List<DisplayFrame> get multiFlex => [
+      DisplayFrame(
+        title: 'Flex PlayGround',
+        desc: "在 Flex PlayGround 中，你可以通过交互来直观体验 Flex 布局特性。灰色是 Flex 布局区域。",
+        src: '',
+        display: (BuildContext context) => const FlexPlayground(),
+      ),
       DisplayFrame(
         title: 'Row 组件横向排列',
         desc: "可以将若干个组件横向排列，区域宽度无上限约束，子组件总宽超过时会越界异常。详细布局特性见第三页: Flex PlayGround",
@@ -27,10 +35,23 @@ List<DisplayFrame> get multiFlex => [
         src: '',
         display: (BuildContext context) => const ColumnShow(),
       ),
+    ];
+
+List<DisplayFrame> get multiWrap => [
       DisplayFrame(
-        title: 'Flex PlayGround',
-        desc: "在 Flex PlayGround 中，你可以通过交互来直观体验 Flex 布局特性。灰色是 Flex 布局区域。",
+        title: 'Wrap PlayGround',
+        desc: "在 Wrap PlayGround 中，你可以通过交互来直观体验 Wrap 布局特性。",
         src: '',
-        display: (BuildContext context) => const FlexPlayground(),
+        display: (BuildContext context) => WrapPlayground(),
       ),
     ];
+
+List<DisplayFrame> get multiStack => [
+  DisplayFrame(
+    title: 'Stack PlayGround',
+    desc: "在 Stack PlayGround 中，你可以通过交互来直观体验 Stack 布局特性。",
+    src: '',
+    display: (BuildContext context) => StackPlayground(),
+  ),
+];
+

packages/layout/lib/src/navigation/menu/menu_repository_impl.dart

@@ -4,13 +4,10 @@ import 'layout.dart';
 import 'multi.dart';
 
 Map<String, dynamic> get layoutMenus => {
-      'path': '',
-      'label': '',
       'children': [
         home,
         baseMenus,
-        drawMenus,
+        multiMenus,
         calcMenus,
-// popableMenus,
       ]
     };

packages/layout/lib/src/navigation/menu/multi.dart

@@ -11,22 +11,22 @@ import 'package:flutter/material.dart';
 // 'label': '圣杯布局',
 // // 'icon': Icons.text_fields,
 // },
-Map<String, dynamic> get drawMenus => {
+Map<String, dynamic> get multiMenus => {
       'path': '/multi',
       'icon': Icons.multitrack_audio,
       'label': '多子布局',
       'children': [
         {
           'path': '/flex',
-          'label': '行列布局',
+          'label': 'Flex 适应布局',
         },
         {
           'path': '/wrap',
-          'label': '包裹布局',
+          'label': 'Wrap 包裹布局',
         },
         {
           'path': '/stack',
-          'label': '堆叠布局',
+          'label': 'Stack 堆叠布局',
         },
       ]
     };

packages/layout/lib/src/navigation/view/app_desk_navigation.dart

@@ -1,9 +1,8 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 import 'package:tolyui/tolyui.dart';
 
-import '../../views/playground/layout_playground.dart';
+import '../../views/display/layout_playground.dart';
 import 'app_menu_tree.dart';
 
 class AppDeskNavigation extends StatelessWidget {

packages/layout/lib/src/views/playground/layout_playground.dart renamed to packages/layout/lib/src/views/display/layout_playground.dart

@@ -6,10 +6,10 @@ class ColumnShow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     List<Color> colors = [
-      Color(0xffe64032),
-      Color(0xff307dee),
-      Color(0xfff9c01f),
-      Color(0xff309949),
+      const Color(0xffe64032),
+      const Color(0xff307dee),
+      const Color(0xfff9c01f),
+      const Color(0xff309949),
     ];
     return Column(
       children: [