目录

1. 创建项目结构

2. 编写页面组件

3. 在 main.dart 中配置底部导航栏

代码解释

---

在 Flutter 中，Scaffold 是一个用于构建页面结构的重要组件，BottomNavigationBar 常用于实现底部导航栏以进行页面切换。以下是一个全面的示例，展示如何自定义底部导航栏来实现页面切换，并以博客的形式呈现：

1. 创建项目结构

假设项目结构如下：

lib/
├── main.dart
├── screens/
│   ├── home_screen.dart
│   ├── profile_screen.dart
│   └── settings_screen.dart

2. 编写页面组件

在 screens 目录下创建不同的页面组件，例如 home_screen.dart、profile_screen.dart 和 settings_screen.dart。

home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('博客首页'),
      ),
      body: Center(
        child: Text('这是博客的首页内容'),
      ),
    );
  }
}

profile_screen.dart

import 'package:flutter/material.dart';

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('个人资料'),
      ),
      body: Center(
        child: Text('这是个人资料页面内容'),
      ),
    );
  }
}

settings_screen.dart

import 'package:flutter/material.dart';

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('设置'),
      ),
      body: Center(
        child: Text('这是设置页面内容'),
      ),
    );
  }
}

3. 在 main.dart 中配置底部导航栏

import 'package:flutter/material.dart';
import'screens/home_screen.dart';
import'screens/profile_screen.dart';
import'screens/settings_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '博客底部导航示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  final List<Widget> _screens = [
    HomeScreen(),
    ProfileScreen(),
    SettingsScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '个人资料',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
        ],
      ),
    );
  }
}

代码解释

1. 页面组件：每个页面（HomeScreen、ProfileScreen、SettingsScreen）都是一个 StatelessWidget，包含一个 AppBar 和一个显示特定文本的 Center 组件。
2. 底部导航栏配置：
   • 在 MyHomePage 类中，使用 StatefulWidget 来管理底部导航栏的状态。
   • _currentIndex 用于记录当前选中的页面索引。
   • _screens 列表包含了所有要切换的页面组件。
   • BottomNavigationBar 组件：
     • currentIndex 设置当前选中的索引。
     • onTap 回调函数在用户点击导航栏项时更新 _currentIndex，并通过 setState 重新构建页面以显示对应的页面。
     • items 定义了底部导航栏的各个选项，包括图标和标签。

通过上述代码，你可以在 Flutter 应用中实现一个带有自定义底部导航栏的博客应用，用户可以通过点击底部导航栏切换不同的页面。