鸿蒙实战案例-欢迎页面UI实现及首页Tabs
发布时间
阅读量：
阅读量
前言
欢迎来到我的鸿蒙移动开发项目！我将致力于使用鸿蒙操作系统打造出色的移动应用。让我们一起开启创新的旅程！现在我们将做一个关于健康的软件，本次带来的是首页Tabs！
一、设计与布局
界面设计
这是我们这次要做的首页UI设计，这次我们用到了Tabs组件，Tabs组件可以实现页面内视图内容快速切换，包含TabBar和TabContent两个部分。
本次我们做首页的一个布局
这个是我们首页的一个布局效果：
二、步骤
1.第一步，我们首先找到index页面，将其进行进一步开发
2.找到页面后我们开始敲击代码，最终展示为：
三、相关代码
import { CommonConstants } from '../common/constants/CommonConstants'
import RecordIndex from '../view/record/RecordIndex'
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
Column({space:CommonConstants.SPACE_8}){
Image(image)
.width(25)
Text(title)
.fontSize(14)
}
}
build() {
Tabs({barPosition:BarPosition.End}) {
TabContent(){
RecordIndex()
}
.tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))
TabContent(){
Text('发现页面')
}
.tabBar(this.TabBarBuilder($r('app.string.tab_discover'),$r('app.media.discover'),1))
TabContent(){
Text('我的主页')
}
.tabBar(this.TabBarBuilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))
}
.width('100%')
.height('100%')
}
}
TypeScript
总结
这次我们创建了一个包含三个选项卡的界面。每个选项卡中都有一个标签栏，分别显示了"记录"、"发现页面"和"我的主页"的内容。整体上，这段代码实现了一个具有选项卡功能的界面，其中包含三个不同的页面。
全部评论 (0)
还没有任何评论哟~