diff --git a/build-profile.json5 b/build-profile.json5 index d9db0842893a336a228e6380c112f0f49b53116e..7107d8cd5388ced7fec11e0ef6db012cc18c3f06 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/InTabsComponent.ets b/entry/src/main/ets/view/InTabsComponent.ets index fe334afe4559cbc6a801d49e395c25bc8290462a..b58855a1e176ff063a9f03854650a12db3de94de 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); @@ -227,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] @@ -238,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] @@ -249,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] @@ -256,6 +262,8 @@ 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) { TabContent() { @@ -277,6 +285,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 @@ -342,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] @@ -351,7 +362,8 @@ export default struct InTabsComponent { // [StartExclude scroll] // [End select_tabs_3] // [End switch_animation_2] - .customContentTransition(this.customContentTransition) + // add animation function + .customContentTransition(this.customContentTransition) // comment out to slide to switch // [End switch_animation_4] // [End double_tabs_3] // [EndExclude scroll_and_more] @@ -366,6 +378,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 87efeaf228d8cea90c1c2a75c40abebf72ebd7b9..edb4da342002cc9e84010cfa3d7aac1b33fc7b03 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,11 +37,13 @@ export default struct OutTabsComponent { this.tabsController.changeIndex(1); } } + // [EndExclude custom_linkage] // [StartExclude double_tabs_1] // [Start custom_style_2] @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) @@ -52,30 +56,42 @@ 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] // [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] + // [StartExclude custom_linkage] 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] + // [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'))) @@ -100,18 +116,27 @@ export default struct OutTabsComponent { // [EndExclude disable_scroll_switch] // [EndExclude double_tabs_1] // [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] - .vertical(false) + // [StartExclude custom_linkage] + .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 // .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')) @@ -119,10 +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 custom_style_3] } // [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 diff --git a/entry/src/main/ets/viewmodel/SelectTabsViewModel.ets b/entry/src/main/ets/viewmodel/SelectTabsViewModel.ets index 14c69a08e5e8a924e19f5e0e620160268e7a423d..a5d26d56be33250e7d4c73ef6ea8caf9c50dc845 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) {