路由生命周期状态

lib/11/color_detail.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+class ColorDetailPage extends StatelessWidget {
+  final Color color;
+  const ColorDetailPage({super.key, required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: color,
+      appBar: AppBar(
+        centerTitle: true,
+        iconTheme: IconThemeData(color: Colors.white),
+        titleTextStyle: TextStyle(color: Colors.white,fontSize: 16,fontWeight: FontWeight.bold),
+        backgroundColor: color,
+        title: Text('颜色详情页'),
+      ),
+      body: Center(
+        child: Text(   '#${color.value.toRadixString(16)}',style: TextStyle(color: Colors.white,fontSize: 26,fontWeight: FontWeight.bold),),
+      ),
+    );
+  }
+}
+

lib/11/color_page.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import '../common/components/colors_panel.dart';
+import 'color_detail.dart';
+import 'transition.dart';
+
+class ColorPage extends StatefulWidget {
+  const ColorPage({super.key});
+
+  @override
+  State<ColorPage> createState() => _ColorPageState();
+}
+
+class _ColorPageState extends State<ColorPage> {
+  final List<Color> _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: _colors,
+        onSelect: _selectColor,
+      ),
+    );
+  }
+
+  void _selectColor(Color color) {
+    Route route = PageRouteBuilder<void>(
+      barrierColor: Colors.white,
+      pageBuilder: (_, __, ___) => ColorDetailPage(color:color),
+      transitionsBuilder: kSlideBottomToTopWithSecondary,
+    );
+    Navigator.push(context, route);
+    // Navigator.push(
+    //     context,
+    //     MaterialPageRoute(builder: (_)=>ColorDetailPage(color:color)));
+  }
+
+  void _toAddPage() {
+  }
+}

lib/11/main.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:iroute/11/transition.dart';
+
+import 'color_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',
+      localizationsDelegates: GlobalMaterialLocalizations.delegates,
+      supportedLocales: const [
+        Locale('zh', 'CN'),
+      ],
+      locale: const Locale('zh', 'CN'),
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+        useMaterial3: true,
+      ),
+      home: const HomePage(),
+    );
+  }
+}
+
+class HomePage extends StatefulWidget {
+  const HomePage({super.key});
+
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Cose 酷色"),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            ElevatedButton(
+              onPressed: _toColorHome,
+              child: Text('打开颜色界面'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  void _toColorHome() {
+    Route route = PageRouteBuilder<void>(
+      barrierColor: Colors.white,
+      pageBuilder: (_, __, ___) => const ColorPage(),
+      transitionsBuilder: kSlideBottomToTopWithSecondary,
+    );
+    Navigator.push(context, route);
+    // Navigator.pushReplacement(context, route);
+
+  }
+}

lib/11/transition.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+RouteTransitionsBuilder kSlideBottomToTopWithSecondary = (
+  BuildContext context,
+  Animation<double> animation,
+  Animation<double> secondaryAnimation,
+  Widget child,
+) {
+  return SlideTransition(
+    position: Tween<Offset>(
+      begin: const Offset(0.0, 1.0),
+      end: Offset.zero,
+    ).animate(animation),
+    child: SlideTransition(
+      position: Tween<Offset>(
+        begin: Offset.zero,
+        end: const Offset(0.0, 1.0),
+      ).animate(secondaryAnimation),
+      child: child,
+    ),
+  );
+};