v6

lib/v6/app/navigation/router/app_router_delegate.dart

@@ -0,0 +1,154 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+import 'iroute.dart';
+
+const List<String> kDestinationsPaths = [
+  '/color',
+  '/counter',
+  '/user',
+  '/settings',
+];
+
+AppRouterDelegate router = AppRouterDelegate();
+
+class AppRouterDelegate extends RouterDelegate<Object> with ChangeNotifier {
+  String _path = '/color';
+
+  String get path => _path;
+  AppRouterDelegate() {
+    // keepAlivePath.add('/color');
+  }
+
+  int? get activeIndex {
+    if (path.startsWith('/color')) return 0;
+    if (path.startsWith('/counter')) return 1;
+    if (path.startsWith('/user')) return 2;
+    if (path.startsWith('/settings')) return 3;
+    return null;
+  }
+
+  final Map<String, Completer<dynamic>> _completerMap = {};
+
+  Completer<dynamic>? completer;
+
+  final Map<String, dynamic> _pathExtraMap = {};
+
+  final List<String> keepAlivePath = [];
+
+  FutureOr<dynamic> changePath(String value,
+      {bool forResult = false, Object? extra, bool keepAlive = false}) {
+    if (forResult) {
+      _completerMap[value] = Completer();
+    }
+    if (keepAlive) {
+      if (keepAlivePath.contains(value)) {
+        keepAlivePath.remove(value);
+      }
+      keepAlivePath.add(value);
+    }
+    if (extra != null) {
+      _pathExtraMap[value] = extra;
+    }
+    path = value;
+    if (forResult) {
+      return _completerMap[value]!.future;
+    }
+  }
+
+  set path(String value) {
+    if (_path == value) return;
+    _path = value;
+    notifyListeners();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Navigator(
+      onPopPage: _onPopPage,
+      pages: _buildPages(context, path),
+    );
+  }
+
+  List<Page> _buildPages(BuildContext context,String path) {
+    List<Page> pages = [];
+    List<Page> topPages = _buildPageByPath(context,path);
+
+    if (keepAlivePath.isNotEmpty) {
+      for (String alivePath in keepAlivePath) {
+        if (alivePath != path) {
+          pages.addAll(_buildPageByPath(context,alivePath));
+        }
+      }
+
+      /// 去除和 topPages 中重复的界面
+      pages.removeWhere(
+          (element) => topPages.map((e) => e.key).contains(element.key));
+    }
+
+    pages.addAll(topPages);
+    return pages;
+  }
+
+  Page? _buildPageByPathFromTree(BuildContext context, String path) {
+    // 1. 根据 path 在 iroute 树中查询节点
+    IRoute? iroute = root.match(path);
+    Object? extra = _pathExtraMap[path];
+    bool keepAlive = keepAlivePath.contains(path);
+    bool forResult = _completerMap.containsKey(path);
+    Page? page;
+    if (iroute != null) {
+      page = iroute.builder?.call(
+        context,
+        IRouteData(
+          uri: Uri.parse(path),
+          extra: extra,
+          keepAlive: keepAlive,
+          forResult: forResult,
+        ),
+      );
+    }
+    return page;
+  }
+
+  List<Page> _buildPageByPath(BuildContext context,String path) {
+    List<Page> result = [];
+    Uri uri = Uri.parse(path);
+    String dist = '';
+    for (String segment in uri.pathSegments) {
+      dist += '/$segment';
+      Page? page = _buildPageByPathFromTree(context,dist);
+      if(page!=null){
+        result.add(page);
+      }
+    }
+    return result;
+  }
+
+  @override
+  Future<bool> popRoute() async {
+    print('=======popRoute=========');
+    return true;
+  }
+
+  bool _onPopPage(Route route, result) {
+    if (_completerMap.containsKey(path)) {
+      _completerMap[path]?.complete(result);
+      _completerMap.remove(path);
+    }
+
+    path = backPath(path);
+    return route.didPop(result);
+  }
+
+  String backPath(String path) {
+    Uri uri = Uri.parse(path);
+    if (uri.pathSegments.length == 1) return path;
+    List<String> parts = List.of(uri.pathSegments)..removeLast();
+    return '/${parts.join('/')}';
+  }
+
+  @override
+  Future<void> setNewRoutePath(configuration) async {}
+}

lib/v6/app/navigation/router/iroute.dart

