From 751841ad8a81d1533e56a7cc179df8c480b3a5c2 Mon Sep 17 00:00:00 2001 From: tao_software <1328950355@qq.com> Date: Mon, 30 Jun 2025 11:32:11 +0800 Subject: [PATCH 1/4] add comment --- entry/src/main/ets/view/InTabsComponent.ets | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/entry/src/main/ets/view/InTabsComponent.ets b/entry/src/main/ets/view/InTabsComponent.ets index fe334af..2848c74 100644 --- a/entry/src/main/ets/view/InTabsComponent.ets +++ b/entry/src/main/ets/view/InTabsComponent.ets @@ -351,7 +351,7 @@ export default struct InTabsComponent { // [StartExclude scroll] // [End select_tabs_3] // [End switch_animation_2] - .customContentTransition(this.customContentTransition) + .customContentTransition(this.customContentTransition) // comment out to slide to switch // [End switch_animation_4] // [End double_tabs_3] // [EndExclude scroll_and_more] -- Gitee From e75ae758286764b76e2b87114ee5d18ae7ed9e25 Mon Sep 17 00:00:00 2001 From: tao_software <1328950355@qq.com> Date: Mon, 30 Jun 2025 11:32:11 +0800 Subject: [PATCH 2/4] add comment --- entry/src/main/ets/view/InTabsComponent.ets | 7 +++++++ entry/src/main/ets/view/OutTabsComponent.ets | 1 + entry/src/main/ets/viewmodel/SelectTabsViewModel.ets | 1 + 3 files changed, 9 insertions(+) diff --git a/entry/src/main/ets/view/InTabsComponent.ets b/entry/src/main/ets/view/InTabsComponent.ets index 2848c74..39cc67b 100644 --- a/entry/src/main/ets/view/InTabsComponent.ets +++ b/entry/src/main/ets/view/InTabsComponent.ets @@ -68,6 +68,7 @@ export default struct InTabsComponent { let tabContentAnimatedTransition = { timeout: this.animateTimeout, transition: (proxy: TabContentTransitionProxy) => { + // start frame this.scaleList[from] = 1.0; this.scaleList[to] = 0.5; this.opacityList[from] = 1.0; @@ -78,6 +79,7 @@ export default struct InTabsComponent { proxy.finishTransition(); } }, () => { + // end frame this.scaleList[from] = 0.5; this.scaleList[to] = 1.0; this.opacityList[from] = 0.5; @@ -209,6 +211,7 @@ export default struct InTabsComponent { preferType: SheetType.BOTTOM, title: { title: $r('app.string.bind_sheet_title') }, onWillDismiss: (dismissSheetAction: DismissSheetAction) => { + // update tab when closing modal box this.selectTabsViewModel.updateSelectedTabs(); if (this.selectTabsViewModel.selectedTabs.length > 0) { this.subsController.changeIndex(0); @@ -256,6 +259,7 @@ export default struct InTabsComponent { // [StartExclude double_tabs_3] // [StartExclude scroll] // [StartExclude switch_animation_4] + // bind selected tabs to ui ForEach(this.selectTabsViewModel.selectedTabs, (tab: TabItemViewModel, index: number) => { if (index === this.selectTabsViewModel.selectedTabs.length - 1) { TabContent() { @@ -277,6 +281,7 @@ export default struct InTabsComponent { .height(Constants.FULL_HEIGHT) .scrollBar(BarState.Off) // [EndExclude ceiling] + // set the sliding behavior to move up parent first, and move down self first .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST @@ -351,6 +356,7 @@ export default struct InTabsComponent { // [StartExclude scroll] // [End select_tabs_3] // [End switch_animation_2] + // add animation function .customContentTransition(this.customContentTransition) // comment out to slide to switch // [End switch_animation_4] // [End double_tabs_3] @@ -366,6 +372,7 @@ export default struct InTabsComponent { .onChange((index: number) => { this.focusIndex = index; this.tabBarItemScroller.scrollToIndex(index, true, ScrollAlign.CENTER); + // preload the left and right item let preloadItems: number[] = []; if (index - 1 >= 0) { preloadItems.push(index - 1); diff --git a/entry/src/main/ets/view/OutTabsComponent.ets b/entry/src/main/ets/view/OutTabsComponent.ets index 87efeaf..0e1863e 100644 --- a/entry/src/main/ets/view/OutTabsComponent.ets +++ b/entry/src/main/ets/view/OutTabsComponent.ets @@ -40,6 +40,7 @@ export default struct OutTabsComponent { @Builder tabBuilder(index: number, name: string | Resource, normalIcon: string | Resource, selectedIcon: string | Resource) { Column() { + // set special styles if selected Image(this.currentIndex === index ? selectedIcon : normalIcon) .width(24) .height(24) diff --git a/entry/src/main/ets/viewmodel/SelectTabsViewModel.ets b/entry/src/main/ets/viewmodel/SelectTabsViewModel.ets index 14c69a0..a5d26d5 100644 --- a/entry/src/main/ets/viewmodel/SelectTabsViewModel.ets +++ b/entry/src/main/ets/viewmodel/SelectTabsViewModel.ets @@ -45,6 +45,7 @@ export default class SelectTabsViewModel { // [EndExclude select_tabs_1] } + // apply changes to the selected tabs updateSelectedTabs() { let tempTabs: TabItemViewModel[] = []; for (let tab of this.allTabs) { -- Gitee From 4c202eaeade6705881df18e1bd002e06c9ef631a Mon Sep 17 00:00:00 2001 From: tao_software <1328950355@qq.com> Date: Mon, 30 Jun 2025 14:41:23 +0800 Subject: [PATCH 3/4] add comment --- entry/src/main/ets/view/InTabsComponent.ets | 6 ++++++ entry/src/main/ets/view/OutTabsComponent.ets | 18 +++++++++++++++--- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/entry/src/main/ets/view/InTabsComponent.ets b/entry/src/main/ets/view/InTabsComponent.ets index 39cc67b..b58855a 100644 --- a/entry/src/main/ets/view/InTabsComponent.ets +++ b/entry/src/main/ets/view/InTabsComponent.ets @@ -230,6 +230,7 @@ export default struct InTabsComponent { // [Start select_tabs_3] // [Start switch_animation_2] // [Start switch_animation_4] + // [Start bar_position_start] Tabs({ // [StartExclude ceiling] // [StartExclude load_data] @@ -241,6 +242,7 @@ export default struct InTabsComponent { // [StartExclude switch_animation_2] barPosition: BarPosition.Start, // [EndExclude load_data] + // [StartExclude bar_position_start] controller: this.subsController, // [EndExclude alignment] // [StartExclude load_data] @@ -252,6 +254,7 @@ export default struct InTabsComponent { // [EndExclude scroll] // [EndExclude select_tabs_3] // [EndExclude switch_animation_2] + // [EndExclude bar_position_start] }) { // [StartExclude load_data] // [StartExclude scroll_and_more] @@ -259,6 +262,7 @@ export default struct InTabsComponent { // [StartExclude double_tabs_3] // [StartExclude scroll] // [StartExclude switch_animation_4] + // [StartExclude bar_position_start] // bind selected tabs to ui ForEach(this.selectTabsViewModel.selectedTabs, (tab: TabItemViewModel, index: number) => { if (index === this.selectTabsViewModel.selectedTabs.length - 1) { @@ -347,7 +351,9 @@ export default struct InTabsComponent { // [EndExclude double_tabs_3] // [EndExclude scroll] // [EndExclude switch_animation_4] + // [EndExclude bar_position_start] } + // [End bar_position_start] // [StartExclude double_tabs_2] // [StartExclude scroll_and_more] // [StartExclude alignment] diff --git a/entry/src/main/ets/view/OutTabsComponent.ets b/entry/src/main/ets/view/OutTabsComponent.ets index 0e1863e..9e0d17e 100644 --- a/entry/src/main/ets/view/OutTabsComponent.ets +++ b/entry/src/main/ets/view/OutTabsComponent.ets @@ -63,20 +63,28 @@ export default struct OutTabsComponent { // [Start disable_scroll_switch] // [EndExclude double_tabs_1] // [End custom_style_2] - // [Start custom_style_3] build() { + // [Start bar_position_end] + // [Start tabs_vertical] + // [Start custom_style_3] Tabs({ // [StartExclude disable_scroll_switch] // [StartExclude double_tabs_1] // [StartExclude custom_style_3] + // [StartExclude tabs_vertical] barPosition: BarPosition.End, + // [StartExclude bar_position_end] index: this.currentIndex, // [EndExclude double_tabs_1] controller: this.tabsController, // [EndExclude disable_scroll_switch] // [EndExclude custom_style_3] + // [EndExclude bar_position_end] + // [EndExclude tabs_vertical] }) { // [StartExclude disable_scroll_switch] + // [StartExclude bar_position_end] + // [StartExclude tabs_vertical] TabContent() { InTabsComponent({ switchNext: this.switchNext }) }.tabBar(this.tabBuilder(0, $r('app.string.out_bar_text_home'), $r('app.media.home'), $r('app.media.activeHome'))) @@ -101,10 +109,15 @@ export default struct OutTabsComponent { // [EndExclude disable_scroll_switch] // [EndExclude double_tabs_1] // [EndExclude custom_style_3] + // [EndExclude bar_position_end] + // [EndExclude tabs_vertical] } + // [End custom_style_3] + // [End bar_position_end] // [StartExclude double_tabs_1] // [StartExclude disable_scroll_switch] - .vertical(false) + .vertical(false) // true to make the tab bar in side + // [End tabs_vertical] .barMode(BarMode.Fixed) // [EndExclude disable_scroll_switch] .scrollable(true) // false to disable scroll to switch @@ -123,7 +136,6 @@ export default struct OutTabsComponent { } // [End disable_scroll_switch] // [EndExclude custom_style_1] - // [End custom_style_3] } // [End double_tabs_1] // [Start custom_style_1] \ No newline at end of file -- Gitee From 23980b045a0c75df02fc9caad6ae6c77e469a29f Mon Sep 17 00:00:00 2001 From: tao_software <1328950355@qq.com> Date: Tue, 1 Jul 2025 09:27:26 +0800 Subject: [PATCH 4/4] add comment --- build-profile.json5 | 4 ++-- entry/src/main/ets/view/OutTabsComponent.ets | 17 +++++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/build-profile.json5 b/build-profile.json5 index d9db084..7107d8c 100644 --- a/build-profile.json5 +++ b/build-profile.json5 @@ -7,11 +7,11 @@ "material": { "certpath": "C:\\Users\\tao\\.ohos\\config\\default_PureTabs_6hla1It1o6OhqKS-pFkQj7g6coHhsp0sSEEKiewDGwg=.cer", "keyAlias": "debugKey", - "keyPassword": "0000001B3CEBD37B5A231B8AF3A82870A3D498C97DE2E83EB76A756186B35940DF908741C43AF5A6C54E73", + "keyPassword": "0000001B2B0F29596B472F5FC180AAB4CC69966CFCEF757124862009860E7267518FE34E473F6B7EF20018", "profile": "C:\\Users\\tao\\.ohos\\config\\default_PureTabs_6hla1It1o6OhqKS-pFkQj7g6coHhsp0sSEEKiewDGwg=.p7b", "signAlg": "SHA256withECDSA", "storeFile": "C:\\Users\\tao\\.ohos\\config\\default_PureTabs_6hla1It1o6OhqKS-pFkQj7g6coHhsp0sSEEKiewDGwg=.p12", - "storePassword": "0000001BC66CCE002573BE4C47635C24C4967599E965528545173A36A7155378550EAC27CE73AB053FC8DB" + "storePassword": "0000001BF382436CF6E79C04AE62EB395CE5E43C4EDFF02508D69FA41B818A661D31D390EF70B9E1FF798D" } } ], diff --git a/entry/src/main/ets/view/OutTabsComponent.ets b/entry/src/main/ets/view/OutTabsComponent.ets index 9e0d17e..edb4da3 100644 --- a/entry/src/main/ets/view/OutTabsComponent.ets +++ b/entry/src/main/ets/view/OutTabsComponent.ets @@ -19,12 +19,14 @@ import OtherTabContentComponent from "./OtherTabComponent"; // [Start double_tabs_1] // [Start custom_style_1] +// [Start custom_linkage] @Component export default struct OutTabsComponent { // [StartExclude double_tabs_1] @State currentIndex: number = 0; // [EndExclude double_tabs_1] // [StartExclude custom_style_1] + // [StartExclude custom_linkage] @State @Watch('onchangeSwitchNext') switchNext: boolean = false; // [StartExclude double_tabs_1] private tabsController: TabsController = new TabsController(); @@ -35,6 +37,7 @@ export default struct OutTabsComponent { this.tabsController.changeIndex(1); } } + // [EndExclude custom_linkage] // [StartExclude double_tabs_1] // [Start custom_style_2] @Builder @@ -53,12 +56,13 @@ export default struct OutTabsComponent { ? $r('app.color.out_tab_bar_font_active_color') : $r('app.color.out_tab_bar_font_inactive_color')) } + // [StartExclude custom_linkage] .justifyContent(FlexAlign.Center) .height(60) .width(Constants.FULL_WIDTH) .margin({ bottom: 60 }) .backgroundColor($r('app.color.out_tab_bar_background_color')) - + // [EndExclude custom_linkage] } // [Start disable_scroll_switch] // [EndExclude double_tabs_1] @@ -72,6 +76,7 @@ export default struct OutTabsComponent { // [StartExclude double_tabs_1] // [StartExclude custom_style_3] // [StartExclude tabs_vertical] + // [StartExclude custom_linkage] barPosition: BarPosition.End, // [StartExclude bar_position_end] index: this.currentIndex, @@ -81,10 +86,12 @@ export default struct OutTabsComponent { // [EndExclude custom_style_3] // [EndExclude bar_position_end] // [EndExclude tabs_vertical] + // [EndExclude custom_linkage] }) { // [StartExclude disable_scroll_switch] // [StartExclude bar_position_end] // [StartExclude tabs_vertical] + // [StartExclude custom_linkage] TabContent() { InTabsComponent({ switchNext: this.switchNext }) }.tabBar(this.tabBuilder(0, $r('app.string.out_bar_text_home'), $r('app.media.home'), $r('app.media.activeHome'))) @@ -111,11 +118,13 @@ export default struct OutTabsComponent { // [EndExclude custom_style_3] // [EndExclude bar_position_end] // [EndExclude tabs_vertical] + // [EndExclude custom_linkage] } // [End custom_style_3] // [End bar_position_end] // [StartExclude double_tabs_1] // [StartExclude disable_scroll_switch] + // [StartExclude custom_linkage] .vertical(false) // true to make the tab bar in side // [End tabs_vertical] .barMode(BarMode.Fixed) @@ -123,9 +132,11 @@ export default struct OutTabsComponent { .scrollable(true) // false to disable scroll to switch // .edgeEffect(EdgeEffect.None) // disables edge springback // [StartExclude disable_scroll_switch] + // [EndExclude custom_linkage] .onChange((index: number) => { this.currentIndex = index; }) + // [StartExclude custom_linkage] .height(Constants.FULL_HEIGHT) .width(Constants.FULL_WIDTH) .backgroundColor($r('app.color.out_tab_bar_background_color')) @@ -133,9 +144,11 @@ export default struct OutTabsComponent { .barHeight(120) // [EndExclude disable_scroll_switch] // [EndExclude double_tabs_1] + // [EndExclude custom_linkage] } // [End disable_scroll_switch] // [EndExclude custom_style_1] } // [End double_tabs_1] -// [Start custom_style_1] \ No newline at end of file +// [End custom_style_1] +// [End custom_linkage] \ No newline at end of file -- Gitee