This commit is contained in:
toly
2023-12-11 21:53:27 +08:00
parent 838d6aa668
commit 25e51d789f
104 changed files with 6414 additions and 19 deletions

View File

@@ -0,0 +1,113 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:iroute/components/components.dart';
import 'package:toly_menu/src/menu.dart';
import 'package:toly_menu/src/model/menu_state.dart';
import 'package:toly_menu/toly_menu.dart';
import '../v12/app/navigation/transition/fade_page_transitions_builder.dart';
import 'router/menus/menu_tree.dart';
import 'views/top_logo.dart';
import 'views/top_bar.dart';
import 'package:iroute/navigation/router/routers/app.dart';
class TolyBooksApp extends StatelessWidget {
final GoRouter _router = GoRouter(
initialLocation: '/dashboard/view',
routes: <RouteBase>[appRoute],
onException: (BuildContext ctx, GoRouterState state, GoRouter router) {
router.go('/404', extra: state.uri.toString());
},
// redirect: _authRedirect
);
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: _router,
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
fontFamily: "宋体",
primarySwatch: Colors.blue,
pageTransitionsTheme: const PageTransitionsTheme(builders: {
TargetPlatform.android: ZoomPageTransitionsBuilder(),
TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
TargetPlatform.macOS: FadePageTransitionsBuilder(),
TargetPlatform.windows: FadePageTransitionsBuilder(),
TargetPlatform.linux: FadePageTransitionsBuilder(),
}),
),
);
}
}
class BookAppNavigation extends StatefulWidget {
final Widget content;
const BookAppNavigation({super.key, required this.content});
@override
State<BookAppNavigation> createState() => _BookAppNavigationState();
}
class _BookAppNavigationState extends State<BookAppNavigation> {
MenuState state = MenuState(
expandMenus: ['/dashboard'],
activeMenu: '/dashboard/view',
items: rootMenu.children);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
DragToMoveWrap(
child: Container(
color: const Color(0xff001529),
width: 210,
child: Column(
children: [
TopLogo(),
Expanded(child: TolyMenu(state: state, onSelect: _onSelect)),
],
),
),
),
Expanded(
child: Column(
children: [AppTopBar(), Expanded(child: widget.content)],
),
)
],
),
);
}
void _onSelect(MenuNode menu) {
if (menu.isLeaf) {
state = state.copyWith(activeMenu: menu.path);
print(menu.path);
// print(;
context.go(menu.path);
} else {
List<String> menus = [];
String path = menu.path.substring(1);
List<String> parts = path.split('/');
if (parts.isNotEmpty) {
String path = '';
for (String part in parts) {
path += '/$part';
menus.add(path);
}
}
if (state.expandMenus.contains(menu.path)) {
menus.remove(menu.path);
}
state = state.copyWith(expandMenus: menus);
}
setState(() {});
}
}

View File

@@ -0,0 +1,78 @@
Map<String,dynamic> animaMenus = {
'path' : '/anima',
'label' : '动画-流光幻影',
'children': [
{
'path' : '/chapter1',
'label' : '1.欢迎来到 Flutter 动画世界',
},
{
'path' : '/chapter2',
'label' : '2.基于文字的组件动画初体验',
},
{
'path' : '/chapter3',
'label' : '3.全面认识 AnimationController 的使用',
},
{
'path' : '/chapter4',
'label' : '4.认知和自定义 Curve 动画曲线',
},
{
'path' : '/chapter5',
'label' : '5.认识和自定义 Tween 补间动画',
},
{
'path' : '/chapter6',
'label' : '6.通过三个案例巩固练习动画使用',
},
{
'path' : '/chapter7',
'label' : '7.通过 loading 绘制练习动画使用',
},
{
'path' : '/chapter8',
'label' : '8.Flutter 内置动画组件-显式动画',
},
{
'path' : '/chapter9',
'label' : '9.显式动画 AnimatedWidget 源码解读',
},
{
'path' : '/chapter10',
'label' : '10.Flutter 内置动画组件-隐式动画',
},
{
'path' : '/chapter11',
'label' : '11.隐式动画 ImplicitlyAnimatedWidget 源码解读',
},
{
'path' : '/chapter12',
'label' : '12.Flutter 内置动画组件 - 其他动画',
},
{
'path' : '/chapter13',
'label' : '13.Flutter 框架层动画相关类源码分析',
},
{
'path' : '/chapter14',
'label' : '14.Flutter 框架层动画相关类关系梳理',
},
{
'path' : '/chapter15',
'label' : '15.AnimationController 源码解读',
},
{
'path' : '/chapter16',
'label' : '16.Ticker 与 TickerProvider 源码解读',
},
{
'path' : '/chapter17',
'label' : '17.小试牛刀 - 秒表功能和界面分析',
},
{
'path' : '/chapter18',
'label' : '18.使用 Ticker 驱动钟表运动',
},
]
};

