使用Tabs选项卡组件快速搭建鸿蒙APP框架

神官吉格

510人浏览 · 2025-12-17 20:20:18

神官吉格 · 2025-12-17 20:20:18 发布

kUI提供了很多布局组件，其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架，本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。

一、效果展示

1、效果展示

整个APP外层Tabs包含4个选项卡：首页、发现、消息、我的。在首页中，上滑列表会出现吸顶效果，分类可以左右滑动，当滑到最后一个分类时，与外层Tabs联动，滑到“发现”页面。首页中的分类标签可以用户自定义选择显示。

2、技术分析

主要使用Tabs选项卡搭建整个APP的框架，通过设置Tabs相关的属性和方法实现布局、滚动、吸顶、内外层嵌套联动等功能。

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

本例中通过嵌套Tabs实现，外层Tabs为底部导航、内层Tabs为顶部导航。

二、功能实现

1、准备工作

1.1 数据准备

在商业项目中，界面显示的数据是通过网络请求后端接口获得，本例重点放在Tabs组件的用法研究上，因此简化数据获取过程，直接将数据写入到json文件中。

将准备好的界面数据文件（tab标签和数据列表）拷贝到resources/rawfile目录下包含4个文件：default_all_tabs.json、default_all_tabs_en.json、default_content_items.json、default_content_items_en.json。

1.2 本地化

将界面文字

zh_CN/element：integer.json、string.json

en_US/element：integer.json、string.json

base/element：integer.json、string.json、color.json

1.3 素材

base/media：图片素材

1.4 通用类

ets目录新建common目录，新建constat目录用于存放常量，新建utils目录用于存放工具类。

constant目录下新建Constants.ets文件，记录用到的常量。

