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 { ///无状态的视图（非响应式）
  @override
  Widget 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 {
  ///无状态的视图（非响应式）
  @override
  Widget 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; // 更新选中的索引
    });
  }

  @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 开发！如果您有任何问题或建议，欢迎与我交流。