鸿蒙实战案例-欢迎页面UI实现及首页Tabs

最新推荐文章于 2025-08-09 10:00:35 发布
原创 最新推荐文章于 2025-08-09 10:00:35 发布 · 973 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #开发语言

前言

       欢迎来到我的鸿蒙移动开发项目！我将致力于使用鸿蒙操作系统打造出色的移动应用。让我们一起开启创新的旅程！现在我们将做一个关于健康的软件，本次带来的是首页Tabs！

一、设计与布局

界面设计

        这是我们这次要做的首页UI设计，这次我们用到了Tabs组件，Tabs组件可以实现页面内视图内容快速切换，包含TabBar和TabContent两个部分。

        本次我们做首页的一个布局

这个是我们首页的一个布局效果：

二、步骤

1.第一步，我们首先找到index页面，将其进行进一步开发

2.找到页面后我们开始敲击代码，最终展示为：

最低0.47元/天 解锁文章
南宫问路
关注
鸿蒙实战案例——欢迎页面UI实现及欢迎页面业务的实现（一）
m0_73764510的博客
06-22 1708
Entry@Component})})//1.加载首选项//2.判断是否同意//2.1. 同意，跳转首页}else{//2.2.不同意，弹窗})},1000)//1.保存首选项//2.跳转到首页exitApp(){//退出Appbuild() {//1.中央sloganRow(){//2.logo//3.文字描述Row(){Text('黑马健康支持').opacityWhiteText(0.8,12)
华为鸿蒙应用--欢迎页SplashPage+倒计时跳过（自适应手机和平板）-ArkTs
qq_41374940的博客
12-17 3494
Button(this.countdownTime + "秒 跳过", { type: ButtonType.Capsule, stateEffect: true })lg: $r('app.float.splash_image_size_lg') // 手机和平板使用不同的图片宽度。Image(this.splash[this.getRandom(0, 2)]) // 每次进入随机展示一张欢迎图片。lg: $r('app.float.vp_fifty') // 手机和平板不同的margin。
鸿蒙实战案例-欢迎页面UI实现及欢迎页面业务
lpq2001124的博客
06-14 1615
声明弹窗控制器，并利用其控制弹窗代码定义了一个名为的组件，用于显示欢迎页面。在这个页面中，首先会检查用户是否同意了隐私政策，如果同意则跳转到首页，否则弹出隐私政策对话框。用户可以选择同意或退出应用。当用户点击同意按钮时，会调用confirm()方法，关闭对话框，进入首页；当用户点击拒绝按钮时，会调用cancel()方法，关闭对话框，退出应用。
鸿蒙项目-欢迎页面和项目首页day-2
w2825913520的博客
06-25 474
它在组件即将出现时被回调，具体时机为在创建自定义组件的新实例后，在执行其build函数之前。该函数主要用于数据的初始化，以便在build函数中使用这些数据。两个text 完成页面的布局 要注意每个文本的padding和margin 以及容器的space 保证页面的美观。一个tabs下面三个子组建 分别是记录 发现 我的主页 在第一个组建内操作 实现第一个页面的内容。在展示这个页面之前 要弹出一个有关协议的对话框 确保用户遵循协议内容 规范行为。会使用对话框的组件之间的通信和交互。接下来完善首页页面内容。
鸿蒙实战案列-欢迎页面
NASSIRS的博客
06-23 1660
以上就是欢迎页面的内容，页面首先会弹窗来检测用户是否同意隐私协议，如果同意协议将会关闭弹窗并进入应用，同时保存结果，下次用户进入应用将不会再次弹窗。如果不同意隐私协议将会退出该应用。
鸿蒙实战案例-首页Tabs以及顶部搜索栏
NASSIRS的博客
06-24 625
Tabs组件是每个标签按钮对应一个页面或功能。当用户点击不同的标签按钮时，应用程序会切换显示相应的页面或模块。使用Tabs和TabContent组件则可以将标签按钮和标签联合起来，用户点击不同的标签页后，TabContent 会展示相应的内容。
鸿蒙实战案例-饮食记录-记录列表及食物列表页（四）
m0_73764510的博客
06-23 2038
在本篇文章中，我将介绍如何使用HarmonyOS框架构建一个简单的食物记录和食物列表页面。主要包括三个组件：食物记录列表、项目索引页面和项目列表页面。首先，我们定义了一个名为RecordList的组件，该组件在其build方法中负责构建整个列表。在这个方法中，我们利用List和ForEach组件来遍历一个包含数字1到5的数组，并为每个数字创建一个ListItem组件。1. **分组标题**：包含早餐建议、千卡数等信息。我们使用Image、Text和Blank组件来展示这些信息。
【鸿蒙实战开发】ArkUI-tabs组件开发指导
HarmonyOS007的博客
08-13 1167
tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。具体用法请参考tabs API。
鸿蒙实战案例——首页Tabs及饮食记录——顶部搜索栏（二）
m0_73764510的博客
06-22 2275
在 `RecordIndex` 结构体中，通过调用 `SearchHeader` 和其他组件来构建搜索功能、统计信息展示和记录列表。在代码中定义了多个结构体（`struct`），这些结构体类似于组件，每个结构体都包含一个 `build()` 方法来描述其呈现的内容和样式。`Index` 结构体作为入口点，展示了一个标签页（`Tabs`）布局，其中包含多个标签页（`TabContent`）。每个标签页由 `TabBarBuilder` 构建，根据当前索引显示不同的颜色和图标。
鸿蒙个人项目-欢迎页面UI及业务实现
m0_73743793的博客
06-25 641
在 UserPrivacyDialog 中使用了@CustomDialog 装饰器声明弹窗组件，通过controller 控制弹窗的出现，添加了Button 按钮，用来实现首页的跳转与退出。再此基础上，需要完成同意协议弹窗的实现。
鸿蒙实战案例-欢迎页面UI实现及饮食记录UI设计
woainiyuwen的博客
06-25 1885
1.CalorieStats.ets：这段代码实现了一个卡路里统计界面，展示了用户的饮食摄入、推荐摄入量、剩余可摄入量以及运动消耗等信息。通过这些数据，用户可以了解自己的卡路里摄入情况并做出相应的调整。2.DatePickDlalog.ets：这段代码实现了一个日期选择对话框，允许用户选择日期并保存选择的日期到全局存储中。通过这个对话框，用户可以方便地选择日期并进行相应的操作。
鸿蒙OS Stage模式开发 Swiper轮播图实现APP 欢迎/引导页面
weixin_43807186的博客
01-05 1311
【代码】鸿蒙OS Stage模式开发 Swiper轮播图实现APP 欢迎/引导页面。
期末项目实战：基于鸿蒙ArkTs语言的健康检测App欢迎页面开发
2301_78053665的博客
06-24 1740
运动健康APP通常为用户提供一系列功能，帮助他们更好地进行运动锻炼和健康管理。需要使用到的装饰器为@customDialog，声明一个controller的成员变量，它的类型一定要是CustomController（自定义弹窗控制器），它可以用来控制弹窗的状态我们需要在使用的时候对弹窗进行初始化我们将弹窗放在一个组件文件中进行编写，我们用到的所有的组件都可以放到view中，然后再view文件夹下我们可以分页面再新建文件夹，根据对应的页面将组件进行归类。
首页UI设计-----Tabs组件
m0_67855350的博客
06-11 798
用户可以使用@Builder定义自己的tabBar组件，通过传递参数来获取tabBar中的信息，但是此时无法区分选中的tabBar和未选中tabBar。
鸿蒙期末个人项目“黑马健康”——项目阶段一：欢迎页面
2301_79814091的博客
06-11 1153
黑马健康——期末个人项目
Bootstrap基础：打造三种独特的Tabs选项卡UI设计
最新发布
weixin_31961675的博客
08-09 859
Bootstrap是由Twitter推出的一个前端框架，旨在快速、简洁地开发响应式布局的网页。它的核心优势在于丰富的组件库和良好的兼容性。开发者可以利用Bootstrap，轻松实现响应式设计，缩短开发周期，快速构建出美观且功能完善的网站。层叠样式表（CSS）是Web设计的三驾马车之一，它负责网站或应用的外观和感觉。CSS对视觉效果的影响是深远的，因为它不仅决定了色彩、字体、间距、对齐等视觉元素，还影响着用户的交互体验和品牌的传达。
欢迎页面及业务实现
m0_74601109的博客
06-20 1586
根据上图中的页面我们可以知道该页面整体是一个column布局，其中添加了文本和图片组成了这一界面。
harmony OS NEXT-启动页开发
Yihong1833100198的博客
03-02 1062
Entry@Component//获取应用的上下文//获取页面的上下文@State})})${thisimport {
鸿蒙个人项目-欢迎页面业务、UI实现
oa66666667的博客
06-15 1088
随着鸿蒙系统的不断发展与普及，越来越多的开发者开始投入到鸿蒙应用的开发中。欢迎页面作为用户首次接触应用的界面，其业务逻辑与UI设计的合理性直接关系到用户的使用感受和后续的使用意愿。因此，将重点介绍鸿蒙个人项目欢迎页面的业务实现与UI设计。鸿蒙个人项目欢迎页面的业务实现与UI设计旨在为用户提供便捷、高效的服务体验。通过合理的业务逻辑设计和UI设计思路，确保用户能够快速了解应用并顺利进入应用主界面。未来，我们将继续关注用户需求和市场变化，不断优化和完善欢迎页面的功能和设计，为用户带来更好的使用体验。
HarmonyOS Tabs页签组件详解与实战应用
资源摘要信息:"在HarmonyOS应用开发中，Tabs页签组件是实现界面导航的核心工具之一，广泛应用于各类移动应用的前端设计中。本文深入剖析了Tabs组件的技术架构、使用方法、布局模式及其高级特性，并结合实际项目案例...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值