View File

@@ -0,0 +1,90 @@
Map<String, dynamic> drawMenus = {
'path': '/draw',
'label': '绘制-妙笔生花',
'children': [
{
'path': '/chapter1',
'label': '1.纯粹的世界',
},
{
'path': '/chapter2',
'label': '2.认识画笔的属性',
},
{
'path': '/chapter3',
'label': '3.画布绘制基础操作',
},
{
'path': '/chapter4',
'label': '4.画布绘制图片文字',
},
{
'path': '/chapter5',
'label': '5.路径的图形添加',
},
{
'path': '/chapter6',
'label': '6.路径的操作方法',
},
{
'path': '/chapter7',
'label': '7.熟悉而陌生的颜色',
},
{
'path': '/chapter8',
'label': '8.着色器和过滤器',
},
{
'path': '/chapter9',
'label': '9.世界之基-CustomPainter',
},
{
'path': '/chapter10',
'label': '10.绘制中使用动画',
},
{
'path': '/chapter11',
'label': '11.动画器曲线和方法',
},
{
'path': '/chapter12',
'label': '12.手势在绘制中的使用',
},
{
'path': '/chapter13',
'label': '13.Path 与曲线拟合',
},
{
'path': '/chapter14',
'label': '14.认知贝塞尔曲线',
},
{
'path': '/chapter15',
'label': '15.使用贝塞尔曲线',
},
{
'path': '/chapter16',
'label': '16.简单统计图表绘制',
},
{
'path': '/chapter17',
'label': '17.复杂图表绘制',
},
{
'path': '/chapter18',
'label': '18.粒子物理运动',
},
{
'path': '/chapter19',
'label': '19.粒子背景效果',
},
{
'path': '/chapter20',
'label': '20.粒子时钟',
},
{
'path': '/chapter21',
'label': '21.[番外]数学中的角度知识',
}
]
};

View File

@@ -0,0 +1,90 @@
Map<String,dynamic> dreamMenus = {
'path' : '/dream',
'label' : '基础-梦始之地',
'children': [
{
'path' : '/chapter1',
'label' : '1.欢迎来到 Flutter 梦始之地',
},
{
'path' : '/chapter2',
'label' : '2.白话引言: 语言、框架和应用',
},
{
'path' : '/chapter3',
'label' : '3.白话引言: 状态、行为和逻辑',
},
{
'path' : '/chapter4',
'label' : '4.学会说话 - 语句和量的定义',
},
{
'path' : '/chapter5',
'label' : '5.封装基础 - 函数方法的定义',
},
{
'path' : '/chapter6',
'label' : '6.万物基石 - 基本数据类型',
},
{
'path' : '/chapter7',
'label' : '7.逻辑桥梁 - 流程控制语句',
},
{
'path' : '/chapter8',
'label' : '8.逻辑血肉 - 运算符的使用',
},
{
'path' : '/chapter9',
'label' : '9.面向对象 - 定义与使用类',
},
{
'path' : '/chapter10',
'label' : '10.面向对象 - 类与类间关系',
},
{
'path' : '/chapter11',
'label' : '11.面向对象 - 封装、继承和多态',
},
{
'path' : '/chapter12',
'label' : '12.面向对象 - 抽象、接口和混入',
},
{
'path' : '/chapter13',
'label' : '13.语法集锦 - 类型相关其他语法',
},
{
'path' : '/chapter14',
'label' : '14.语法集锦 - 语言相关其他语法',
},
{
'path' : '/chapter15',
'label' : '15.梦始之地 - 计数器项目分析',
},
{
'path' : '/chapter16',
'label' : '16.梦始之地 - 组件的概念与使用',
},
{
'path' : '/chapter17',
'label' : '17.小试牛刀 - 秒表功能和界面分析',
},
{
'path' : '/chapter18',
'label' : '18.小试牛刀 - 界面交互与数据维护',
},
{
'path' : '/chapter19',
'label' : '19.状态管理 - 主题色与国际化切换',
},
{
'path' : '/chapter20',
'label' : '20.状态管理 - 局部构建和逻辑分离',
},
{
'path' : '/chapter21',
'label' : '21.结语 - 离开新手村,继续冒险吧,朋友!',
},
]
};

