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

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

写在前面

  1. 引入 Flutter 包

  2. 应用程序的入口

  3. 创建 MyApp 组件

  4. 创建 HomePage 组件

  5. 实现状态类

状态变量

页面列表

点击事件处理

  1. 构建用户界面

Scaffold 布局

顶部应用栏

显示页面

底部导航栏

  1. 完整代码

写在最后

写在前面
在这篇博客中,我们将深入分析一个 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,
    
    AI 代码解读

    ),
    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 {
    int _selectedIndex = 0; // 当前选中的底部导航项

    // 页面列表
    List _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,触发界面重建,从而显示新选中的页面。

  1. 构建用户界面
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text('Flutter Bottom Navigation'),
    ),
    body: _pages[_selectedIndex], // 显示当前选中的页面
    bottomNavigationBar: BottomNavigationBar(
    items: const [
     BottomNavigationBarItem(
       icon: Icon(Icons.home),
       label: 'Home',
     ),
     BottomNavigationBarItem(
       icon: Icon(Icons.search),
       label: 'Search',
     ),
     BottomNavigationBarItem(
       icon: Icon(Icons.person),
       label: 'Profile',
     ),
    
    AI 代码解读
    ],
    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 方法,使得点击导航项时可以更新状态和切换页面。

  1. 完整代码
    下面是整段代码的完整展示,方便您对照:

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 {
int _selectedIndex = 0; // 当前选中的底部导航项

// 页面列表
List _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(
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 开发!如果您有任何问题或建议,欢迎与我交流。

相关文章
|
3月前
|
API
HarmonyOS 3.1/4项目在DevEco Studio 5.0(HarmonyOS NEXT)版本下使用的问题
有读者在使用《鸿蒙HarmonyOS应用开发入门》书中的源码时遇到问题,主要原因是使用的DevEco Studio版本不同所致。本文提供了三种解决方案:1) 降级DevEco Studio至3.1版本;2) 按照5.0版本修改书中示例;3) 等待并使用《鸿蒙之光HarmonyOS NEXT原生应用开发入门》升级版书籍。
271 1
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
59 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》学习笔记——HarmonyOS架构介绍
HarmonyOS采用分层架构设计,从下至上分为内核层、系统服务层、框架层和应用层。内核层支持多内核设计与硬件驱动;系统服务层提供核心能力和服务;框架层支持多语言开发;应用层包括系统及第三方应用,支持跨设备调度,确保一致的用户体验。
178 81
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
76 8
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
328 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
2月前
|
API
【HarmonyOS Next】状态管理V2版本使用详解
现阶段状态管理V2版本还在试用阶段,但是切实解决了很多在项目中使用V1导致的痛点问题,比如: * 同一数据被多视图代理时,无法同步数据修改。 * 无法做到深度观测和深度监听。 * 更新对象中某个数据时,会导致整个对象属性都刷新,导致程序运行缓慢。
91 4
【HarmonyOS Next】状态管理V2版本使用详解
基于HarmonyOS 5.0的元服务:技术架构、应用场景与未来发展【探讨】
鸿蒙OS 5.0推出的元服务(Super Service)是一种创新的服务架构,旨在提供无缝的跨设备体验。它具备无感知启动、跨设备共享和智能推送等特点,适用于智能家居、车载系统、即时通讯等场景。与传统应用及微信小程序相比,元服务更轻量、跨平台能力强,且无需下载安装。未来,元服务将通过AI增强智能化,并扩展到更多行业,如智慧医疗、智能零售等,推动物联网和智慧城市的发展。然而,其发展仍面临平台依赖、隐私安全等挑战。
467 4
基于HarmonyOS 5.0的元服务:技术架构、应用场景与未来发展【探讨】
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
120 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
100 2
鸿蒙Flutter实战:12-使用模拟器开发调试
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
170 5

热门文章

最新文章

  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    29
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    59
  • 3
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
    62
  • 4
    鸿蒙原生应用再添新丁!北京广电、充电管家、有我帮 入局鸿蒙
    27
  • 5
    鸿蒙开发:了解@Builder装饰器
    56
  • 6
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    157
  • 7
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    63
  • 8
    华为鸿蒙自己家的“AI”编辑器插件用起来到底怎么样?
    66
  • 9
    《鸿蒙 HarmonyOS 应用开发从入门到精通(第 2 版)》学习笔记 ——HarmonyOS 环境搭建之注册华为开发者联盟帐号
    93
  • 10
    微信纯血鸿蒙版正式发布,295天走完微信14年技术之路!
    91
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等