13-14 底部选项卡 flutter on openHarmony

欢迎加入开源鸿蒙跨平台社区: https://openharmonycrossplatform.csdn.net

目录

  • [1. lib/main.dart](#1. lib/main.dart)
  • [2. lib/components/bottom_nav_bar.dart](#2. lib/components/bottom_nav_bar.dart)
  • [3. lib/pages/home/home_page.dart](#3. lib/pages/home/home_page.dart)
    • [3.1. 主要功能](#3.1. 主要功能)
    • [3.2. 功能验证](#3.2. 功能验证)
  • [4. lib/pages/cloth_show/cloth_show_page.dart](#4. lib/pages/cloth_show/cloth_show_page.dart)
    • [4.1. 主要功能](#4.1. 主要功能)
    • [4.2. 功能验证](#4.2. 功能验证)
  • [5. lib/pages/cloth_note/cloth_note_page.dart](#5. lib/pages/cloth_note/cloth_note_page.dart)
    • [5.1. 主要功能](#5.1. 主要功能)
    • [5.2. 功能验证](#5.2. 功能验证)
  • [6. lib/pages/wear_what/wear_what_page.dart](#6. lib/pages/wear_what/wear_what_page.dart)
    • [6.1. 主要功能](#6.1. 主要功能)
    • [6.2. 功能验证](#6.2. 功能验证)
  • [7. lib/pages/mine/mine_page.dart](#7. lib/pages/mine/mine_page.dart)
    • [7.1. 主要功能](#7.1. 主要功能)
    • [7.2. 功能验证](#7.2. 功能验证)

本阶段任务是扩展开源鸿蒙跨平台应用核心功能,通过新增底部选项卡及完善对应页面实现,丰富应用交互维度与服务能力,并完成开源鸿蒙设备运行验证。

1. lib/main.dart

这是Flutter应用的入口文件,定义了应用的启动和基本配置。

路由配置:

默认首页是 BottomNavBar (底部导航栏)

定义了多个命名路由:

  • /home - 首页
  • /login - 登录页
  • /register - 注册页
  • /settings - 设置页
    这个文件是应用的骨架,负责初始化应用和配置全局路由。

2. lib/components/bottom_nav_bar.dart

这是一个Flutter应用的底部导航栏组件,可以让用户在不同的页面间切换。

包含所有页面的列表,包括:

  • HomePage() - 首页
  • ClothShowPage() - 服装展示页
  • ClothNotePage() - 服装动态页
  • WearWhatPage() - 推荐/搜索页
  • MinePage() - 我的页面

3. lib/pages/home/home_page.dart

这是Flutter应用的首页组件,是应用的主要入口页面,集成了多个子组件并实现了完整的数据加载和交互逻辑。

3.1. 主要功能

  • 实现了应用的首页界面
  • 包含搜索栏、轮播图、分类标签和服装卡片网格
  • 支持下拉刷新和上拉加载更多功能

3.2. 功能验证

4. lib/pages/cloth_show/cloth_show_page.dart

这是一个Flutter的服装展示页面组件,包含顶部Tab导航的服装展示页面,可以在三个子页面之间切换。

4.1. 主要功能

  • 清单页 (ClothShowTab) - 展示服装列表
  • 排行页 (ClothStarTab) - 展示服装排行
  • 任务中心页 (TaskCenterTab) - 展示相关任务

4.2. 功能验证

5. lib/pages/cloth_note/cloth_note_page.dart

这是一个Flutter的服装动态页面组件,包含顶部Tab导航的服装动态页面,通过两个Tab切换展示不同类型的内容。

5.1. 主要功能

这个页面是服装动态模块的主入口,用户可以查看其他用户分享的穿搭内容,通过Tab切换浏览热门或最新动态。

  • 最热动态 (ClothNoteHotTab) - 展示热门穿搭内容

  • 最新动态 (ClothNoteNewTab) - 展示最新发布的穿搭内容

5.2. 功能验证

6. lib/pages/wear_what/wear_what_page.dart

这是一个Flutter的推荐页面组件,这是一个穿搭推荐页面,包含个性化推荐功能。这个页面主要为用户提供个性化的穿搭推荐,特别关注特殊人群(运动爱好者、孕妇)的需求。

6.1. 主要功能

  • 搜索框: 灰色背景的圆形搜索框,提示文本"想要穿什么,在这里搜索"
  • 运动达人 - 适合运动场合的穿搭推荐
  • 孕妇套装 - 针对孕妇的特殊穿搭需求

6.2. 功能验证

7. lib/pages/mine/mine_page.dart

这是用户个人中心页面,展示用户信息和提供个性化功能入口,提供了完整的个人信息展示和个人数据管理功能。

7.1. 主要功能

  • 我的收藏 → MyCollectionPage
  • 浏览历史 → MyHistoryPage
  • 我的发布 → MyPublishPage
  • 设置 → SettingsPage
  • 帮助与反馈 → FeedbackPage

7.2. 功能验证

相关推荐
冬奇Lab14 分钟前
一天一个开源项目(第54篇):Supabase - 开源的 Postgres 开发平台,Firebase 替代方案
后端·开源·资讯
牛马1112 小时前
Flutter CustomPainter
flutter
蜡台2 小时前
Flutter 安装配置
android·java·flutter·环境变量
加农炮手Jinx2 小时前
Flutter 组件 ubuntu_service 适配鸿蒙 HarmonyOS 实战:底层系统服务治理,构建鸿蒙 Linux 子系统与守护进程交互架构
flutter·harmonyos·鸿蒙·openharmony·ubuntu_service
里欧跑得慢2 小时前
Flutter 三方库 mobx_codegen — 自动化驱动的高性能响应式状态管理(适配鸿蒙 HarmonyOS Next ohos)
flutter·自动化·harmonyos
王码码20353 小时前
Flutter 三方库 login_client 的鸿蒙化适配指南 - 打造工业级安全登录、OAuth2 自动化鉴权、鸿蒙级身份守门员
flutter·harmonyos·鸿蒙·openharmony·login_client
加农炮手Jinx3 小时前
Flutter 三方库 cloudflare 鸿蒙云边协同分发流适配精讲:直连全球高速存储网关阵列无缝吞吐海量动静态画像资源,构筑大吞吐业务级网络负载安全分流-适配鸿蒙 HarmonyOS ohos
网络·flutter·harmonyos
IvorySQL4 小时前
PostgreSQL 技术日报 (3月18日)|从 MD5 到 SCRAM:PG 的安全转变
数据库·postgresql·开源
m0_694845575 小时前
Oh My Zsh 使用指南:Zsh 终端配置与插件管理教程
服务器·前端·小程序·开源·github
非凡ghost6 小时前
Zen Browser:基于 Firefox 的极简开源浏览器,隐私与速度兼得
前端·网络·windows·学习·开源·firefox·软件需求