View File

@@ -0,0 +1,70 @@
Map<String,dynamic> layoutMenus = {
'path' : '/layout',
'label' : '布局-薪火相传',
'children': [
{
'path' : '/chapter1',
'label' : '1.欢迎进入 Flutter 布局探索',
},
{
'path' : '/chapter2',
'label' : '2.从打破紧约束开始说起',
},
{
'path' : '/chapter3',
'label' : '3.认识常用组件下施加的约束',
},
{
'path' : '/chapter4',
'label' : '4.探索 Flex 对布局结构的划分',
},
{
'path' : '/chapter5',
'label' : '5.Flex、Wrap、Stack 组件属性梳理',
},
{
'path' : '/chapter6',
'label' : '6.常见单子布局组件作用分析',
},
{
'path' : '/chapter7',
'label' : '7.常见布局实践演练',
},
{
'path' : '/chapter8',
'label' : '8.探索约束传递与尺寸确定',
},
{
'path' : '/chapter9',
'label' : '9.探索单子布局组件源码实现(上)',
},
{
'path' : '/chapter10',
'label' : '10.探索单子布局组件源码实现(下)',
},
{
'path' : '/chapter11',
'label' : '11.探索 Flex、Wrap、Stack 源码实现',
},
{
'path' : '/chapter12',
'label' : '12.使用单子与多子自定义布局',
},
{
'path' : '/chapter13',
'label' : '13.使用 Flow 组件自定义布局',
},
{
'path' : '/chapter14',
'label' : '14.浮层 Overlay 的使用与定位',
},
{
'path' : '/chapter15',
'label' : '15.IntrinsicHeight 作用与源码实现',
},
{
'path' : '/chapter16',
'label' : '16.立于布局体系之上的风采',
},
]
};

View File

@@ -0,0 +1,74 @@
import 'package:toly_menu/toly_menu.dart';
import 'anima.dart';
import 'draw.dart';
import 'dream.dart';
import 'layout.dart';
import 'render.dart';
import 'scroll.dart';
import 'touch.dart';
Map<String, dynamic> root = {
'path': '',
'label': '',
'children': [
dashboard,
drawMenus,
layoutMenus,
dreamMenus,
animaMenus,
touchMenus,
scrollMenus,
renderMenus,
]
};
Map<String, dynamic> dashboard = {
'path': '/dashboard',
'label': '面板总览',
'children': [
{
'path': '/view',
'label': '小册全集',
},
{
'path': '/chat',
'label': '读者交流',
'children': [
{
'path': '/a',
'label': '第一交流区',
},
{
'path': '/b',
'label': '第二交流区',
},
{
'path': '/c',
'label': '第三交流区',
},
]
},
],
};
MenuNode get rootMenu => parser(root, -1, '');
MenuNode parser(Map<String, dynamic> data, int deep, String prefix) {
String path = data['path'];
String label = data['label'];
List<Map<String, dynamic>>? childrenMap = data['children'];
List<MenuNode> children = [];
if (childrenMap != null && childrenMap.isNotEmpty) {
for (int i = 0; i < childrenMap.length; i++) {
MenuNode cNode = parser(childrenMap[i], deep + 1, prefix + path);
children.add(cNode);
}
}
return MenuNode(
path: prefix + path,
label: label,
deep: deep,
children: children,
);
}

View File

