[flutter_web] Navigation_NavigationBar

chen56 · Jun 12, 2024 · 1c18ea0 · 1c18ea0
1 parent 915ef75
commit 1c18ea0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 29 deletions.
diff --git a/.../flutter_web/lib/routes/notes/cheatsheets/widgets/_examples/Navigation_NavigationBar.dart b/.../flutter_web/lib/routes/notes/cheatsheets/widgets/_examples/Navigation_NavigationBar.dart
@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:you_flutter/state.dart';
+
+main() {
+  runApp(MaterialApp(home: Scaffold(body: Navigation_NavigationBar())));
+}
+
+// ignore: camel_case_types
+class Navigation_NavigationBar extends StatelessWidget {
+  Navigation_NavigationBar({super.key});
+
+  final selected = 0.signal();
+
+  @override
+  Widget build(BuildContext context) {
+    List<({NavigationDestination destination, Widget page})> destinations = [
+      (
+        destination: const NavigationDestination(icon: Icon(Icons.explore), label: 'Explore'),
+        page: Container(width: double.infinity, height: double.infinity, color: Colors.blue.shade100, child: const Text("Explore")),
+      ),
+      (
+        destination: const NavigationDestination(icon: Icon(Icons.commute), label: 'Commute'),
+        page: Container(width: double.infinity, height: double.infinity, color: Colors.green.shade100, child: const Text("Commute")),
+      ),
+    ];
+    return Watch(builder: (context) {
+      return SizedBox(
+        width: double.infinity,
+        height: 200,
+        child: Scaffold(
+          body: destinations[selected.value].page,
+          bottomNavigationBar: NavigationBar(
+            onDestinationSelected: (newSelection) => selected.value = newSelection,
+            selectedIndex: selected.value,
+            destinations: destinations.map((e) => e.destination).toList(),
+          ),
+        ),
+      );
+    });
+  }
+}
diff --git a/notes/flutter_web/lib/routes/notes/cheatsheets/widgets/page.dart b/notes/flutter_web/lib/routes/notes/cheatsheets/widgets/page.dart
@@ -6,6 +6,7 @@ import 'package:flutter_web/app.dart';
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Input_ButtonStyleButton.dart';
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Input_FloatingActionButton.dart';
 import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Navigation_BottomAppBar.dart';
+import 'package:flutter_web/routes/notes/cheatsheets/widgets/_examples/Navigation_NavigationBar.dart';
 import 'package:flutter_web/views/cell_layouts.dart';
 import 'package:you_flutter/note.dart';
 import 'package:you_flutter/state.dart';
@@ -24,7 +25,7 @@ void build(BuildContext context, Cell print) {
     children: [
       Level1MasonryLayout(title: "导航与页面", cellWidth: 350, children: [
         FlutterExample(title: "BottomAppBar", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Navigation_BottomAppBar_dart, child: const Navigation_BottomAppBar()),
-        FlutterExample(title: "NavigationBar", child: navigationAndPage.navigationBar()),
+        FlutterExample(title: "NavigationBar", source: assets.lib_routes_notes_cheatsheets_widgets__examples_Navigation_NavigationBar_dart, child: Navigation_NavigationBar()),
         FlutterExample(title: "NavigationDrawer", child: navigationAndPage.navigationDrawer()),
         FlutterExample(title: "NavigationRail", child: navigationAndPage.navigationRail()),
         FlutterExample(title: "TabBar", child: navigationAndPage.tabBar()),
@@ -1049,34 +1050,6 @@ class Decorator {
 }
 
 class NavigationAndPage {
-  Widget navigationBar() {
-    final selected = 0.signal();
-    List<({NavigationDestination destination, Widget page})> destinations = [
-      (
-        destination: const NavigationDestination(icon: Icon(Icons.explore), label: 'Explore'),
-        page: Container(width: double.infinity, height: double.infinity, color: Colors.blue.shade100, child: const Text("Explore")),
-      ),
-      (
-        destination: const NavigationDestination(icon: Icon(Icons.commute), label: 'Commute'),
-        page: Container(width: double.infinity, height: double.infinity, color: Colors.green.shade100, child: const Text("Commute")),
-      ),
-    ];
-    return Watch(builder: (context) {
-      return SizedBox(
-        width: double.infinity,
-        height: 200,
-        child: Scaffold(
-          body: destinations[selected.value].page,
-          bottomNavigationBar: NavigationBar(
-            onDestinationSelected: (newSelection) => selected.value = newSelection,
-            selectedIndex: selected.value,
-            destinations: destinations.map((e) => e.destination).toList(),
-          ),
-        ),
-      );
-    });
-  }
-
   Widget navigationDrawer() {
     final selected = 0.signal();