大家好,我是潘Sir,持续分享IT技术,帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!
ArkUI提供了很多布局组件,其中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();@BuildertabBuilder(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';...// 外层tabsOutTabsComponent()
这样就实现了整体布局。
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();}@BuildertabBuilder(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,controller: this.subsController,barModifier: this.tabBarModifier}) {ForEach(this.selectTabsViewModel.selectedTabs, (tab: TabItemViewModel, index: number) => {TabContent() {List({ space: 10 }) {ForEach(this.inTabsViewModel.contentItems, (item: ContentItemViewModel, index: number) => {ContentItemComponent({contentItemViewModel: item,})}, (item: ContentItemViewModel, index: number) => index + '_' + JSON.stringify(item))}.padding({ left: 5, right: 5, bottom: 120 }).width(Constants.FULL_WIDTH).height(Constants.FULL_HEIGHT).scrollBar(BarState.Off)}.tabBar(this.tabBuilder(index, tab))}, (tab: TabItemViewModel, index: number) => index + '_' + JSON.stringify(tab))}.barMode(BarMode.Scrollable).width(Constants.FULL_WIDTH).height(Constants.FULL_HEIGHT).barBackgroundColor($r('app.color.out_tab_bar_background_color')).scrollable(true).onChange((index: number) => {this.focusIndex = index;this.tabBarItemScroller.scrollToIndex(index, true, ScrollAlign.CENTER);let preloadItems: number[] = [];if (index - 1 >= 0) {preloadItems.push(index - 1);}if (index + 1 < this.selectTabsViewModel.selectedTabs.length) {preloadItems.push(index + 1);}this.subsController.preloadItems(preloadItems);})}.width(Constants.FULL_WIDTH).height(Constants.FULL_HEIGHT).backgroundColor($r('app.color.out_tab_bar_background_color'))}}}.scrollBar(BarState.Off).width(Constants.FULL_WIDTH).height(Constants.FULL_HEIGHT).backgroundColor($r('app.color.out_tab_bar_background_color')).padding({ left: 5, right: 5 })}
}
这样基本效果就实现了。
3.7 吸顶效果
Tabs父组件外及Tabs的TabContent组件内嵌套可滑动组件。在TabContent内可滑动组件上设置滑动行为属性nestedScroll,使其往上滑动时,父组件先动,往下滑动时自己先动。
修改InTabsComponent,为List组件添加nestedScroll属性
...
List(){...
}
.nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST})
...
3.8 内外联动
当滑动内层Tabs最后一个时,需要联动外层滚动。
实现思路:外层Tabs和内层Tabs均可滑动切换页签,内层滑到尽头触发外层滑动;在内层Tabs最后一个TabContent上监听滑动手势,通过@Link传递变量到父组件的外层Tabs,然后通过外层Tabs的TabController控制其滑动。
在InTabsComponent组件中,通过ForEach遍历生成TabContent时,需要给最后一项绑定 滚动手势,设置当前是最后一项的标识。InTabsComponent.ets
@Link switchNext: boolean; //是否内层Tab最后一项
...
Tabs(){ForEach(this.selectTabsViewModel.selectedTabs, (tab: TabItemViewModel, index: number) => {if (index === this.selectTabsViewModel.selectedTabs.length - 1) {TabContent() {List({ space: 10 }) {ForEach(this.inTabsViewModel.contentItems, (item: ContentItemViewModel, index: number) => {ContentItemComponent({contentItemViewModel: item,})}, (item: ContentItemViewModel, index: number) => index + '_' + JSON.stringify(item))}.padding({ left: 5, right: 5, bottom: 120 }).width(Constants.FULL_WIDTH).height(Constants.FULL_HEIGHT).scrollBar(BarState.Off).nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST})}.tabBar(this.tabBuilder(index, tab)).gesture(PanGesture(new PanGestureOptions({ direction: PanDirection.Left })).onActionStart(() => {this.switchNext = true;}))}else {TabContent() {List({ space: 10 }) {ForEach(this.inTabsViewModel.contentItems, (item: ContentItemViewModel, index: number) => {ContentItemComponent({contentItemViewModel: item,})}, (item: ContentItemViewModel, index: number) => index + '_' + JSON.stringify(item))}.padding({ left: 5, right: 5, bottom: 120 }).width(Constants.FULL_WIDTH).height(Constants.FULL_HEIGHT).scrollBar(BarState.Off).nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST})}.tabBar(this.tabBuilder(index, tab))}}, (tab: TabItemViewModel, index: number) => index + '_' + JSON.stringify(tab))}
}
外层组件OutTabsComponent传递参数,并监听该参数,一旦子组件回传的参数改变,则调用外层Tabs的控制器来改变外层Tab选择项,选中下一页。
@State @Watch('onchangeSwitchNext') switchNext: boolean = false;onchangeSwitchNext() {if (this.switchNext) {this.switchNext = false;this.tabsController.changeIndex(1);}}TabContent() {InTabsComponent({ switchNext: this.switchNext })
}
这样就实现了内层组件与外层组件联动。
3.9 分类选择
在首页中,分类可以由用户自定义选择,点击图片弹出组件InTabsModel。
制作选择分类组件SelectTabsComponent,在view目录下新建SelectTabsComponent.ets
import { Constants } from "../common/constant/Constants";
import SelectTabsViewModel from "../viewmodel/SelectTabsViewModel"
import TabItemViewModel from "../viewmodel/TabItemViewModel";@Component
export default struct SelectTabsComponent {@State checkedChange: boolean = false;@Link selectTabsViewModel: SelectTabsViewModel;build() {Grid() {ForEach(this.selectTabsViewModel.allTabs, (tab: TabItemViewModel) => {GridItem() {Row() {Toggle({ type: ToggleType.Button, isOn: tab.isChecked }) {if (this.checkedChange) {Text(tab.name).fontColor(tab.isChecked ? Color.White : $r('app.color.in_tab_bar_text_normal_color')).fontSize(14)} else {Text(tab.name).fontColor(tab.isChecked ? Color.White : $r('app.color.in_tab_bar_text_normal_color')).fontSize(14)}}.width($r('app.integer.in_tab_bar_width')).borderRadius(20).height(40).margin({left: 4,right: 4,top: 10,bottom: 10}).padding({ left: 12, right: 12 }).selectedColor($r('app.color.in_tab_bar_background_active_color')).onChange((isOn: boolean) => {tab.isChecked = isOn;this.checkedChange = !this.checkedChange;})}}}, (tab: TabItemViewModel, index: number) => index + '_' + JSON.stringify(tab))}.columnsTemplate(('1fr 1fr 1fr 1fr') as string).height(Constants.FULL_HEIGHT)}
}
在InTabsComponent组件中,绑定弹出框事件,点击时弹出选择分类组件。修改InTabsComponent.ets
import SelectTabsComponent from "./SelectTabsComponent";@Builder
sheetBuilder() {SelectTabsComponent({ selectTabsViewModel: this.selectTabsViewModel })
}...
Row() {Image($r('app.media.more')).onClick(() => {this.showSelectTabsComponent = !this.showSelectTabsComponent;})
}
.bindSheet($$this.showSelectTabsComponent, this.sheetBuilder(), {detents: [SheetSize.MEDIUM, SheetSize.MEDIUM, 500],preferType: SheetType.BOTTOM,title: { title: $r('app.string.bind_sheet_title') },onWillDismiss: (dismissSheetAction: DismissSheetAction) => {// update tab when closing modal boxthis.selectTabsViewModel.updateSelectedTabs();if (this.selectTabsViewModel.selectedTabs.length > 0) {this.subsController.changeIndex(0);}dismissSheetAction.dismiss();}})
点击图标,在弹出的页签中选择分类后关闭,内层Tabs的标签就自动显示选择的分类标签。
3.10 多语言测试
多语言的开发,开发者只需要准备不同语言的资源文件即可,匹配由系统自动实现。前面已经准备了中文和英文资源文件,即可实现多语言功能。
至于系统匹配的过程,只需要简单了解即可。系统匹配不同语言资源文件的过程和规则:程序运行时会获取系统语言与资源文件进行比对,如果系统语言是中文就匹配中文资源(zh_CN/element)。如果未匹配到,则获取用户首选项设置的语言进行比对,如果匹配到就显示对应的资源文件,否则就使用默认的资源配置文件(base/element/)。
这个匹配过程由系统自动完成,为了方面测试效果,可以使用18n手动设置语言首选项来改变语言环境。在entryability/EntryAbility.ets文件的onWindowStageCreate设置改变语言,观察效果。
onWindowStageCreate(windowStage: window.WindowStage): void {i18n.System.setAppPreferredLanguage("en"); //英文// i18n.System.setAppPreferredLanguage("zh"); //中文...}
程序运行后,改变首选项语言,可以看到中文和英文的界面。
至此,功能开发完成。
三、总结
- 实现双层嵌套Tabs
- 外层Tabs和内层Tabs均可滑动切换页签,内层滑到尽头触发外层滑动
- 在内层Tabs最后一个TabContent上监听滑动手势,通过@Link传递变量到父组件的外层Tabs,然后通过外层Tabs的TabController控制其滑动
- 实现Tabs滑动吸顶
- Tabs父组件外及Tabs的TabContent组件内嵌套可滑动组件
- 在TabContent内可滑动组件上设置滑动行为属性nestedScroll,使其往上滑动时,父组件先动,往下滑动时自己先动
- 实现底部自定义变化页签
- @Builder装饰器修饰的自定义builder函数,传递给TabBar,实现自定义样式
- 设置currentIndex属性,记录当前选择的页签,并且@Builder修饰的TabBar构建函数中利用其值来区分当前页签是否被选中,以呈现不同的样式
- 实现顶部可滑动标签
- 设置Tabs组件属性barMode(BarMode.Scrollable),页签显示不下的时候就可滑动
- 实现增删现实页签项
- 利用@Link双向绑定selectTabsViewModel到InTabsComponent和SelectTabsComponent
- SelectTabsComponent选中需要显示的页签项,在退出模态框时调用selectTabsViewModel.updateSelectedTabs,更新可显示页签
- 更新后通过@Link的机制传递到InTabsComponent,触发UI刷新,显示新选择的页签
- 实现Tabs切换动效
- 在Tabs上注册动画方法customContentTransition(this.customContentTransition)
- 在动画方法中修改TabContent的尺寸属性和透明属性,并通过@State修饰后传递给TabContent,来实现动画
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容,防止迷路,欢迎关注!
关注后,评论区领取本案例项目代码!