@@ -0,0 +1,74 @@
Map<String,dynamic> renderMenus = {
'path' : '/render',
'label' : '渲染-聚沙成塔',
'children': [
{
'path' : '/chapter1',
'label' : '1.欢迎进入 Flutter 渲染机制',
},
{
'path' : '/chapter2',
'label' : '2.从 runApp 方法到三树首脑会晤',
},
{
'path' : '/chapter3',
'label' : '3.初识元素节点的挂载和三树成型',
},
{
'path' : '/chapter4',
'label' : '4.探索单子渲染对象、元素的数据结构',
},
{
'path' : '/chapter5',
'label' : '5.探索多子渲染对象、元素的数据结构',
},
{
'path' : '/chapter6',
'label' : '6.探索组合型组件、元素存在的意义',
},
{
'path' : '/chapter7',
'label' : '7.探索状态类 State 源码实现与价值',
},
{
'path' : '/chapter8',
'label' : '8.探索节点更新时的变与不变',
},
{
'path' : '/chapter9',
'label' : '9.探索多子元素更新和 Key 的作用',
},
{
'path' : '/chapter10',
'label' : '10.探索代理组件、元素的实现与价值',
},
{
'path' : '/chapter11',
'label' : '11.组件、元素、渲染对象关系梳理',
},
{
'path' : '/chapter12',
'label' : '12.探索 WidgetsBinding 的初始化',
},
{
'path' : '/chapter13',
'label' : '13.探索 BuildOwner 构建管理器',
},
{
'path' : '/chapter14',
'label' : '14.探索 PipelineOwner 渲染管线',
},
{
'path' : '/chapter15',
'label' : '15.探索 RenderObject 的绘制与布局',
},
{
'path' : '/chapter16',
'label' : '16.探索 Layer 树与 Scene 的构建',
},
{
'path' : '/chapter17',
'label' : '17.终结篇: 立于渲染机制之上的风采',
},
]
};

View File

@@ -0,0 +1,78 @@
Map<String,dynamic> scrollMenus = {
'path' : '/scroll',
'label' : '滑动-珠联璧合',
'children': [
{
'path' : '/chapter1',
'label' : '1.认知视口滑动的构成',
},
{
'path' : '/chapter2',
'label' : '2.从 ListView 的源码开始谈起',
},
{
'path' : '/chapter3',
'label' : '3.探索 BoxScrollView 与 ScrollView 组件',
},
{
'path' : '/chapter4',
'label' : '4.探索 ScrollView 一族其他滑动组件',
},
{
'path' : '/chapter5',
'label' : '5.Scrollable 与 Viewport 的珠联璧合',
},
{
'path' : '/chapter6',
'label' : '6.探索 Scrollable 组件成员属性',
},
{
'path' : '/chapter7',
'label' : '7.探索 ViewPort 组件成员属性',
},
{
'path' : '/chapter8',
'label' : '8.再探索 ScrollView 一族的实现',
},
{
'path' : '/chapter9',
'label' : '9.探索 Sliver 组件吸顶效果',
},
{
'path' : '/chapter10',
'label' : '10.探索 NestedScrollView 嵌套滑动',
},
{
'path' : '/chapter11',
'label' : '11.探索 SliverConstraints 滑块约束',
},
{
'path' : '/chapter12',
'label' : '12.探索滑动中加载和缓存的实现',
},
{
'path' : '/chapter13',
'label' : '13.探索 Sliver 一族组件的必要性',
},
{
'path' : '/chapter14',
'label' : '14.探索 PageView 源码实现',
},
{
'path' : '/chapter15',
'label' : '15.探索 SingleChildScrollView 源码实现',
},
{
'path' : '/chapter16',
'label' : '16.探索 Notification 通知机制',
},
{
'path' : '/chapter17',
'label' : '17.探索 ScrollableState 滑动处理逻辑',
},
{
'path' : '/chapter18',
'label' : '18.探索 ScrollableState 动画处理逻辑',
}
]
};

View File

@@ -0,0 +1,70 @@
Map<String,dynamic> touchMenus = {
'path' : '/touch',
'label' : '手势-执掌天下',
'children': [
{
'path' : '/chapter1',
'label' : '1.手势探索开篇前言',
},
{
'path' : '/chapter2',
'label' : '2.认识 GestureDetector 各种默认手势',
},
{
'path' : '/chapter3',
'label' : '3.从弹簧绘制实现竖直拖拽手势',
},
{
'path' : '/chapter4',
'label' : '4.从图章绘制实践 tap 手势操作',
},
{
'path' : '/chapter5',
'label' : '5.从白板绘制实践 pan 手势操作',
},
{
'path' : '/chapter6',
'label' : '6.从矩阵变换实践 scale 手势操作',
},
{
'path' : '/chapter7',
'label' : '7.探索 GestureDetector 组件源码',
},
{
'path' : '/chapter8',
'label' : '8.探索 RawGestureDetector 组件源码',
},
{
'path' : '/chapter9',
'label' : '9.知识储备: 认识 GestureRecognizer 相关类',
},
{
'path' : '/chapter10',
'label' : '10.知识储备: 认识手势竞技相关类',
},
{
'path' : '/chapter11',
'label' : '11.探索单击手势 TapGestureRecognizer 源码',
},
{
'path' : '/chapter12',
'label' : '12.探索双击手势 DoubleTapGestureRecognizer 源码',
},
{
'path' : '/chapter13',
'label' : '13.漫画手势: 来场竞技吧',
},
{
'path' : '/chapter14',
'label' : '14.自定义实现 N 连击手势事件',
},
{
'path' : '/chapter15',
'label' : '15.从 Listener 组件探索事件的源头',
},
{
'path' : '/chapter18',
'label' : '18.使用 Ticker 驱动钟表运动',
},
]
};

