界面整合v1

lib/navigation/app_bottom_bar.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+class MenuData {
+  // 标签
+  final String label;
+
+  // 图标数据
+  final IconData icon;
+
+  const MenuData({
+    required this.label,
+    required this.icon,
+  });
+}
+
+class AppBottomBar extends StatelessWidget {
+  final int currentIndex;
+  final List<MenuData> menus;
+  final ValueChanged<int>? onItemTap;
+
+  const AppBottomBar({
+    Key? key,
+    this.onItemTap,
+    this.currentIndex = 0,
+    required this.menus,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return BottomNavigationBar(
+      backgroundColor: Colors.white,
+      onTap: onItemTap,
+      currentIndex: currentIndex,
+      elevation: 3,
+      type: BottomNavigationBarType.fixed,
+      iconSize: 22,
+      selectedItemColor: Theme.of(context).primaryColor,
+      selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),
+      showUnselectedLabels: true,
+      showSelectedLabels: true,
+      items: menus.map(_buildItemByMenuMeta).toList(),
+    );
+  }
+
+  BottomNavigationBarItem _buildItemByMenuMeta(MenuData menu) {
+    return BottomNavigationBarItem(
+      label: menu.label,
+      icon: Icon(menu.icon),
+    );
+  }
+}

lib/navigation/app_navigation.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_first_station/guess/guess_page.dart';
+import 'package:flutter_first_station/muyu/muyu_page.dart';
+import 'package:flutter_first_station/paper/paper.dart';
+
+import 'app_bottom_bar.dart';
+
+class AppNavigation extends StatefulWidget {
+  const AppNavigation({Key? key}) : super(key: key);
+
+  @override
+  State<AppNavigation> createState() => _AppNavigationState();
+}
+
+class _AppNavigationState extends State<AppNavigation> {
+  int _index = 0;
+
+  final List<MenuData> menus = const [
+    MenuData(label: '猜数字', icon: Icons.question_mark),
+    MenuData(label: '电子木鱼', icon: Icons.my_library_music_outlined),
+    MenuData(label: '白板绘制', icon: Icons.palette_outlined),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Expanded(
+          child: _buildContent(_index),
+        ),
+        AppBottomBar(
+          currentIndex: _index,
+          onItemTap: _onChangePage,
+          menus: menus,
+        )
+      ],
+    );
+  }
+
+  void _onChangePage(int index) {
+    setState(() {
+      _index = index;
+    });
+  }
+
+  Widget _buildContent(int index) {
+    switch(index){
+      case 0:
+       return const GuessPage();
+      case 1:
+        return const MuyuPage();
+      case 2:
+        return const Paper();
+      default:
+        return const SizedBox.shrink();
+    }
+  }
+}
+