快速入门HarmonyOS应用开发（三）

快速入门HarmonyOS应用开发（三） - 教程

news/2025/9/25 14:54:03/文章来源:https://www.cnblogs.com/yfceshi/p/19111200

前言

1、应用沉浸式

2、主页框架搭建

3、实现效果

前言

本系列案例完整代码已上传GitHub：HarmonyDemos

------觉得还行的麻烦动动发财的小手点个小星星啦^_^

今天咱们接着上一篇中的功能来继续实现案例Demo，做完闪屏页之后肯定是要到主页了，那今天咱们就来搭建一下APP的主页框架，实现底部的Tab和对应页面的切换，话不多说，开干！

1、应用沉浸式

首先来给咱们的应用实现沉浸式效果，参考官网中的实现方式：

开发应用沉浸式效果

我们选择的方案是窗口全屏布局方案，整体上分为以下几个步骤：

①、调用setWindowLayoutFullScreen()接口设置窗口全屏

②、使用getWindowAvoidArea()接口获取当前布局遮挡区域

③、注册监听函数，动态获取避让区域的实时数据

④、布局中的UI元素需要避让状态栏和导航区域

实现代码：在EntryAbility的onWindowStageCreate()的loadContent()回调中添加代码

// 使用同步方式获取应用主窗口
let windowClass: window.Window = windowStage.getMainWindowSync()
// 设置状态栏字体颜色
windowClass.setWindowSystemBarProperties({
statusBarContentColor: '#FFFFFF'
})
// 设置窗口全屏
windowClass.setWindowLayoutFullScreen(true)
// 获取布局避让遮挡的区域
let topType = window.AvoidAreaType.TYPE_SYSTEM
let topArea = windowClass.getWindowAvoidArea(topType)
let topRectHeight = topArea.topRect.height
AppStorage.setOrCreate('topRectHeight', topRectHeight)
let bottomType = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
let bottomArea = windowClass.getWindowAvoidArea(bottomType)
let bottomRectHeight = bottomArea.bottomRect.height
AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight)
// 注册监听函数，动态获取避让区域的实时数据
windowClass.on('avoidAreaChange', (data) => {
if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
let topRectHeight = data.area.topRect.height
AppStorage.setOrCreate('topRectHeight', topRectHeight)
} else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
let bottomRectHeight = data.area.bottomRect.height
AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight)
}
})

关于第4步需要在实际的页面中设置布局的底部Padding：

NavDestination() {
}.hideTitleBar(true)
.padding({bottom:DisplayUtil.getBottomRectHeight(this.getUIContext())})

这里用到了一个工具方法，其实就是对之前存储的数据进行获取之后封装的一个方法，代码如下：

export class DisplayUtil {
static getTopRectHeight(context: UIContext): number {
return context.px2vp(AppStorage.get('topRectHeight') as number)
}
static getBottomRectHeight(context: UIContext): number {
return context.px2vp(AppStorage.get('bottomRectHeight') as number)
}
}

从上面的代码中可以看到咱们有使用AppStorage进行存储和获取数据，关于AppStorage的使用，大家可以参考：

AppStorage：应用全局的UI状态存储

它是HarmonyOS中提供的用于全局内存缓存的机制，与应用进程绑定，需要注意的是它并不是持久化的存储，是内存缓存。

2、主页框架搭建

想要实现底部Tab之间的切换效果，我们需要使用到一个新的系统提供的组件Tabs组件，参考：

选项卡 (Tabs)

打开MainPage页面，我们需要的整体结构是上下结构，上面是每个Tab的页面，下面是Tab按钮。

首先，我们来自定义底部的Tab按钮，这里放置5个按钮，先来定义每个按钮的样式：

@State currentTabIndex: number = CommonConstant.TAB_INDEX
@Builder
TabItem(tabInfo: TabInfo) {
Column() {
Image(this.currentTabIndex === tabInfo.index ? tabInfo.selectImg : tabInfo.img)
.objectFit(ImageFit.Contain)
.width($r('app.float.vp_24'))
.height($r('app.float.vp_24'))
.margin({ bottom: $r('app.float.vp_5') })
Text(tabInfo.title)
.width(CommonConstant.FULL_PERCENT)
.height($r('app.float.vp_16'))
.fontSize($r('app.float.fp_12'))
.textAlign(TextAlign.Center)
.fontColor(this.currentTabIndex === tabInfo.index ? $r("app.color.color_primary") :
$r('app.color.color_unselect'))
}
.width(CommonConstant.FULL_PERCENT)
.height(CommonConstant.FULL_PERCENT)
.justifyContent(FlexAlign.Center)
.width(CommonConstant.PERCENT_20)
.onClick(() => {
this.currentTabIndex = tabInfo.index
})
}

