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

目次

写在前面
1. 引入 Flutter 包
2. 应用程序的入口
3. 创建 MyApp 组件
4. 创建 HomePage 组件
5. 实近况态类
状态变量
页面列表
点击变乱处置惩罚
6. 构建用户界面
Scaffold 布局
顶部应用栏
显示页面
底部导航栏
7. 完整代码
写在最后

---

写在前面

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

1. import 'package:flutter/material.dart';

复制代码

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

1. void main() {
2.   runApp(MyApp());
3. }

复制代码

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

1. class MyApp extends StatelessWidget { ///无状态的视图（非响应式）
2.   @override
3.   Widget build(BuildContext context) {
4.     return MaterialApp(
5.       title: 'Flutter Bottom Navigation',
6.       theme: ThemeData(
7.         primarySwatch: Colors.blue,
8.       ),
9.       home: HomePage(),
10.     );
11.   }
12. }

复制代码

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

4. 创建 HomePage 组件

1. class HomePage extends StatefulWidget {
2.   ///有状态的视图（响应式）
3.   @override
4.   _HomePageState createState() => _HomePageState();
5. }

复制代码

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

5. 实近况态类

1. class _HomePageState extends State<HomePage> {
2.   int _selectedIndex = 0; // 当前选中的底部导航项
4.   // 页面列表
5.   List<Widget> _pages = [
6.     Center(child: Text('Home Page')),
7.     Center(child: Text('Search Page')),
8.     Center(child: Text('Profile Page')),
9.   ];
11.   void _onItemTapped(int index) {
12.     setState(() {
13.       _selectedIndex = index; // 更新选中的索引
14.     });
15.   }

复制代码

状态变量

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

页面列表

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

每个页面都是一个 Center 小部件，里面包罗一个 Text 小部件，表示当前页面的名称。
点击变乱处置惩罚

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

6. 构建用户界面

1. @override
2. Widget build(BuildContext context) {
3.   return Scaffold(
4.     appBar: AppBar(
5.       title: Text('Flutter Bottom Navigation'),
6.     ),
7.     body: _pages[_selectedIndex], // 显示当前选中的页面
8.     bottomNavigationBar: BottomNavigationBar(
9.       items: const <BottomNavigationBarItem>[
10.         BottomNavigationBarItem(
11.           icon: Icon(Icons.home),
12.           label: 'Home',
13.         ),
14.         BottomNavigationBarItem(
15.           icon: Icon(Icons.search),
16.           label: 'Search',
17.         ),
18.         BottomNavigationBarItem(
19.           icon: Icon(Icons.person),
20.           label: 'Profile',
21.         ),
22.       ],
23.       currentIndex: _selectedIndex, // 当前选中的索引
24.       selectedItemColor: Colors.blue,
25.       onTap: _onItemTapped, // 点击事件
26.     ),
27.   );
28. }

复制代码

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. 完整代码

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

1. import 'package:flutter/material.dart';
2. void main() {
3.   runApp(MyApp());
4. }
5. class MyApp extends StatelessWidget {  ///无状态的视图（非响应式）  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Bottom Navigation',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: HomePage(),    );  }}class HomePage extends StatefulWidget {
6.   ///有状态的视图（响应式）
7.   @override
8.   _HomePageState createState() => _HomePageState();
9. }
10. class _HomePageState extends State<HomePage> {
11.   int _selectedIndex = 0; // 当前选中的底部导航项
13.   // 页面列表
14.   List<Widget> _pages = [
15.     Center(child: Text('Home Page')),
16.     Center(child: Text('Search Page')),
17.     Center(child: Text('Profile Page')),
18.   ];
20.   void _onItemTapped(int index) {
21.     setState(() {
22.       _selectedIndex = index; // 更新选中的索引
23.     });
24.   }
25.   @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, // 点击变乱      ),    );  }}

复制代码

写在最后

通过这段代码，我们构建了一个根本的 Flutter 应用，包罗了底部导航栏，可以在不同页面之间举行切换。该示例展示了 Flutter 的状态管理机制、组件结构以及如何使用 Material Design 组件构建用户界面。
盼望本文可以大概帮助您更好地理解 Flutter 开辟！如果您有任何问题或发起，欢迎与我交流。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。