Flutter bottomNavigationBar 底部导航栏

Flutter 学习第一天

import 'package:flutter/material.dart';

// 应用程序入口点
void main() {
  // 启动Flutter应用，MyApp是根组件
  runApp(const MyApp());
}

// 应用根组件，继承无状态Widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp是Material风格应用的主组件
    return MaterialApp(
      title: 'Flutter 底部导航栏', // 应用名称
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), // 从种子颜色生成配色方案
        useMaterial3: true, // 启用Material 3设计
      ),
      home: const MainPage(), // 设置应用启动时显示的主页
      debugShowCheckedModeBanner: false, // 隐藏调试标志
    );
  }
}

// 主页面组件，继承有状态Widget（因为需要管理底部导航栏的选中状态）
class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

// MainPage的状态类，管理页面状态和逻辑
class _MainPageState extends State<MainPage> {
  // 当前选中的底部导航栏索引（0表示首页，1表示发现，2表示我的）
  int _currentIndex = 0;
  
  // 页面列表，存储所有可能的页面组件
  final List<Widget> _pages = [
    const HomePage(),    // 索引0：首页
    const ExplorePage(), // 索引1：发现页
    const ProfilePage(), // 索引2：个人页面
  ];

  @override
  Widget build(BuildContext context) {
    // Scaffold提供基本的Material Design布局结构
    return Scaffold(
      // 根据当前选中的索引显示对应的页面
      body: _pages[_currentIndex],
      
      // 底部导航栏组件
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 设置当前选中的索引
        onTap: (index) {
          // 当用户点击导航项时的回调函数
          setState(() {
            // 更新当前索引，触发界面重新构建
            _currentIndex = index;
          });
        },
        // 底部导航栏的项目列表
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home), // 首页图标
            label: '首页',           // 首页标签
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.explore), // 发现图标
            label: '发现',              // 发现标签
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person), // 个人资料图标
            label: '我的',             // 个人资料标签
          ),
        ],
      ),
    );
  }
}

// 首页组件
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 首页的导航栏
      appBar: AppBar(
        title: const Text('首页'), // 导航栏标题
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, // 使用主题色
      ),
      // 首页内容区域
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
          children: [
            Icon(
              Icons.home,
              size: 80,
              color: Colors.blue, // 首页图标颜色
            ),
            SizedBox(height: 20), // 间距组件，创建20像素的垂直间距
            Text(
              '首页',
              style: TextStyle(fontSize: 24), // 文本样式
            ),
          ],
        ),
      ),
    );
  }
}

// 发现页组件
class ExplorePage extends StatelessWidget {
  const ExplorePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('发现'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.explore,
              size: 80,
              color: Colors.orange, // 发现页图标颜色
            ),
            SizedBox(height: 20),
            Text(
              '发现页面',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

// 个人页面组件
class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.person,
              size: 80,
              color: Colors.green, // 个人页面图标颜色
            ),
            SizedBox(height: 20),
            Text(
              '我的页面',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}