From 207bf4f832298d7fc8c59ddaabba7a8d9c2d369d Mon Sep 17 00:00:00 2001 From: toly <1981462002@qq.com> Date: Fri, 11 Aug 2023 09:04:44 +0800 Subject: [PATCH] v --- lib/02/01/pages/color_add_page.dart | 1 - lib/02/01/pages/home_page.dart | 40 +++++++++++++---- lib/02/02/main.dart | 60 ++++++++++++++++++++++++++ lib/02/02/pages/color_add_page.dart | 67 +++++++++++++++++++++++++++++ lib/02/02/pages/empty_page.dart | 30 +++++++++++++ lib/02/02/pages/home_page.dart | 49 +++++++++++++++++++++ lib/02/03/main.dart | 35 +++++++++++++++ lib/02/03/pages/color_add_page.dart | 67 +++++++++++++++++++++++++++++ lib/02/03/pages/empty_page.dart | 30 +++++++++++++ lib/02/03/pages/home_page.dart | 50 +++++++++++++++++++++ lib/02/03/router1/router1.dart | 56 ++++++++++++++++++++++++ 11 files changed, 475 insertions(+), 10 deletions(-) create mode 100644 lib/02/02/main.dart create mode 100644 lib/02/02/pages/color_add_page.dart create mode 100644 lib/02/02/pages/empty_page.dart create mode 100644 lib/02/02/pages/home_page.dart create mode 100644 lib/02/03/main.dart create mode 100644 lib/02/03/pages/color_add_page.dart create mode 100644 lib/02/03/pages/empty_page.dart create mode 100644 lib/02/03/pages/home_page.dart create mode 100644 lib/02/03/router1/router1.dart diff --git a/lib/02/01/pages/color_add_page.dart b/lib/02/01/pages/color_add_page.dart index 4a6d965..bee43b4 100644 --- a/lib/02/01/pages/color_add_page.dart +++ b/lib/02/01/pages/color_add_page.dart @@ -21,7 +21,6 @@ class _ColorAddPageState extends State { @override Widget build(BuildContext context) { String text = '# ${_color.value.toRadixString(16)}'; - return Scaffold( appBar: AppBar( title: Text('添加颜色'), diff --git a/lib/02/01/pages/home_page.dart b/lib/02/01/pages/home_page.dart index 815263d..9c97e0e 100644 --- a/lib/02/01/pages/home_page.dart +++ b/lib/02/01/pages/home_page.dart @@ -1,29 +1,51 @@ import 'package:flutter/material.dart'; +import 'package:iroute/02/01/pages/color_add_page.dart'; import '../../../common/components/colors_panel.dart'; import '../../../common/pages/stl_color_page.dart'; -class HomePage extends StatelessWidget { +class HomePage extends StatefulWidget { const HomePage({super.key}); + @override + State createState() => _HomePageState(); +} + +class _HomePageState extends State { + final List _colors = [ + Colors.red, Colors.black, Colors.blue, Colors.green, Colors.orange, + Colors.pink, Colors.purple, Colors.indigo, Colors.amber, Colors.cyan, + Colors.redAccent, Colors.grey, Colors.blueAccent, Colors.greenAccent, Colors.orangeAccent, + Colors.pinkAccent, Colors.purpleAccent, Colors.indigoAccent, Colors.amberAccent, Colors.cyanAccent, + ]; + @override Widget build(BuildContext context) { return Scaffold( + appBar: AppBar(title:const Text('颜色主页')), + floatingActionButton: FloatingActionButton( + onPressed: _toAddPage, + child: const Icon(Icons.add), + ), body: ColorsPanel( - colors: const [ - Colors.red, Colors.black, Colors.blue, Colors.green, Colors.orange, - Colors.pink, Colors.purple, Colors.indigo, Colors.amber, Colors.cyan, - Colors.redAccent, Colors.grey, Colors.blueAccent, Colors.greenAccent, Colors.orangeAccent, - Colors.pinkAccent, Colors.purpleAccent, Colors.indigoAccent, Colors.amberAccent, Colors.cyanAccent, - ], - onSelect: (Color color) => selectColor(context, color), + colors: _colors, + onSelect: _selectColor, ), ); } - void selectColor(BuildContext context,Color color){ + void _selectColor(Color color){ Route route = MaterialPageRoute(builder: (ctx) => StlColorPage(color: color)); Navigator.of(context).push(route); } + void _toAddPage() async { + Route route = MaterialPageRoute(builder: (ctx) => const ColorAddPage()); + Color? color = await Navigator.of(context).push(route); + if (color != null) { + setState(() { + _colors.add(color); + }); + } + } } diff --git a/lib/02/02/main.dart b/lib/02/02/main.dart new file mode 100644 index 0000000..2b9819d --- /dev/null +++ b/lib/02/02/main.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; +import 'package:iroute/02/01/pages/color_add_page.dart'; +import '../../common/pages/stl_color_page.dart'; +import 'pages/empty_page.dart'; +import 'pages/home_page.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Flutter Demo', + debugShowCheckedModeBanner: false, + theme: ThemeData( + colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), + useMaterial3: true, + ), + routes: routeMap, + // initialRoute: '/add_color', + onUnknownRoute: _onUnknownRoute, + onGenerateRoute: _onGenerateRoute, + ); + } + + /// 路由映射 [字符串 --> 组件构造器] + Map get routeMap => { + '/': (ctx) => const HomePage(), + '/add_color': (ctx) => const ColorAddPage(), + }; + + /// 根据路由配置 [settings] 创建路由 + Route? _onGenerateRoute(RouteSettings settings) { + String? name = settings.name; + Widget? child; + if (name == '/color_detail') { + Color color = settings.arguments as Color; + child = StlColorPage(color: color); + } + + if (child != null) { + return MaterialPageRoute( + builder: (ctx) => child!, + settings: settings, + ); + } + return null; + } + + Route? _onUnknownRoute(RouteSettings settings) { + return MaterialPageRoute( + builder: (ctx) => const EmptyPage(), + settings: settings, + ); + } +} diff --git a/lib/02/02/pages/color_add_page.dart b/lib/02/02/pages/color_add_page.dart new file mode 100644 index 0000000..bee43b4 --- /dev/null +++ b/lib/02/02/pages/color_add_page.dart @@ -0,0 +1,67 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +class ColorAddPage extends StatefulWidget { + const ColorAddPage({super.key}); + + @override + State createState() => _ColorAddPageState(); +} + +class _ColorAddPageState extends State { + late Color _color; + + @override + void initState() { + super.initState(); + _color = randomColor; + } + + @override + Widget build(BuildContext context) { + String text = '# ${_color.value.toRadixString(16)}'; + return Scaffold( + appBar: AppBar( + title: Text('添加颜色'), + actions: [IconButton(onPressed: _selectColor, icon: Icon(Icons.check ))], + ), + body: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0,vertical: 20), + child: Row( + children: [ + Expanded(child: Text(text,style: TextStyle(color: _color,fontSize: 24,letterSpacing: 4),)), + Container( + margin: EdgeInsets.only(left: 10), + width: 40, + height: 40, + child: Icon( + Icons.sell_outlined, + color: Colors.white, + ), + decoration: BoxDecoration( + color: _color, + borderRadius: BorderRadius.circular(8), + ), + ), + ], + ), + ), + ); + } + + Random _random = Random(); + + Color get randomColor { + return Color.fromARGB( + 255, + _random.nextInt(256), + _random.nextInt(256), + _random.nextInt(256), + ); + } + + void _selectColor() { + Navigator.of(context).pop(_color); + } +} diff --git a/lib/02/02/pages/empty_page.dart b/lib/02/02/pages/empty_page.dart new file mode 100644 index 0000000..e9064a8 --- /dev/null +++ b/lib/02/02/pages/empty_page.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; + +class EmptyPage extends StatelessWidget { + const EmptyPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text('界面走丢了'), + ), + body: Scaffold( + body: Center( + child: Wrap( + spacing: 16, + crossAxisAlignment: WrapCrossAlignment.center, + direction: Axis.vertical, + children: [ + Icon(Icons.nearby_error,size: 64, color: Colors.grey), + Text( + '404 界面丢失', + style: TextStyle(fontSize: 24, color: Colors.grey), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/02/02/pages/home_page.dart b/lib/02/02/pages/home_page.dart new file mode 100644 index 0000000..0c85ccc --- /dev/null +++ b/lib/02/02/pages/home_page.dart @@ -0,0 +1,49 @@ +import 'package:flutter/material.dart'; +import 'package:iroute/02/01/pages/color_add_page.dart'; + +import '../../../common/components/colors_panel.dart'; +import '../../../common/pages/stl_color_page.dart'; + +class HomePage extends StatefulWidget { + const HomePage({super.key}); + + @override + State createState() => _HomePageState(); +} + +class _HomePageState extends State { + final List _colors = [ + Colors.red, Colors.black, Colors.blue, Colors.green, Colors.orange, + Colors.pink, Colors.purple, Colors.indigo, Colors.amber, Colors.cyan, + Colors.redAccent, Colors.grey, Colors.blueAccent, Colors.greenAccent, Colors.orangeAccent, + Colors.pinkAccent, Colors.purpleAccent, Colors.indigoAccent, Colors.amberAccent, Colors.cyanAccent, + ]; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title:const Text('颜色主页 V2')), + floatingActionButton: FloatingActionButton( + onPressed: _toAddPage, + child: const Icon(Icons.add), + ), + body: ColorsPanel( + colors: _colors, + onSelect: _selectColor, + ), + ); + } + + void _selectColor(Color color){ + Navigator.of(context).pushNamed('/color_detail1',arguments: color); + } + + void _toAddPage() async { + dynamic color = await Navigator.of(context).pushNamed('/add_color'); + if (color != null) { + setState(() { + _colors.add(color); + }); + } + } +} diff --git a/lib/02/03/main.dart b/lib/02/03/main.dart new file mode 100644 index 0000000..e0d4076 --- /dev/null +++ b/lib/02/03/main.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:iroute/02/01/pages/color_add_page.dart'; +import '../../common/pages/stl_color_page.dart'; +import 'pages/empty_page.dart'; +import 'pages/home_page.dart'; +import 'router1/router1.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Flutter Demo', + debugShowCheckedModeBanner: false, + theme: ThemeData( + colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), + useMaterial3: true, + ), + routes: Router1.routeMap, + navigatorKey: Router1.globalNavKey, + onUnknownRoute: Router1.onUnknownRoute, + initialRoute: Router1.initialRoute, + onGenerateRoute: Router1.onGenerateRoute, + ); + } + + + + +} diff --git a/lib/02/03/pages/color_add_page.dart b/lib/02/03/pages/color_add_page.dart new file mode 100644 index 0000000..bee43b4 --- /dev/null +++ b/lib/02/03/pages/color_add_page.dart @@ -0,0 +1,67 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +class ColorAddPage extends StatefulWidget { + const ColorAddPage({super.key}); + + @override + State createState() => _ColorAddPageState(); +} + +class _ColorAddPageState extends State { + late Color _color; + + @override + void initState() { + super.initState(); + _color = randomColor; + } + + @override + Widget build(BuildContext context) { + String text = '# ${_color.value.toRadixString(16)}'; + return Scaffold( + appBar: AppBar( + title: Text('添加颜色'), + actions: [IconButton(onPressed: _selectColor, icon: Icon(Icons.check ))], + ), + body: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0,vertical: 20), + child: Row( + children: [ + Expanded(child: Text(text,style: TextStyle(color: _color,fontSize: 24,letterSpacing: 4),)), + Container( + margin: EdgeInsets.only(left: 10), + width: 40, + height: 40, + child: Icon( + Icons.sell_outlined, + color: Colors.white, + ), + decoration: BoxDecoration( + color: _color, + borderRadius: BorderRadius.circular(8), + ), + ), + ], + ), + ), + ); + } + + Random _random = Random(); + + Color get randomColor { + return Color.fromARGB( + 255, + _random.nextInt(256), + _random.nextInt(256), + _random.nextInt(256), + ); + } + + void _selectColor() { + Navigator.of(context).pop(_color); + } +} diff --git a/lib/02/03/pages/empty_page.dart b/lib/02/03/pages/empty_page.dart new file mode 100644 index 0000000..e9064a8 --- /dev/null +++ b/lib/02/03/pages/empty_page.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; + +class EmptyPage extends StatelessWidget { + const EmptyPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text('界面走丢了'), + ), + body: Scaffold( + body: Center( + child: Wrap( + spacing: 16, + crossAxisAlignment: WrapCrossAlignment.center, + direction: Axis.vertical, + children: [ + Icon(Icons.nearby_error,size: 64, color: Colors.grey), + Text( + '404 界面丢失', + style: TextStyle(fontSize: 24, color: Colors.grey), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/02/03/pages/home_page.dart b/lib/02/03/pages/home_page.dart new file mode 100644 index 0000000..abf86b7 --- /dev/null +++ b/lib/02/03/pages/home_page.dart @@ -0,0 +1,50 @@ +import 'package:flutter/material.dart'; +import 'package:iroute/02/01/pages/color_add_page.dart'; +import 'package:iroute/02/03/router1/router1.dart'; + +import '../../../common/components/colors_panel.dart'; +import '../../../common/pages/stl_color_page.dart'; + +class HomePage extends StatefulWidget { + const HomePage({super.key}); + + @override + State createState() => _HomePageState(); +} + +class _HomePageState extends State { + final List _colors = [ + Colors.red, Colors.black, Colors.blue, Colors.green, Colors.orange, + Colors.pink, Colors.purple, Colors.indigo, Colors.amber, Colors.cyan, + Colors.redAccent, Colors.grey, Colors.blueAccent, Colors.greenAccent, Colors.orangeAccent, + Colors.pinkAccent, Colors.purpleAccent, Colors.indigoAccent, Colors.amberAccent, Colors.cyanAccent, + ]; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title:const Text('颜色主页 V3')), + floatingActionButton: FloatingActionButton( + onPressed: _toAddPage, + child: const Icon(Icons.add), + ), + body: ColorsPanel( + colors: _colors, + onSelect: _selectColor, + ), + ); + } + + void _selectColor(Color color){ + Router1.nav.pushNamed(Router1.kColorDetail,arguments: color); + } + + void _toAddPage() async { + dynamic color = await Router1.nav.pushNamed(Router1.kAddColor); + if (color != null) { + setState(() { + _colors.add(color); + }); + } + } +} diff --git a/lib/02/03/router1/router1.dart b/lib/02/03/router1/router1.dart new file mode 100644 index 0000000..9838f23 --- /dev/null +++ b/lib/02/03/router1/router1.dart @@ -0,0 +1,56 @@ +import 'package:flutter/material.dart'; + +import '../../../common/pages/stl_color_page.dart'; +import '../pages/color_add_page.dart'; +import '../pages/empty_page.dart'; +import '../pages/home_page.dart'; + +class Router1 { + + /// 主页面 [HomePage] + static const String kHome = '/'; + + /// 颜色详情页 [StlColorPage] + static const String kColorDetail = '${kHome}color_detail'; + + /// 添加颜色页 [ColorAddPage] + static const String kAddColor = '${kHome}add_color'; + + + static String get initialRoute => kHome; + + static final GlobalKey globalNavKey = GlobalKey(); + + static NavigatorState get nav => globalNavKey.currentState!; + + /// 路由映射 [字符串 --> 组件构造器] + static Map get routeMap => { + kHome: (ctx) => const HomePage(), + kAddColor: (ctx) => const ColorAddPage(), + }; + + /// 根据路由配置 [settings] 创建路由 + static Route? onGenerateRoute(RouteSettings settings) { + String? name = settings.name; + Widget? child; + if (name == kColorDetail) { + Color color = settings.arguments as Color; + child = StlColorPage(color: color); + } + + if (child != null) { + return MaterialPageRoute( + builder: (ctx) => child!, + settings: settings, + ); + } + return null; + } + + static Route? onUnknownRoute(RouteSettings settings) { + return MaterialPageRoute( + builder: (ctx) => const EmptyPage(), + settings: settings, + ); + } +}