tolyui_navigation select path

lib/view/widgets/overview/basic_display.dart

@@ -1,24 +1,59 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:tolyui/basic/basic.dart';
+import 'package:tolyui/tolyui.dart';
+
+class ActionOverview extends StatelessWidget {
+  const ActionOverview({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    ActionStyle style = ActionStyle(
+      borderRadius: BorderRadius.circular(4),
+      padding: const EdgeInsets.all(4),
+      backgroundColor: Colors.blue.withOpacity(0.1),
+      border: Border.all(color: context.isDark ? Colors.blueAccent : Colors.blue),
+      selectColor: Colors.blue.withOpacity(0.2),
+    );
+    return IgnorePointer(
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 6),
+        child: Wrap(
+          spacing: 4,
+          children: [
+            TolyAction(
+              onTap: () {  },
+              child: Icon( CupertinoIcons.wand_rays ),
+            ),
+            TolyAction(
+              selected: true,
+              style: style,
+              onTap: () {  },
+              child: Icon(CupertinoIcons.move  ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 
 class ButtonOverview extends StatelessWidget {
   const ButtonOverview({super.key});
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 6),
+      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 6),
       decoration: BoxDecoration(
           color: Colors.blue,
           borderRadius: BorderRadius.circular(4),
           boxShadow: [
-            BoxShadow(
-                color: Colors.blue.withOpacity(0.2),
-                spreadRadius: 1,
-                blurRadius: 6)
+            BoxShadow(color: Colors.blue.withOpacity(0.2), spreadRadius: 1, blurRadius: 6)
           ]),
-      child: Text(
+      child: const Text(
         'Event',
         style: TextStyle(color: Colors.white),
       ),
@@ -35,33 +70,27 @@ class IconOverview extends StatelessWidget {
       spacing: 12,
       children: [
         Container(
-          padding: EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
           decoration: BoxDecoration(
               color: Colors.black,
               borderRadius: BorderRadius.circular(4),
               boxShadow: [
-                BoxShadow(
-                    color: Colors.black.withOpacity(0.2),
-                    spreadRadius: 1,
-                    blurRadius: 6)
+                BoxShadow(color: Colors.black.withOpacity(0.2), spreadRadius: 1, blurRadius: 6)
               ]),
-          child: Icon(
+          child: const Icon(
             Icons.pages_outlined,
             color: Colors.white,
           ),
         ),
         Container(
-          padding: EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
           decoration: BoxDecoration(
               color: Colors.white,
               borderRadius: BorderRadius.circular(4),
               boxShadow: [
-                BoxShadow(
-                    color: Colors.grey.withOpacity(0.2),
-                    spreadRadius: 1,
-                    blurRadius: 6)
+                BoxShadow(color: Colors.grey.withOpacity(0.2), spreadRadius: 1, blurRadius: 6)
               ]),
-          child: Icon(
+          child: const Icon(
             Icons.insights,
             color: Colors.black,
           ),
@@ -76,22 +105,17 @@ class TextOverview extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Wrap(
+    return const Wrap(
       spacing: 12,
       crossAxisAlignment: WrapCrossAlignment.end,
       children: [
         Text(
           'Toly',
-          style: TextStyle(
-              fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black),
+          style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black),
         ),
         Text(
           'UI',
-          style: TextStyle(
-              fontSize: 32,
-              fontWeight: FontWeight.bold,
-              color: Colors.red,
-              height: 1),
+          style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold, color: Colors.red, height: 1),
         ),
         Text(
           'Design',
@@ -111,17 +135,15 @@ class LinkOverview extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return
-        Text(
-          'Link Widget',
-          style: TextStyle(
-              fontSize: 24,
-              color: Colors.blue,
-              fontWeight: FontWeight.bold,
-              decorationColor: Colors.blue,
-              // color: Colors.grey,
-              decoration: TextDecoration.underline),
-
+    return const Text(
+      'https://',
+      style: TextStyle(
+          fontSize: 24,
+          color: Colors.blue,
+          fontWeight: FontWeight.bold,
+          decorationColor: Colors.blue,
+          // color: Colors.grey,
+          decoration: TextDecoration.underline),
     );
   }
 }
@@ -131,18 +153,14 @@ class LayoutOverview extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    Color color = Color(0xffd4d7de);
+    Color color = const Color(0xffd4d7de);
     Color bg = Colors.white;
-    Color tiledColor = Color(0xffe4e7ed);
+    Color tiledColor = const Color(0xffe4e7ed);
 
     Widget box2 = Container(
       width: 40,
       height: 14,
-
-      decoration: BoxDecoration(
-        color: tiledColor,
-        borderRadius: BorderRadius.circular(2)
-      ),
+      decoration: BoxDecoration(color: tiledColor, borderRadius: BorderRadius.circular(2)),
     );
     return Wrap(
       spacing: 12,
@@ -154,18 +172,15 @@ class LayoutOverview extends StatelessWidget {
               color: Colors.white,
               borderRadius: BorderRadius.circular(4),
               boxShadow: [
-                BoxShadow(
-                    color: Colors.grey.withOpacity(0.2),
-                    spreadRadius: 1,
-                    blurRadius: 6)
+                BoxShadow(color: Colors.grey.withOpacity(0.2), spreadRadius: 1, blurRadius: 6)
               ]),
           child: Column(
             children: [
               Container(
                 height: 16,
                 decoration: BoxDecoration(
                   color: color,
-                  borderRadius: BorderRadius.only(
+                  borderRadius: const BorderRadius.only(
                     topLeft: Radius.circular(4),
                     topRight: Radius.circular(4),
                   ),
@@ -175,12 +190,12 @@ class LayoutOverview extends StatelessWidget {
                 height: 64,
                 decoration: BoxDecoration(
                   color: bg,
-                  borderRadius: BorderRadius.only(
+                  borderRadius: const BorderRadius.only(
                     bottomRight: Radius.circular(4),
                     bottomLeft: Radius.circular(4),
                   ),
                 ),
-                padding: EdgeInsets.all(6),
+                padding: const EdgeInsets.all(6),
                 child: Row(
                   children: [
                     Column(
@@ -191,21 +206,27 @@ class LayoutOverview extends StatelessWidget {
                             color: tiledColor,
                           ),
                         ),
-                        const SizedBox(height: 4,),
+                        const SizedBox(
+                          height: 4,
+                        ),
                         Expanded(
                           child: Container(
                             width: 20,
                             color: tiledColor,
                           ),
                         ),
-                        const SizedBox(height: 4,),
+                        const SizedBox(
+                          height: 4,
+                        ),
                         Expanded(
                           child: Container(
                             width: 20,
                             color: tiledColor,
                           ),
                         ),
-                        const SizedBox(height: 4,),
+                        const SizedBox(
+                          height: 4,
+                        ),
                         Expanded(
                           child: Container(
                             width: 20,
@@ -214,8 +235,9 @@ class LayoutOverview extends StatelessWidget {
                         ),
                       ],
                     ),
-                    VerticalDivider(width: 12,),
-
+                    const VerticalDivider(
+                      width: 12,
+                    ),
                     Expanded(
                       child: Center(
                         child: Wrap(
@@ -238,4 +260,4 @@ class LayoutOverview extends StatelessWidget {
       ],
     );
   }
-}
+}

lib/view/widgets/overview/display_map.dart

@@ -4,6 +4,7 @@ import 'basic_display.dart';
 
 Widget overviewDisplayMap(String key){
   return switch(key){
+    'Action' => ActionOverview(),
     'Button' => ButtonOverview(),
     'Icon' => IconOverview(),
     'Text' => TextOverview(),

lib/view/widgets/overview/overview_page.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:toly_ui/app/theme/theme.dart';
+import 'package:toly_ui/incubator/ext/go_router/path.dart';
 
 import '../../../incubator/components/layout/grid_layout/wrap_grid_layout.dart';
 import 'display_map.dart';
@@ -29,11 +31,12 @@ class OverviewPage extends StatelessWidget {
             title: 'Basic 基础组件',
 
             items: [
-              OverviewItem(name: 'Button', label: 'Button 按钮'),
-              OverviewItem(name: 'Icon', label: 'Icon 图标'),
-              OverviewItem(name: 'Text', label: 'Text 文字'),
-              OverviewItem(name: 'Layout', label: 'Layout 布局'),
-              OverviewItem(name: 'Link', label: 'Link 链接'),
+              OverviewItem(name: 'Action', label: 'Action 动作',path: '/widgets/basic/action'),
+              OverviewItem(name: 'Button', label: 'Button 按钮',path: '/widgets/basic/button'),
+              OverviewItem(name: 'Icon', label: 'Icon 图标',path: '/widgets/basic/icon'),
+              OverviewItem(name: 'Text', label: 'Text 文字',path: '/widgets/basic/text'),
+              OverviewItem(name: 'Layout', label: 'Layout 布局',path: '/widgets/basic/layout'),
+              OverviewItem(name: 'Link', label: 'Link 链接',path: '/widgets/basic/link'),
             ],
           )
         ],
@@ -45,9 +48,11 @@ class OverviewPage extends StatelessWidget {
 class OverviewItem {
   final String name;
   final String label;
+  final String path;
 
   OverviewItem({
     required this.name,
+    required this.path,
     required this.label,
   });
 }
@@ -123,35 +128,40 @@ class _OverviewWidgetCellState extends State<OverviewWidgetCell> {
         });
       },
       cursor: SystemMouseCursors.click,
-      child: Container(
-        decoration: BoxDecoration(
-            boxShadow: shadow,
-            color: Colors.white,
-            border: Border.all(color: const Color(0xffdcdfe6),width: px1),
-            borderRadius: BorderRadius.circular(8)),
-        child: Column(
-          children: [
-            FractionallySizedBox(
-              widthFactor: 1,
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 16.0,vertical: 8),
-                child: Text(widget.item.label,style: TextStyle(fontSize: 16),),
-              ),
-            ),
-            Divider(),
-            Expanded(
-                child: Container(
-                  alignment: Alignment.center,
-                  child: overviewDisplayMap(widget.item.name),
-              decoration: BoxDecoration(
-                borderRadius: BorderRadius.only(
-                  bottomLeft: Radius.circular(8),
-                  bottomRight: Radius.circular(8),
+      child: GestureDetector(
+        onTap: (){
+          context.go(widget.item.path);
+        },
+        child: Container(
+          decoration: BoxDecoration(
+              boxShadow: shadow,
+              color: Colors.white,
+              border: Border.all(color: const Color(0xffdcdfe6),width: px1),
+              borderRadius: BorderRadius.circular(8)),
+          child: Column(
+            children: [
+              FractionallySizedBox(
+                widthFactor: 1,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16.0,vertical: 8),
+                  child: Text(widget.item.label,style: TextStyle(fontSize: 16),),
                 ),
-                color: Color(0xfff5f7fa),
               ),
-            ))
-          ],
+              Divider(),
+              Expanded(
+                  child: Container(
+                    alignment: Alignment.center,
+                    child: overviewDisplayMap(widget.item.name),
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.only(
+                    bottomLeft: Radius.circular(8),
+                    bottomRight: Radius.circular(8),
+                  ),
+                  color: Color(0xfff5f7fa),
+                ),
+              ))
+            ],
+          ),
         ),
       ),
     );

modules/tolyui/CHANGELOG.md

@@ -7,5 +7,5 @@
 * [tolyui_feedback](https://pub.dev/packages/tolyui_feedback)
 * [tolyui_message](https://pub.dev/packages/tolyui_message)
 
-## 0.0.2+20
-* +widget: TolyCollapse 
+* +20: +widget: TolyCollapse 
+* +21: tolyui_navigation: 0.0.8+10

modules/tolyui/pubspec.yaml

@@ -1,6 +1,6 @@
 name: tolyui
 description: "A responsive ui library for Flutter. Help developer build app easier."
-version: 0.0.2+20
+version: 0.0.2+21
 homepage: http://toly1994.com/ui
 repository: https://github.com/TolyFx/toly_ui/tree/main/modules/tolyui
 
@@ -13,7 +13,7 @@ dependencies:
     sdk: flutter
   tolyui_color: 0.0.1
   tolyui_feedback: 0.3.4+7
-  tolyui_navigation: 0.0.8+9
+  tolyui_navigation: 0.0.8+10
   tolyui_rx_layout: 1.0.0
 
 dev_dependencies:

modules/tolyui_navigation/CHANGELOG.md

@@ -12,4 +12,5 @@
 * Support Widget: [TolyDropMenu]
 
 * ## 0.0.8
-* Support Widget: [TolyTabs]
+* Support Widget: [TolyTabs]
+* +10: fix select path expands

modules/tolyui_navigation/lib/src/rail_menu_tree/model/menu_tree_state.dart

@@ -1,13 +1,12 @@
 
 import 'tree_node.dart';
 
-
 class MenuTreeMeta {
   final List<String> expandMenus;
   final MenuNode? activeMenu;
   final MenuNode root;
 
-   List<MenuNode> get items=>root.children;
+  List<MenuNode> get items => root.children;
 
   MenuTreeMeta({
     required this.expandMenus,
@@ -30,14 +29,29 @@ class MenuTreeMeta {
     return null;
   }
 
-  MenuTreeMeta selectPath(String path,{bool singleExpand=false}) {
-    MenuNode? node = queryMenuNodeByPath(root,path);
-    if(node==null) return this;
+  MenuTreeMeta selectPath(String path, {bool singleExpand = false}) {
+    MenuNode? node = queryMenuNodeByPath(root, path);
+    if (node == null) return this;
     return select(node);
   }
 
-  MenuTreeMeta select(MenuNode menu,{bool singleExpand=false}) {
-    if (menu.isLeaf) return copyWith(activeMenu: menu);
+  List<String> parentsPath(String path) {
+    List<String> parts = path.split('/');
+    List<String> menus = ['/'];
+    if (parts.isNotEmpty) {
+      for (int i = 1; i < parts.length; i++) {
+        List<String> ps =  parts.sublist(0,i);
+        String path = ps.join('/');
+        if(path.isNotEmpty){
+          menus.add(path);
+        }
+      }
+    }
+    return menus;
+  }
+
+  MenuTreeMeta select(MenuNode menu, {bool singleExpand = false}) {
+    if (menu.isLeaf) return copyWith(activeMenu: menu, expandMenus: parentsPath(menu.id));
     List<String> menus = [];
     String path = menu.id.substring(1);
     List<String> parts = path.split('/');
@@ -55,21 +69,22 @@ class MenuTreeMeta {
       // expandMenus.map((e) => null);
     }
 
-    if(!singleExpand){
-      menus.addAll(expandMenus.where((e) => e!=menu.id));
+    if (!singleExpand) {
+      menus.addAll(expandMenus.where((e) => e != menu.id));
     }
 
     return copyWith(expandMenus: menus);
   }
 
-MenuTreeMeta copyWith({
-  List<String>? expandMenus,
-  MenuNode? activeMenu,
-  MenuNode? root,
-}) {
-  return MenuTreeMeta(
-    expandMenus: expandMenus ?? this.expandMenus,
-    activeMenu: activeMenu ?? this.activeMenu,
-    root: root ?? this.root,
-  );
-}}
+  MenuTreeMeta copyWith({
+    List<String>? expandMenus,
+    MenuNode? activeMenu,
+    MenuNode? root,
+  }) {
+    return MenuTreeMeta(
+      expandMenus: expandMenus ?? this.expandMenus,
+      activeMenu: activeMenu ?? this.activeMenu,
+      root: root ?? this.root,
+    );
+  }
+}

modules/tolyui_navigation/pubspec.yaml

@@ -1,6 +1,6 @@
 name: tolyui_navigation
 description: "Part of Toly UI: Navigation UI Widget Lib. Contains breadcrumb、drop_menu、rail_menu_tree、tabs etc..."
-version: 0.0.8+9
+version: 0.0.8+10
 homepage: https://github.com/TolyFx/toly_ui
 repository: https://github.com/TolyFx/toly_ui/tree/main/modules/tolyui_navigation