@@ -0,0 +1,131 @@
+import 'package:flutter/material.dart';
+
+import '../../../pages/color/color_add_page.dart';
+import '../../../pages/color/color_detail_page.dart';
+import '../../../pages/color/color_page.dart';
+import '../../../pages/counter/counter_page.dart';
+import '../../../pages/user/user_page.dart';
+import '../../../pages/settings/settings_page.dart';
+import '../transition/fade_transition_page.dart';
+
+class IRoute {
+  final String path;
+  final IRoutePageBuilder? builder;
+  final List<IRoute> children;
+
+  const IRoute({
+    required this.path,
+    this.children = const [],
+    this.builder,
+  });
+
+  @override
+  String toString() {
+    return 'IRoute{path: $path, children: $children}';
+  }
+
+  IRoute? match(String path) {
+    return matchRoute(this, path);
+  }
+
+  IRoute? matchRoute(IRoute route, String path) {
+    if (route.path == path) {
+      return route;
+    } else {
+      if (route.children.isNotEmpty) {
+        for (int i = 0; i < route.children.length; i++) {
+          IRoute current = route.children[i];
+          IRoute? target = matchRoute(current, path);
+          if (target != null) {
+            return target;
+          }
+        }
+      } else {
+        return null;
+      }
+    }
+    return null;
+  }
+}
+
+typedef IRoutePageBuilder = Page? Function(
+    BuildContext context, IRouteData data);
+
+class IRouteData {
+  final Object? extra;
+  final bool forResult;
+  final Uri uri;
+  final bool keepAlive;
+
+  IRouteData({
+    this.extra,
+    required this.uri,
+    this.forResult = false,
+    this.keepAlive = false,
+  });
+}
+
+IRoute root = IRoute(path: '/', children: kDestinationsIRoutes);
+
+List<IRoute> kDestinationsIRoutes = [
+  IRoute(
+    path: '/color',
+    builder: (ctx, data) {
+      return const FadeTransitionPage(
+        key: ValueKey('/color'),
+        child: ColorPage(),
+      );
+    },
+    children: [
+      IRoute(
+        path: '/color/detail',
+        builder: (ctx, data) {
+          final Map<String, String> queryParams = data.uri.queryParameters;
+          String? selectedColor = queryParams['color'];
+          Color color = Colors.black;
+          if (selectedColor != null) {
+            color = Color(int.parse(selectedColor, radix: 16));
+          } else if (data.extra is Color) {
+            color = data.extra as Color;
+          }
+          return FadeTransitionPage(
+            key: const ValueKey('/color/detail'),
+            child: ColorDetailPage(color: color),
+          );
+        },
+      ),
+      IRoute(
+          path: '/color/add',
+          builder: (ctx, data) {
+            return const FadeTransitionPage(
+              key: ValueKey('/color/add'),
+              child: ColorAddPage(),
+            );
+          }),
+    ],
+  ),
+  IRoute(
+      path: '/counter',
+      builder: (ctx, data) {
+        return const FadeTransitionPage(
+          key: ValueKey('/counter'),
+          child: CounterPage(),
+        );
+      }),
+  IRoute(
+      path: '/user',
+      builder: (ctx, data) {
+        return const FadeTransitionPage(
+          key: ValueKey('/user'),
+          child: UserPage(),
+        );
+      }),
+  IRoute(
+      path: '/settings',
+      builder: (ctx, data) {
+        return const FadeTransitionPage(
+          key: ValueKey('/settings'),
+          child: SettingPage(),
+        );
+      }),
+];

lib/v6/app/navigation/transition/fade_transition_page.dart

@@ -0,0 +1,53 @@
+// Copyright 2021, the Flutter project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+class FadeTransitionPage<T> extends Page<T> {
+  final Widget child;
+  final Duration duration;
+
+  const FadeTransitionPage({
+    super.key,
+    required this.child,
+    this.duration = const Duration(milliseconds: 300),
+  });
+
+  @override
+  Route<T> createRoute(BuildContext context) =>
+      PageBasedFadeTransitionRoute<T>(this);
+}
+
+class PageBasedFadeTransitionRoute<T> extends PageRoute<T> {
+  final FadeTransitionPage<T> _page;
+
+  PageBasedFadeTransitionRoute(this._page) : super(settings: _page);
+
+  @override
+  Color? get barrierColor => null;
+
+  @override
+  String? get barrierLabel => null;
+
+  @override
+  Duration get transitionDuration => _page.duration;
+
+  @override
+  bool get maintainState => true;
+
+  @override
+  Widget buildPage(BuildContext context, Animation<double> animation,
+      Animation<double> secondaryAnimation) {
+    var curveTween = CurveTween(curve: Curves.easeIn);
+    return FadeTransition(
+      opacity: animation.drive(curveTween),
+      child: (settings as FadeTransitionPage).child,
+    );
+  }
+
+  @override
+  Widget buildTransitions(BuildContext context, Animation<double> animation,
+          Animation<double> secondaryAnimation, Widget child) =>
+      child;
+}

