主页添加底栏

lib/pages/home/index.dart

@@ -0,0 +1,17 @@
+import "package:flutter/material.dart";
+
+class HomeView extends StatefulWidget {
+  const HomeView({super.key});
+
+  @override
+  State<HomeView> createState() => _HomeViewState();
+}
+
+class _HomeViewState extends State<HomeView> {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text("Home View"),
+    );
+  }
+}

lib/pages/main/index.dart

@@ -1,4 +1,7 @@
 import "package:flutter/material.dart";
+import '../home/index.dart';
+import '../myfriends/index.dart';
+import '../profile/index.dart';
 
 class MainPage extends StatefulWidget {
   const MainPage({super.key});
@@ -8,14 +11,64 @@ class MainPage extends StatefulWidget {
 }
 
 class _MainPageState extends State<MainPage> {
+  // 定义数据 根据数据进行渲染导航键
+  final List<Map<String, dynamic>> _navList = [
+    {
+      "icon": Icons.home_outlined,
+      "activeIcon": Icons.home,
+      "label": "Home",
+    },
+    {
+      "icon": Icons.face_outlined,
+      "activeIcon": Icons.face,
+      "label": "MyFriends",
+    },
+    {
+      "icon": Icons.person_outlined,
+      "activeIcon": Icons.person,
+      "label": "Profile",
+    },
+  ];
+
+  // 根据数据渲染导航键
+  List<BottomNavigationBarItem> _buildNavItems() {
+    return List.generate(_navList.length, (int index) {
+      final navItem = _navList[index];
+      return BottomNavigationBarItem(
+        icon: Icon(navItem["icon"]),
+        activeIcon: Icon(navItem["activeIcon"]),
+        label: navItem["label"],
+      );
+    });
+  }
+
+  int _currentIndex = 0; // 当前选中的导航键索引
+
+  List<Widget> get _pages {
+    return [
+      const HomeView(),
+      const MyFriendsView(),
+      const ProfileView(),
+    ]; // 对应导航键的页面列表
+  }
+
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Text("Main Page"),
-      ),
-      body: Center(
-        child: Text("This is the main page."),
+      // 避开刘海屏等特殊屏幕区域
+      body: SafeArea(child: IndexedStack(
+        index: _currentIndex,
+        children: _pages,
+      )), // 堆叠索引组件，根据当前索引显示对应的页面
+      bottomNavigationBar: BottomNavigationBar(
+        currentIndex: _currentIndex,
+        items: _buildNavItems(),
+        onTap: (int index) { // 点击导航键时更新当前索引
+          setState(() {
+            _currentIndex = index;
+          });
+        },
       ),
     );
   }

lib/pages/myfriends/index.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class MyFriendsView extends StatefulWidget {
+  const MyFriendsView({super.key});
+
+  @override
+  State<MyFriendsView> createState() => _MyFriendsViewState();
+}
+
+class _MyFriendsViewState extends State<MyFriendsView> {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text("MyFriends View"),
+    );
+  }
+}

lib/pages/profile/index.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+
+class ProfileView extends StatefulWidget {
+  const ProfileView({super.key});
+
+  @override
+  State<ProfileView> createState() => _ProfileViewState();
+}
+
+class _ProfileViewState extends State<ProfileView> {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text("Profile View"),
+    );
+  }
+}