这里我们用到了@Builder这个装饰器，它是自定义的构建函数，关于它的使用，大家可以参考：

@Builder装饰器：自定义构建函数

在点击这个按钮的时候，通过对上面定义的currentTabIndex变量值的改变来切换不同的下标。

接着，通过循环来实现5个Tab按钮的创建：

@Builder
BottomTabView() {
Column() {
Divider().width(CommonConstant.FULL_PERCENT).color(Color.Black)
.opacity(CommonConstant.OPACITY_01).strokeWidth(CommonConstant.WEIGHT_1)
Row() {
ForEach(tabInfos, (button: TabInfo) => {
this.TabItem(button)
})
}
.width(CommonConstant.FULL_PERCENT)
.height($r('app.float.vp_50'))
.alignItems(VerticalAlign.Center)
.backgroundColor(Color.White)
}.width(CommonConstant.FULL_PERCENT)
}

这里我们使用了ForEach来进行循环渲染，关于ForEach的详细使用，大家可以参考：

ForEach：循环渲染

这里ForEach的第一个参数是我们提前准备好的Tabs的数据，我们把它放在了src/main/ets/model下面：

export class TabInfo {
index: number = 0
img: Resource = $r('app.media.tab_index')
selectImg: Resource = $r('app.media.tab_indexed')
title: Resource = $r('app.string.tab_index')
}
const tabInfos: TabInfo[] = [
{
index: 0,
img: $r('app.media.tab_index'),
selectImg: $r('app.media.tab_indexed'),
title: $r('app.string.tab_index')
},
{
index: 1,
img: $r('app.media.tab_financial'),
selectImg: $r('app.media.tab_financialed'),
title: $r('app.string.tab_financial')
},
{
index: 2,
img: $r('app.media.tab_video'),
selectImg: $r('app.media.tab_videoed'),
title: $r('app.string.tab_video')
},
{
index: 3,
img: $r('app.media.tab_message'),
selectImg: $r('app.media.tab_messaged'),
title: $r('app.string.tab_msg')
},
{
index: 4,
img: $r('app.media.tab_mine'),
selectImg: $r('app.media.tab_mined'),
title: $r('app.string.tab_mine')
}
]
export { tabInfos }

做完上面这些之后，我们就可以来实现整个页面的结构了，在MainPage的NavDestination中通过Column组件来完成上下结构的布局，上面使用Tabs组件，下面使用自定义的BottomTabView()：

build() {
NavDestination() {
Column() {
Tabs({ index: this.currentTabIndex }) {
TabContent() {
HomePage()
}
TabContent() {
FinancialPage()
}
TabContent() {
VideoPage()
}
TabContent() {
MessagePage()
}
TabContent() {
MinePage()
}
}
.barHeight(CommonConstant.TAB_BAR_HEIGHT)
.scrollable(false)
.layoutWeight(CommonConstant.WEIGHT_1)
.onChange((index) => {
this.currentTabIndex = index
})
this.BottomTabView()
}
}.hideTitleBar(true)
.padding({bottom:DisplayUtil.getBottomRectHeight(this.getUIContext())})
}

可以看到我们一共创建了5个TabContent()，每个里面就是对应Tab承载的内容区域了，简单理解可以称它为页面，实际上它们都是自定义组件，比如，这里第一个TabContent()里面我们创建了HomePage()组件，依此类推我们又创建了余下的四个页面。

下面来看一下HomePage()里面都有些什么吧？由于目前我们只是为了实现页面的整体结构，所以这里咱们就简单放置了一个文本进行展示，代码如下：

@Component
export struct HomePage {
build() {
Column() {
StatusBarComponent()
Column() {
Text($r('app.string.tab_index'))
.fontSize($r('app.float.fp_20'))
.fontColor($r('app.color.color_primary'))
.fontWeight(FontWeight.Bold)
}.layoutWeight(CommonConstant.WEIGHT_1)
.justifyContent(FlexAlign.Center)
}
.width(CommonConstant.FULL_PERCENT)
.height(CommonConstant.FULL_PERCENT)
}
}

细心的大家会发现这不是还有一个StatusBarComponent()吗？它是我们自定义的一个状态栏横条，里面也很简单，只有一个跟顶部状态栏高度一致的View，代码如下：

@Component
export struct StatusBarComponent {
build() {
Blank().height(DisplayUtil.getTopRectHeight(this.getUIContext())).backgroundColor($r('app.color.color_primary'))
}
}

通过上面的步骤我们已经完成了首页整体结构的搭建。