介紹
本示例實現(xiàn)了tabContent內(nèi)容可以在tabBar上顯示并且tabBar可以響應(yīng)滑動事件的功能。
效果圖預(yù)覽
使用說明
1.點擊播放按鈕進(jìn)行視頻播放，按住進(jìn)度條按鈕和進(jìn)度條下方區(qū)域可以拖動進(jìn)度條，更改視頻播放進(jìn)度。
實現(xiàn)思路
原生的Tabs組件，tabContent內(nèi)容無法在tabBar上顯示。本案例實現(xiàn)tabContent內(nèi)容可以在tabBar上顯示并且tabBar可以響應(yīng)滑動事件的功能 主要是通過將Tabs組件的barHeight設(shè)置為0，重新自定義tabBar。 將TabContent的內(nèi)容分為上下兩部分，上半部高度為100% - 60vp，存放video組件， 下部分高度為60vp，存放進(jìn)度條。將Tabs組件的zIndex屬性設(shè)置為2，tabContent的視圖就可以堆疊在自定義tabBar之上。再設(shè)置hitTestBehavior屬性 使被覆蓋的tabBar可以響應(yīng)點擊事件。這樣就實現(xiàn)tabBar可以響應(yīng)滑動事件并且tabBar可以響應(yīng)點擊事件的效果。
1.創(chuàng)建Tabs組件，將barHeight設(shè)置為0。
Tabs({ index: this.index, controller: this.tabsController }) {
...
}
// TODO: 知識點：將zIndex設(shè)置為2，TabContent將在tabBar之上，顯示的效果就是TabContent外溢的部分在tabBar上。
.zIndex(CONFIGURATION.TABCONTENTOVERFLOWZINDEX)
.scrollable(false)
.barHeight($r('app.integer.tabcontentoverflow_tabs_barheight'))
.animationDuration(CONFIGURATION.TABCONTENTOVERFLOWTABSDURATION)
.onChange((index: number) => {
this.index = index;
})
// TODO: 知識點：hitTestBehavior屬性可以實現(xiàn)在復(fù)雜的多層級場景下，一些組件能夠響應(yīng)手勢和事件，而一些組件不能響應(yīng)手勢和事件。HitTestMode.Transparent的效果為，自身響應(yīng)觸摸測試，不會阻塞兄弟節(jié)點的觸摸測試。
.hitTestBehavior(HitTestMode.Transparent)
.id('tabs')
.alignRules({
top: { anchor: STRINGCONFIGURATION.TABCONTENTOVERFLOWCONTAINER, align: VerticalAlign.Top },
left: { anchor: STRINGCONFIGURATION.TABCONTENTOVERFLOWCONTAINER, align: HorizontalAlign.Start },
})
2.創(chuàng)建自定義tabBar。
Row() {
ForEach(this.tabArray, (item: string, index: number) => {
Column() {
Image(this.index === index ? $r(this.imageClickArray[index]) : $r(this.imageArray[index]))
.width($r('app.integer.tabcontentoverflow_row_column_image_width'))
.height($r('app.integer.tabcontentoverflow_row_column_image_height'))
Text($r(item))
.fontSize($r('app.integer.tabcontentoverflow_row_column_text_font_size'))
.fontColor(this.index === index ? $r('app.color.tabcontentoverflow_click_color') : $r('app.color.tabcontentoverflow_white'))
}
.width($r('app.integer.tabcontentoverflow_row_column_width'))
.margin({ top: $r('app.integer.tabcontentoverflow_margin_samll') })
// 為將底部視圖擴(kuò)展到非安全區(qū)域，可將原本60vp的高度設(shè)置為100vp。
.height($r('app.integer.tabcontentoverflow_row_column_height'))
.onClick(() => {
this.index = index;
this.tabsController.changeIndex(this.index);
})
})
}
.offset({
y: $r('app.integer.tabcontentoverflow_row_offset')
})
.width($r('app.string.tabcontentoverflow_full_size'))
// 擴(kuò)展至所有非安全區(qū)域
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
.backgroundColor($r('app.color.tabcontentoverflow_row_background'))
.justifyContent(FlexAlign.SpaceAround)
.id(STRINGCONFIGURATION.TABCONTENT_OVERFLOW_TABBAR)
.alignRules({
top: { anchor: STRINGCONFIGURATION.TABCONTENT_OVERFLOW_CONTAINER, align: VerticalAlign.Bottom },
left: { anchor: STRINGCONFIGURATION.TABCONTENT_OVERFLOW_CONTAINER, align: HorizontalAlign.Start },
})
3.將TabContent的內(nèi)容分為上下兩部分，上半部高度為100% - 60vp，存放video組件，下部分高度為60vp，存放進(jìn)度條，設(shè)置滑動手勢響應(yīng)事件。
RelativeContainer()
{
Video({
...
})
.height($r('app.string.tabcontentoverflow_video_height'))
...
RelativeContainer() {
Text()
...
Text()
...
Text()
...
}
.id(STRINGCONFIGURATION.TABCONTENT_OVERFLOW_RELATIVE_CONTAINER)
.alignRules({
top: { anchor: STRINGCONFIGURATION.TABCONTENT_OVERFLOW_VIDEO, align: VerticalAlign.Bottom },
left: { anchor: STRINGCONFIGURATION.TABCONTENT_OVERFLOW_CONTAINER, align: HorizontalAlign.Start },
})
.width(this.screenW)
.height($r('app.integer.tabcontentoverflow_tabbar_height'))
// 左右拖動觸發(fā)該手勢事件
.gesture(
PanGesture(this.panOption)
.onActionStart(() => {
...
})
/**
* TODO: 性能知識點: onActionUpdate是系統(tǒng)高頻回調(diào)函數(shù)，避免在函數(shù)中進(jìn)行冗余或耗時操作，例如應(yīng)該減少或避免在函數(shù)打印日志，會有較大的性能損耗。
* 合理使用系統(tǒng)接口，避免冗余操作:https://gitee.com/harmonyos-cases/cases/blob/master/docs/performance/README.md
*/
.onActionUpdate((event: GestureEvent) => {
...
})
.onActionEnd(() => {
...
})
)
}
4.將Tabs組件的zIndex屬性設(shè)置為2，tabContent的視圖就可以堆疊在自定義tabBar之上。
Tabs({ index: this.index, controller: this.tabsController }) {
TabContent() {
...
}
...
TabContent() {
this.videoTabContent();
}
TabContent() {
...
}
...
TabContent() {
...
}
...
}
// TODO: 知識點：將zIndex設(shè)置為2，TabContent將在tabBar之上，顯示的效果就是TabContent外溢的部分在tabBar上。
.zIndex(CONFIGURATION.TABCONTENT_OVERFLOW_ZINDEX)
...
5.再設(shè)置hitTestBehavior屬性使被覆蓋的自定義的tabBar可以響應(yīng)點擊事件。
Tabs({ index: this.index, controller: this.tabsController }) {
...
}
// TODO: 知識點：hitTestBehavior屬性可以實現(xiàn)在復(fù)雜的多層級場景下，一些組件能夠響應(yīng)手勢和事件，而一些組件不能響應(yīng)手勢和事件。HitTestMode.Transparent的效果為，自身響應(yīng)觸摸測試，不會阻塞兄弟節(jié)點的觸摸測試。
.hitTestBehavior(HitTestMode.Transparent)
工程結(jié)構(gòu)&模塊類型
dragtoswitchpictures // har包
|---common
| |---Constants.ets // 常量類
|---mainpage
| |---TabContentOverFlow.ets // 主頁面
|---view
| |---Side.ets // 視頻信息以及頂部視圖
模塊依賴
routermodule
utils
高性能知識點
本例使用了onActionUpdate函數(shù)。該函數(shù)是系統(tǒng)高頻回調(diào)函數(shù)，避免在函數(shù)中進(jìn)行冗余或耗時操作，例如應(yīng)該減少或避免在函數(shù)打印日志，會有較大的性能損耗。
界面嵌套帶來了渲染和計算的大量開銷，造成性能的衰退。本例使用扁平化布局優(yōu)化嵌套層級，建議采用相對布局RelativeContainer進(jìn)行扁平化布局，有效減少容器的嵌套層級，減少組件的創(chuàng)建時間。
如果大家還沒有掌握鴻蒙，現(xiàn)在想要在最短的時間里吃透它，我這邊特意整理了《鴻蒙語法ArkTS、TypeScript、ArkUI等…視頻教程》以及《鴻蒙開發(fā)學(xué)習(xí)手冊》（共計890頁），希望對大家有所幫助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
鴻蒙語法ArkTS、TypeScript、ArkUI等…視頻教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
OpenHarmony APP開發(fā)教程步驟：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
《鴻蒙開發(fā)學(xué)習(xí)手冊》：
如何快速入門：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.基本概念
2.構(gòu)建第一個ArkTS應(yīng)用
3.……
開發(fā)基礎(chǔ)知識：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.應(yīng)用基礎(chǔ)知識
2.配置文件
3.應(yīng)用數(shù)據(jù)管理
4.應(yīng)用安全管理
5.應(yīng)用隱私保護(hù)
6.三方應(yīng)用調(diào)用管控機(jī)制
7.資源分類與訪問
8.學(xué)習(xí)ArkTS語言
9.……
基于ArkTS 開發(fā)：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.Ability開發(fā)
2.UI開發(fā)
3.公共事件與通知
4.窗口管理
5.媒體
6.安全
7.網(wǎng)絡(luò)與鏈接
8.電話服務(wù)
9.數(shù)據(jù)管理
10.后臺任務(wù)(Background Task)管理
11.設(shè)備管理
12.設(shè)備使用信息統(tǒng)計
13.DFX
14.國際化開發(fā)
15.折疊屏系列
16.……
文章來源：http://www.zghlxwxcb.cn/news/detail-857107.html
鴻蒙生態(tài)應(yīng)用開發(fā)白皮書V2.0PDF：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
文章來源地址http://www.zghlxwxcb.cn/news/detail-857107.html
到了這里，關(guān)于OpenHarmony實戰(zhàn)開發(fā)-如何實現(xiàn)tabContent內(nèi)容可以在tabBar上顯示并且tabBar可以響應(yīng)滑動事件的功能。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