export class Constants {

/**

* Full screen width.

static readonly FULL_WIDTH: string = '100%';

/**

* Full screen height.

static readonly FULL_HEIGHT: string = '100%';

}

utils目录下新建StringUtil.ets文件，用于处理从文件中读取的数据。

import { util } from "@kit.ArkTS";

import { BusinessError } from "@kit.BasicServicesKit";

import { hilog } from "@kit.PerformanceAnalysisKit";

export default class StringUtil {

static async getStringFromRawFile(ctx: Context, source: string) {

try {

let getJson = await ctx.resourceManager.getRawFileContent(source);

let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true });

let result = textDecoder.decodeToString(getJson);

return Promise.resolve(result);

} catch (error) {

let code = (error as BusinessError).code;

let message = (error as BusinessError).message;

hilog.error(0x0000, 'StringUtil', 'getStringSync failed,error code: %{code}s,message: %{message}s.', code,

message);

return Promise.reject(error);

}

2、整体框架

整体布局分为2部分，顶部搜索栏和其下的嵌套Tabs页面。为了提升可维护性，采用组件化编程思想。

2.1 搜索组件

在ets目录下新建view目录用于存放组件，新建搜索组件SearchBarComponent.ets

import { Constants } from "../common/constant/Constants";

@Component

export default struct SearchBarComponent {

@State changeValue: string = '';

build() {

Row() {

// 1、传统方法

// Stack() {

// TextInput({ placeholder: $r('app.string.search_placeholder') })

// .height(40)

// .width(Constants.FULL_WIDTH)

// .fontSize(16)

// .placeholderColor(Color.Grey)

// .placeholderFont({ size: 16, weight: FontWeight.Normal })

// .borderStyle(BorderStyle.Solid)

// .backgroundColor($r('app.color.search_bar_input_color'))

// .padding({ left: 35, right: 66 })

// .onChange((currentContent) => {

// this.changeValue = currentContent;

// })

// Row() {

// Image($r('app.media.ic_search')).width(20).height(20)

// Button($r('app.string.search'))

// .padding({ left: 20, right: 20 })

// .height(36)

// .fontColor($r('app.color.search_bar_button_color'))

// .fontSize(16)

// .backgroundColor($r('app.color.search_bar_input_color'))

// }.width(Constants.FULL_WIDTH)

// .hitTestBehavior(HitTestMode.None)

// .justifyContent(FlexAlign.SpaceBetween)

// .padding({ left: 10, right: 2 })

// }.alignContent(Alignment.Start)

// .width(Constants.FULL_WIDTH)

// 2、搜索组件

Search({placeholder:$r('app.string.search_placeholder')})

.searchButton('搜索')

}

.justifyContent(FlexAlign.SpaceBetween)

.padding(10)

.width(Constants.FULL_WIDTH)

.backgroundColor($r('app.color.out_tab_bar_background_color'))

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

}

在主界面引入，即可查看效果。修改Index.ets

import { Constants } from '../common/constant/Constants';

import SearchBarComponent from '../view/SearchBarComponent';

@Entry

@Component

struct Index {

build() {

Column() {

// 搜索栏

SearchBarComponent()

}

.height(Constants.FULL_HEIGHT)

.width(Constants.FULL_WIDTH)

.expandSafeArea([SafeAreaType.SYSTEM])

}

2.2 外层Tabs

通过界面分析，外层Tabs的每一个TabContent内容不同，可以抽取为组件。第一个TabContent抽取为组件InTabsComponent，后边的几个抽取为OtherTabContentComponent。

在view目录下新建组件：InTabsComponent.ets

@Component

export default struct InTabsComponent {

build() {

Text('内层Tabs')

}

在InTabsComponent中，先简单写点提示信息，待整体框架完成后，后续再继续完成内层的内容。

在view目录下新建组件：OtherTabComponent.ets

import { Constants } from "../common/constant/Constants";

@Component

export default struct OtherTabContentComponent {

@State bgColor: ResourceColor = $r('app.color.other_tab_content_default_color');

build() {

Column()

.width(Constants.FULL_WIDTH)

.height(Constants.FULL_HEIGHT)

.backgroundColor(this.bgColor)

}

在OtherTabComponent中，通过接收父组件传递的颜色参数来设置背景颜色，用以区分不同的Tab。

在view目录下，新建外层组件OutTabsComponent.ets

import { Constants } from "../common/constant/Constants";

import InTabsComponent from "./InTabsComponent";

import OtherTabContentComponent from "./OtherTabComponent";

@Component

export default struct OutTabsComponent {

@State currentIndex: number = 0;

private tabsController: TabsController = new TabsController();

@Builder

tabBuilder(index: number, name: string | Resource, icon: Resource) {

Column() {

SymbolGlyph(icon).fontColor([this.currentIndex === index

? $r('app.color.out_tab_bar_font_active_color')

: $r('app.color.out_tab_bar_font_inactive_color')])

.fontSize(25)

Text(name)

.margin({ top: 4 })

.fontSize(10)

.fontColor(this.currentIndex === index

? $r('app.color.out_tab_bar_font_active_color')

: $r('app.color.out_tab_bar_font_inactive_color'))

}

.justifyContent(FlexAlign.Center)

.height(Constants.FULL_HEIGHT)

.width(Constants.FULL_WIDTH)

.padding({ bottom: 60 })

}

build() {

Tabs({

barPosition: BarPosition.End,

index: this.currentIndex,

controller: this.tabsController,

}) {

TabContent() {

InTabsComponent()

}.tabBar(this.tabBuilder(0, $r('app.string.out_bar_text_home'), $r('sys.symbol.house')))

TabContent() {

OtherTabContentComponent({ bgColor: Color.Blue })

}

.tabBar(this.tabBuilder(1, $r('app.string.out_bar_text_discover'), $r('sys.symbol.map_badge_local')))

TabContent() {

OtherTabContentComponent({ bgColor: Color.Yellow })

}

.tabBar(this.tabBuilder(2, $r('app.string.out_bar_text_messages'), $r('sys.symbol.ellipsis_message')))

TabContent() {

OtherTabContentComponent({ bgColor: Color.Orange })

}

.tabBar(this.tabBuilder(3, $r('app.string.out_bar_text_profile'), $r('sys.symbol.person')))

}

.vertical(false)

.barMode(BarMode.Fixed)

.scrollable(true) // false to disable scroll to switch

// .edgeEffect(EdgeEffect.None) // disables edge springback

.onChange((index: number) => {

this.currentIndex = index;

})

.height(Constants.FULL_HEIGHT)

.width(Constants.FULL_WIDTH)

.backgroundColor($r('app.color.out_tab_bar_background_color'))

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])

.barHeight(120)

.barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK)

.barOverlap(true)

}

在主界面中引入外层Tabs组件OutTabsComponent，修改主界面Index.ets

import OutTabsComponent from '../view/OutTabsComponent';

...

// 外层tabs

OutTabsComponent()

这样就实现了整体布局。

3、内层组件

分析内层组件布局结构，顶部是一张Banner图片，下边是一个Tabs组件。整个内层组件可以上下滚动，并且上滑要产生吸顶效果，因此外层组件应该使用Scroll滚动组件作为顶层父容器，里边滚动的内容使用List组件即可，List里边的内容也需要封装成组件。

3.1 Banner组件

接下来先封装顶部的Banner图片组件，在view目录下新建BannerComponent组件，BannerComponent.ets

import { Constants } from "../common/constant/Constants";

@Component

export default struct BannerComponent {

build() {

Column() {

Image($r('app.media.pic5'))

.width(Constants.FULL_WIDTH)

.height(186)

.borderRadius(16)

}

.margin({

left: 5,

right: 5,

top: 10,

bottom: 2

})

}

3.2 列表项组件

接下来封装列表项组件ContentItemComponent，

封装数据类ContentItemModel，在ets目录下新建model目录，新建ContentItemModel.ets

export default class ContentItemModel {

username: string | Resource = '';

publishTime: string | Resource = '';

rawTitle: string | Resource = '';

title: string | Resource = '';

imgUrl1: string | Resource = '';

imgUrl2: string | Resource = '';

imgUrl3: string | Resource = '';

imgUrl4: string | Resource = '';

}

封装数据类ContentItemViewModel，在ets目录下新建viewmodel目录，新建ContentItemViewModel.ets文件

import ContentItemModel from "../model/ContentItemModel";

@Observed

export default class ContentItemViewModel {

username: string | Resource = '';

publishTime: string | Resource = '';

rawTitle: string | Resource = '';

title: string | Resource = '';

imgUrl1: string | Resource = '';

imgUrl2: string | Resource = '';

imgUrl3: string | Resource = '';

imgUrl4: string | Resource = '';

updateContentItem(contentItemModel: ContentItemModel) {

this.username = contentItemModel.username;

this.publishTime = contentItemModel.publishTime;

this.rawTitle = contentItemModel.rawTitle;

this.title = contentItemModel.title;

this.imgUrl1 = contentItemModel.imgUrl1;

this.imgUrl2 = contentItemModel.imgUrl2;

this.imgUrl3 = contentItemModel.imgUrl3;

this.imgUrl4 = contentItemModel.imgUrl4;

}

在view目录新建ContentItemComponent.ets

import { Constants } from "../common/constant/Constants";

import ContentItemViewModel from "../viewmodel/ContentItemViewModel";

@Component

export default struct ContentItemComponent {

@Prop contentItemViewModel: ContentItemViewModel;

build() {

Column() {

Row() {

Image(this.contentItemViewModel.imgUrl1)

.width(30)

.height(30)

.borderRadius(15)

Column() {

Text(this.contentItemViewModel.username)

.fontSize(15)

Text(this.contentItemViewModel.publishTime)

.fontSize(12)

.fontColor($r('app.color.content_item_text_color'))

}

.margin({ left: 10 })

.justifyContent(FlexAlign.Start)

.alignItems(HorizontalAlign.Start)

}

Column() {

Text(this.contentItemViewModel.title)

.fontSize(16)

.id('title')

.textAlign(TextAlign.Start)

}

.margin({top:10, bottom: 10})

Row() {

Image(this.contentItemViewModel.imgUrl2)

.width(115)

.height(115)

Image(this.contentItemViewModel.imgUrl3)

.width(115)

.height(115)

Image(this.contentItemViewModel.imgUrl4)

.width(115)

.height(115)

}

.width(Constants.FULL_WIDTH)

.justifyContent(FlexAlign.SpaceBetween)

}

.width(Constants.FULL_WIDTH)

.alignItems(HorizontalAlign.Start)

}

3.3 列表数据封装

在制作列表项组件时封装了每一项数据对应的类ContentItemModel，还需要封装一个类用于表示整个Tabs界面的数据。

在model目录下新建InTabsModel.ets

import { BusinessError } from '@kit.BasicServicesKit';

import { hilog } from '@kit.PerformanceAnalysisKit';

import ContentItemModel from './ContentItemModel';

import StringUtil from '../common/utils/StringUtil';

export default class InTabsModel {

contentItems: ContentItemModel[] = [];

async loadContentItems(ctx: Context) {

let filename = '';

try {

filename = await ctx.resourceManager.getStringValue($r('app.string.default_content_items_file').id);

} catch (error) {

let err = error as BusinessError;

hilog.error(0x0000, 'InTabsModel', `getStringValue failed, error code=${err.code}, message=${err.message}`);

}

let res = await StringUtil.getStringFromRawFile(ctx, filename);

this.contentItems = JSON.parse(res).map((item: ContentItemModel) => {

let img1 = item.imgUrl1 as string;

if (img1.indexOf('app.media') === 0) {

item.imgUrl1 = $r(img1);

}

let img2 = item.imgUrl2 as string;

if (img2.indexOf('app.media') === 0) {

item.imgUrl2 = $r(img2);

}

let img3 = item.imgUrl3 as string;

if (img3.indexOf('app.media') === 0) {

item.imgUrl3 = $r(img3);

}

let img4 = item.imgUrl4 as string;

if (img4.indexOf('app.media') === 0) {

item.imgUrl4 = $r(img4);

}

return item;

});

}

该类主要实现从本地文件中读取列表数据。

在viewmodel目录下新建文件InTabsViewModel.ets

import ContentItemViewModel from "./ContentItemViewModel";

import InTabsModel from "../model/InTabsModel";

@Observed

class ContentItemArray extends Array<ContentItemViewModel> {

}

@Observed

export default class InTabsViewModel {

private inTabsModel: InTabsModel = new InTabsModel();

contentItems: ContentItemArray = new ContentItemArray();

async loadContentData(ctx: Context) {

await this.inTabsModel.loadContentItems(ctx);

let tempItems: ContentItemArray = [];

for (let item of this.inTabsModel.contentItems) {

let contentItemViewModel = new ContentItemViewModel();

contentItemViewModel.updateContentItem(item);

tempItems.push(contentItemViewModel);

}

this.contentItems = tempItems;

}

3.4 Tab类封装

将每一个Tab抽象为TabItemModel类，以便于记录当前选中的选项卡。

在model目录下新建TabItemModel.ets

export default class TabItemModel {

id: number = 0;

name: string | Resource = '';

isChecked: boolean = true;

}

在viewmodel目录下新建TabItemViewModel.ets

import TabItemModel from "../model/TabItemModel";

@Observed

export default class TabItemViewModel {

id: number = 0;

name: string | Resource = '';

isChecked: boolean = true;

updateTab(tabItemModel: TabItemModel) {

this.id = tabItemModel.id;

this.name = tabItemModel.name;

this.isChecked = tabItemModel.isChecked;

}

3.5 标签分类封装

内层Tabs的标签TarBar也是直接从文件读取，内层标签初始加载时直接读取文件内容进行显示，后续还需要添加分类的选择和取消功能，实现自定义显示分类。

本小节先封装相关类，在model目录下新建SelectTabsModel类，用于存取文件中的标签分类，SelectTabsModel.ets

import { BusinessError } from '@kit.BasicServicesKit';

import { hilog } from '@kit.PerformanceAnalysisKit';

import TabItemModel from './TabItemModel';

import StringUtil from '../common/utils/StringUtil';

export default class SelectTabsModel {

allTabs: TabItemModel[] = [];

async loadAllTabs(ctx: Context) {

let filename = '';

try {

filename = await ctx.resourceManager.getStringValue($r('app.string.default_all_tabs_file').id);

} catch (error) {

let err = error as BusinessError;

hilog.error(0x0000, 'SelectTabsModel', `getStringValue failed, error code=${err.code}, message=${err.message}`);

}

let result = await StringUtil.getStringFromRawFile(ctx, filename);

this.allTabs = JSON.parse(result);

}

在viewmodel目录下新建SelectTabsViewModel.ets

import TabItemViewModel from "./TabItemViewModel";

import SelectTabsModel from "../model/SelectTabsModel";

@Observed

class TabItemArray extends Array<TabItemViewModel> {

}

@Observed

export default class SelectTabsViewModel {

allTabs: TabItemArray = new TabItemArray();

selectedTabs: TabItemArray = new TabItemArray();

private selectTabsModel: SelectTabsModel = new SelectTabsModel();

async loadTabs(ctx: Context) {

await this.selectTabsModel.loadAllTabs(ctx);

let tempTabs: TabItemViewModel[] = [];

for (let tab of this.selectTabsModel.allTabs) {

let tabItemViewModel = new TabItemViewModel();

tabItemViewModel.updateTab(tab);

tempTabs.push(tabItemViewModel);

}

this.allTabs = tempTabs;

this.updateSelectedTabs();

}

updateSelectedTabs() {

let tempTabs: TabItemViewModel[] = [];

for (let tab of this.allTabs) {

if (tab.isChecked) {

tempTabs.push(tab);

}

this.selectedTabs = tempTabs;

}

3.6 内层组件

修改InTabsComponent.ets

import { Constants } from "../common/constant/Constants";

import BannerComponent from "./BannerComponent";

import { CommonModifier } from "@kit.ArkUI";

import ContentItemComponent from "./ContentItemComponent";

import ContentItemViewModel from "../viewmodel/ContentItemViewModel";

import TabItemViewModel from "../viewmodel/TabItemViewModel";

import InTabsViewModel from "../viewmodel/InTabsViewModel";

import { EnvironmentCallback, Configuration, AbilityConstant } from "@kit.AbilityKit";

import SelectTabsViewModel from "../viewmodel/SelectTabsViewModel";

@Component

export default struct InTabsComponent {

@State selectTabsViewModel: SelectTabsViewModel = new SelectTabsViewModel();

@State inTabsViewModel: InTabsViewModel = new InTabsViewModel();

@State tabBarModifier: CommonModifier = new CommonModifier();

@State focusIndex: number = 0;

@State showSelectTabsComponent: boolean = false;

@State selectTabsComponentZIndex: number = -1;

private ctx: Context = this.getUIContext().getHostContext() as Context;

private subsController: TabsController = new TabsController();

private tabBarItemScroller: Scroller = new Scroller();

subscribeSystemLanguageUpdate() {

let systemLanguage: string | undefined;

let inTabsViewModel = this.inTabsViewModel;

let selectTabsViewModel = this.selectTabsViewModel;

let applicationContext = this.ctx.getApplicationContext();

let environmentCallback: EnvironmentCallback = {

async onConfigurationUpdated(newConfig: Configuration) {

if (systemLanguage !== newConfig.language) {

await inTabsViewModel.loadContentData(applicationContext);

await selectTabsViewModel.loadTabs(applicationContext);

systemLanguage = newConfig.language;

}

onMemoryLevel: (level: AbilityConstant.MemoryLevel): void => {

// do nothing

}

};

applicationContext.on('environment', environmentCallback);

}

async aboutToAppear() {

await this.inTabsViewModel.loadContentData(this.ctx);

await this.selectTabsViewModel.loadTabs(this.ctx);

this.tabBarModifier.margin({ right: 56 }).align(Alignment.Start);

this.subscribeSystemLanguageUpdate();

}

@Builder

tabBuilder(index: number, tab: TabItemViewModel) {

Row() {

Text(tab.name)

.fontSize(14)

.fontWeight(this.focusIndex === index ? FontWeight.Medium : FontWeight.Regular)

.fontColor(this.focusIndex === index ? Color.White : $r('app.color.in_tab_bar_text_normal_color'))

}

.justifyContent(FlexAlign.Center)

.backgroundColor(this.focusIndex === index

? $r('app.color.in_tab_bar_background_active_color')

: $r('app.color.in_tab_bar_background_inactive_color'))

.borderRadius(20)

.height(40)

.margin({ left: 4, right: 4 })

.padding({ left: 18, right: 18 })

.onClick(() => {

this.focusIndex = index;

this.subsController.changeIndex(index);

this.tabBarItemScroller.scrollToIndex(index, true, ScrollAlign.CENTER);

})

}

build() {

Scroll() {

Column() {

BannerComponent()

Stack({ alignContent: Alignment.TopEnd }) {

Row() {

Image($r('app.media.more'))

.width(20)

.height(20)

.margin({ left: 10 })

.onClick(() => {

// todo:弹层选择分类

})

}

.margin({ top: 8, bottom: 8, right: 5 })

.backgroundColor($r('app.color.in_tab_bar_background_inactive_color'))

.width(40)

.height(40)

.borderRadius(20)

.zIndex(1)

Column() {

Tabs({

barPosition: BarPosition.Start,

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

【开发者故事】这款小众穿戴应用，凭什么让7成用户天天打开？

HarmonyOS开发者社区

鸿蒙系统实况窗功能详解与开发适配指南

实况窗是 HarmonyOS 提供的一种帮助用户聚焦正在进行的任务、方便快速查看和即时处理的通知形态。它支持应用将订单或服务的实时状态信息变化在设备的关键界面展示，并对展示信息的生命周期、用户界面 UI 效果等进行管理。实况窗具有时段性时效性变化性时段性：事件或服务需要持续一段时间，有明确的开始和结束，而非单点的提醒或信息。例如打车、外卖等从事件开始到结束需要经历一段时间，属于实况窗；天气提示、待