View File

@@ -0,0 +1,43 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:iroute/v12/pages/empty/empty_panel.dart';
import '../../../navigation/app_navigation.dart';
import 'dashboard.dart';
import 'draw.dart';
final RouteBase appRoute = ShellRoute(
builder: (BuildContext context, GoRouterState state, Widget child) {
return BookAppNavigation(content: child);
},
routes: <RouteBase>[
dashboardRouters,
drawRouters,
// GoRoute(
// path: 'counter',
// builder: (BuildContext context, GoRouterState state) {
// return const CounterPage();
// }),
// sortRouters,
// GoRoute(
// path: 'user',
// builder: (BuildContext context, GoRouterState state) {
// return const UserPage();
// },
// ),
// GoRoute(
// path: 'settings',
// builder: (BuildContext context, GoRouterState state) {
// return const SettingPage();
// },
// ),
GoRoute(
path: '/404',
builder: (BuildContext context, GoRouterState state) {
String msg = '无法访问: ${state.extra}';
return EmptyPanel(msg: msg);
},
)
],
);

View File

@@ -0,0 +1,32 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:iroute/pages/dashboard/chat_room.dart';
import 'package:iroute/pages/dashboard/view_books.dart';
final RouteBase dashboardRouters = GoRoute(
path: '/dashboard',
redirect: (_,state) {
if (state.fullPath == '/dashboard') {
return '/dashboard/view';
}
return null;
},
routes: <RouteBase>[
GoRoute(
path: 'view',
builder: (BuildContext context, GoRouterState state) {
return const ViewBooks();
},
),
GoRoute(
path: 'chat/:roomId',
builder: (BuildContext context, GoRouterState state) {
String? roomId = state.pathParameters['roomId'];
return ChatRoom(
roomId: roomId,
);
},
),
],
);

View File

@@ -0,0 +1,47 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:idraw/idraw.dart';
import 'package:iroute/pages/dashboard/chat_room.dart';
final RouteBase drawRouters = GoRoute(
path: '/draw',
redirect: (_,state) {
if (state.fullPath == '/draw') {
return '/draw/chapter1';
}
return null;
},
routes: <RouteBase>[
GoRoute(
path: 'chapter1',
builder: (BuildContext context, GoRouterState state) {
return const P01Page();
},
),
GoRoute(
path: 'chapter2',
builder: (BuildContext context, GoRouterState state) {
return const P02Page();
},
),
GoRoute(
path: 'chapter3',
builder: (BuildContext context, GoRouterState state) {
return const P03Page();
},
),
GoRoute(
path: 'chapter4',
builder: (BuildContext context, GoRouterState state) {
return const P04Page();
},
), GoRoute(
path: 'chapter5',
builder: (BuildContext context, GoRouterState state) {
return const P05Page();
},
),
],
);

View File

@@ -0,0 +1,25 @@
import 'package:flutter/material.dart';
import '../../components/components.dart';
class AppTopBar extends StatelessWidget {
const AppTopBar({super.key});
@override
Widget build(BuildContext context) {
return DragToMoveWrap(
child: const Row(
children: [
SizedBox(width: 20,),
// Text(
// '404 界面丢失',
// style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
// ),
Spacer(),
WindowButtons()
],
),
);
}
}

View File

@@ -0,0 +1,22 @@
import 'package:flutter/material.dart';
class TopLogo extends StatelessWidget {
const TopLogo({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0,vertical: 8),
child: Row(
children: [
FlutterLogo(),
const SizedBox(width: 8,),
Text(
'Flutter Books',
style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),
)
],
),
);
}
}