flutter鸿蒙版本通过底部导航栏的实现熟悉架构及语法

写在前面

1. 引入 Flutter 包

2. 应用程序的入口

3. 创建 MyApp 组件

4. 创建 HomePage 组件

5. 实现状态类

状态变量

页面列表

点击事件处理

6. 构建用户界面

Scaffold 布局

顶部应用栏

显示页面

底部导航栏

7. 完整代码

写在最后

写在前面

在这篇博客中，我们将深入分析一个 Flutter 应用的完整代码，该应用实现了一个底部导航栏，允许用户在不同页面之间切换。我们将逐行讲解代码，帮助大家理解 Flutter 的结构、状态管理以及组件之间的交互。

1. 引入 Flutter 包

import 'package:flutter/material.dart';

这一行代码导入了 Flutter 的核心 Material Design 库。这个库为我们提供了各种丰富的 UI 组件，允许我们构建出具有良好用户体验的应用界面。

2. 应用程序的入口

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

main() 函数是 Dart 应用程序的入口。在这里，我们调用 runApp() 方法来启动 Flutter 应用，并传入 MyApp 组件作为根组件。runApp() 方法会将传入的 Widget 加载到屏幕上。

3. 创建 MyApp 组件

class MyApp extends StatelessWidget { ///无状态的视图（非响应式）@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Bottom Navigation',theme: ThemeData(primarySwatch: Colors.blue,),home: HomePage(),);}
}

MyApp 继承自 StatelessWidget，表明这是一个无状态的视图组件，它不会随着时间的推移而改变。
在 build 方法中，我们构建了一个 MaterialApp，这是 Flutter 应用的核心组件，提供了应用的主题、路由等设置。
- title 属性定义了应用的标题，通常用于显示在任务切换器中。
- theme 属性设置了应用的主题，这里我们使用蓝色调（primarySwatch 为 Colors.blue）。
- home 属性指定了应用的主页，这里我们将其设置为 HomePage 组件。

4. 创建 HomePage 组件

class HomePage extends StatefulWidget {///有状态的视图（响应式）@override_HomePageState createState() => _HomePageState();
}

HomePage 组件继承自 StatefulWidget，表明它是一个有状态的组件。与无状态组件不同，有状态组件可以根据用户的交互而改变其显示内容。
createState 方法返回一个 _HomePageState 对象，该对象将保存 HomePage 的状态。

5. 实现状态类

class _HomePageState extends State<HomePage> {int _selectedIndex = 0; // 当前选中的底部导航项// 页面列表List<Widget> _pages = [Center(child: Text('Home Page')),Center(child: Text('Search Page')),Center(child: Text('Profile Page')),];void _onItemTapped(int index) {setState(() {_selectedIndex = index; // 更新选中的索引});}

状态变量

_HomePageState 类负责管理 HomePage 的状态。我们定义了一个整型变量 _selectedIndex，初始值为 0，用于追踪当前选中的底部导航项。

页面列表

_pages 列表包含了三个页面，分别是：
- Home Page
- Search Page
- Profile Page

每个页面都是一个 Center 小部件，里面包含一个 Text 小部件，表示当前页面的名称。

点击事件处理

_onItemTapped 方法用于处理底部导航项的点击事件。当用户点击某个导航项时，这个方法会被调用，并通过 setState 方法更新 _selectedIndex，触发界面重建，从而显示新选中的页面。

6. 构建用户界面

@override
Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Bottom Navigation'),),body: _pages[_selectedIndex], // 显示当前选中的页面bottomNavigationBar: BottomNavigationBar(items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.search),label: 'Search',),BottomNavigationBarItem(icon: Icon(Icons.person),label: 'Profile',),],currentIndex: _selectedIndex, // 当前选中的索引selectedItemColor: Colors.blue,onTap: _onItemTapped, // 点击事件),);
}

Scaffold 布局

build 方法返回一个 Scaffold 小部件，它提供了应用的基本视觉结构，包括 appBar、body 和 bottomNavigationBar。

顶部应用栏

appBar 属性设置了应用的顶部导航栏，显示了应用的标题。

显示页面

body 属性通过 _pages[_selectedIndex] 动态显示当前选中的页面。根据 _selectedIndex 的值，应用会渲染不同的页面内容。

底部导航栏

bottomNavigationBar 属性定义了底部导航栏的结构。它包含三个导航项：
- Home：图标为家（Icons.home）。
- Search：图标为搜索（Icons.search）。
- Profile：图标为个人资料（Icons.person）。
currentIndex 属性设置当前选中的索引，selectedItemColor 属性定义了选中项的颜色。
onTap 属性将点击事件绑定到 _onItemTapped 方法，使得点击导航项时可以更新状态和切换页面。

7. 完整代码

下面是整段代码的完整展示，方便您对照：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {///无状态的视图（非响应式）@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Bottom Navigation',theme: ThemeData(primarySwatch: Colors.blue,),home: HomePage(),);}
}class HomePage extends StatefulWidget {///有状态的视图（响应式）@override_HomePageState createState() => _HomePageState();
}class _HomePageState extends State<HomePage> {int _selectedIndex = 0; // 当前选中的底部导航项// 页面列表List<Widget> _pages = [Center(child: Text('Home Page')),Center(child: Text('Search Page')),Center(child: Text('Profile Page')),];void _onItemTapped(int index) {setState(() {_selectedIndex = index; // 更新选中的索引});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Flutter Bottom Navigation'),),body: _pages[_selectedIndex], // 显示当前选中的页面bottomNavigationBar: BottomNavigationBar(items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.search),label: 'Search',),BottomNavigationBarItem(icon: Icon(Icons.person),label: 'Profile',),],currentIndex: _selectedIndex, // 当前选中的索引selectedItemColor: Colors.blue,onTap: _onItemTapped, // 点击事件),);}
}