lib/v6/app/navigation/transition/no_transition_page.dart

@@ -0,0 +1,47 @@
+// Copyright 2021, the Flutter project authors. Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+class NoTransitionPage<T> extends Page<T> {
+  final Widget child;
+
+  const NoTransitionPage({
+    super.key,
+    required this.child,
+  });
+
+  @override
+  Route<T> createRoute(BuildContext context) => NoTransitionRoute<T>(this);
+}
+
+class NoTransitionRoute<T> extends PageRoute<T> {
+
+  final NoTransitionPage<T> _page;
+
+  NoTransitionRoute(this._page) : super(settings: _page);
+
+  @override
+  Color? get barrierColor => null;
+
+  @override
+  String? get barrierLabel => null;
+
+  @override
+  Duration get transitionDuration => const Duration(milliseconds: 0);
+
+  @override
+  bool get maintainState => true;
+
+  @override
+  Widget buildPage(BuildContext context, Animation<double> animation,
+      Animation<double> secondaryAnimation) {
+    return (settings as NoTransitionPage).child;
+  }
+
+  @override
+  Widget buildTransitions(BuildContext context, Animation<double> animation,
+          Animation<double> secondaryAnimation, Widget child) =>
+      child;
+}

lib/v6/app/navigation/views/app_navigation.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import '../router/app_router_delegate.dart';
+import 'app_navigation_rail.dart';
+import 'app_top_bar.dart';
+
+class AppNavigation extends StatelessWidget {
+  const AppNavigation({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    double px1 = 1/View.of(context).devicePixelRatio;
+    return Scaffold(
+      body: Row(
+        children: [
+          const AppNavigationRail(),
+          Expanded(
+            child: Column(
+              children: [
+                const AppTopBar(),
+                Divider(height: px1,),
+                Expanded(
+                  child: Router(
+                    routerDelegate: router,
+                    backButtonDispatcher: RootBackButtonDispatcher(),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/v6/app/navigation/views/app_navigation_rail.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:iroute/components/components.dart';
+import '../router/app_router_delegate.dart';
+
+class AppNavigationRail extends StatefulWidget {
+  const AppNavigationRail({super.key});
+
+  @override
+  State<AppNavigationRail> createState() => _AppNavigationRailState();
+}
+
+class _AppNavigationRailState extends State<AppNavigationRail> {
+
+  final List<MenuMeta> deskNavBarMenus = const [
+    MenuMeta(label: '颜色板', icon: Icons.color_lens_outlined),
+    MenuMeta(label: '计数器', icon: Icons.add_chart),
+    MenuMeta(label: '我的', icon: Icons.person),
+    MenuMeta(label: '设置', icon: Icons.settings),
+  ];
+
+  @override
+  void initState() {
+    super.initState();
+    router.addListener(_onRouterChange);
+  }
+
+  @override
+  void dispose() {
+    router.removeListener(_onRouterChange);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DragToMoveWrap(
+      child: TolyNavigationRail(
+        items: deskNavBarMenus,
+        leading: const Padding(
+          padding: EdgeInsets.symmetric(vertical: 18.0),
+          child: FlutterLogo(),
+        ),
+        tail: Padding(
+          padding: const EdgeInsets.only(bottom: 6.0),
+          child: Text('V0.0.5',style: TextStyle(color: Colors.white,fontSize: 12),),
+        ),
+        backgroundColor: const Color(0xff3975c6),
+        onDestinationSelected: _onDestinationSelected,
+        selectedIndex: router.activeIndex,
+      ),
+    );
+
+  }
+
+  void _onDestinationSelected(int index) {
+    if(index==1){
+      router.changePath(kDestinationsPaths[index],keepAlive: true);
+    }else{
+      router.path = kDestinationsPaths[index];
+    }
+  }
+
+  void _onRouterChange() {
+    setState(() {});
+  }
+}

lib/v6/app/navigation/views/app_router_editor.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:iroute/components/toly_ui/button/hover_icon_button.dart';
+import '../router/app_router_delegate.dart';
+
+class AppRouterEditor extends StatefulWidget {
+  final ValueChanged<String>? onSubmit;
+  const AppRouterEditor({super.key, this.onSubmit});
+
+  @override
+  State<AppRouterEditor> createState() => _AppRouterEditorState();
+}
+
+class _AppRouterEditorState extends State<AppRouterEditor> {
+
+  final TextEditingController _controller = TextEditingController();
+
+
+  @override
+  void initState() {
+    super.initState();
+    _onRouteChange();
+    router.addListener(_onRouteChange);
+  }
+
+  void _onRouteChange() {
+    _controller.text=router.path;
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    router.removeListener(_onRouteChange);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      alignment: Alignment.centerRight,
+      children: [
+        SizedBox(
+          child: CupertinoTextField(
+            controller: _controller,
+            style: TextStyle(fontSize: 14),
+            padding: EdgeInsets.only(left:12,top: 6,bottom: 6,right: 32),
+            placeholder: '输入路由地址导航',
+            onSubmitted: widget.onSubmit,
+            decoration: BoxDecoration(color: Color(0xffF1F2F3),borderRadius: BorderRadius.circular(6)),
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(right: 8.0),
+          child: HoverIconButton(
+            icon: Icons.directions_outlined,
+            defaultColor: Color(0xff68696B),
+            onPressed:()=>widget.onSubmit?.call(_controller.text),
+            size: 20
+          ),
+        )
+      ],
+    );
+  }
+}

lib/v6/app/navigation/views/app_top_bar.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:iroute/components/components.dart';
+import '../router/app_router_delegate.dart';
+import 'app_router_editor.dart';
+
+class AppTopBar extends StatelessWidget {
+  const AppTopBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return DragToMoveWrap(
+      child: Container(
+        alignment: Alignment.center,
+        height: 46,
+        child: Row(
+          children: [
+            const SizedBox(width: 16),
+            const RouterIndicator(),
+            Expanded(
+                child: Row(children: [
+              const Spacer(),
+              SizedBox(
+                  width: 250,
+                  child: AppRouterEditor(
+                    onSubmit: (path) => router.path = path,
+                  )),
+              const Padding(
+                padding: EdgeInsets.symmetric(vertical: 12.0),
+                child: VerticalDivider(
+                  width: 32,
+                ),
+              )
+            ])),
+            const WindowButtons()
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class RouterIndicator extends StatefulWidget {
+  const RouterIndicator({super.key});
+
+  @override
+  State<RouterIndicator> createState() => _RouterIndicatorState();
+}
+
+Map<String, String> kRouteLabelMap = {
+  '/color': '颜色板',
+  '/color/add': '添加颜色',
+  '/color/detail': '颜色详情',
+  '/counter': '计数器',
+  '/user': '我的',
+  '/settings': '系统设置',
+};
+
+class _RouterIndicatorState extends State<RouterIndicator> {
+  @override
+  void initState() {
+    super.initState();
+    router.addListener(_onRouterChange);
+  }
+
+  @override
+  void dispose() {
+    router.removeListener(_onRouterChange);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TolyBreadcrumb(
+      items: pathToBreadcrumbItems(router.path),
+      onTapItem: (item) {
+        if (item.to != null) {
+          router.path = item.to!;
+        }
+      },
+    );
+  }
+
+  void _onRouterChange() {
+    setState(() {});
+  }
+
+  List<BreadcrumbItem> pathToBreadcrumbItems(String path) {
+    Uri uri = Uri.parse(path);
+    List<BreadcrumbItem> result = [];
+    String to = '';
+
+    String distPath = '';
+    for (String segment in uri.pathSegments) {
+      distPath += '/$segment';
+    }
+
+    for (String segment in uri.pathSegments) {
+      to += '/$segment';
+      String label = kRouteLabelMap[to] ?? '未知路由';
+      result.add(BreadcrumbItem(to: to, label: label, active: to == distPath));
+    }
+    return result;
+  }
+}