From 0c9f5ff03b9c1a53a79114c729a876d241abba05 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Tue, 14 Jan 2025 13:48:02 +0000 Subject: [PATCH 01/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- .../source/atomicservicetabs.ets | 169 +++++++++++++++++- 1 file changed, 160 insertions(+), 9 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 8598e28..cda5590 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -12,26 +12,165 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { display, mediaquery } from "@kit.ArkUI"; const DEFAULT_BAR_WIDTH: number = 96; -const DEFAULT_BAR_HEIGHT: number = 52; +const DEFAULT_BAR_HEIGHT: number = 48; +const TEXT_WIDTH_HEIGHT_SIZE: number = 24; +const TEXT_FONT_WEIGHT: number = 500; +const TEXT_LIGHT_HEIGHT: number = 14; +const MARGIN_HORIZONTAL_VP: number = 8 +const MARGIN_VERTICAL_VP: number = 4; +const TEXT_SELECTED_COLOR: ResourceColor = $r('sys.color.ohos_id_color_bottom_tab_text_on'); +const TEXT_UNSELECTED_COLOR: ResourceColor = $r('sys.color.ohos_id_color_bottom_tab_text_off'); +const ICON_SELECTED_COLOR: ResourceColor = $r('sys.color.ohos_id_color_bottom_tab_icon'); +const ICON_UNSELECTED_COLOR: ResourceColor = $r('sys.color.ohos_id_color_bottom_tab_icon_off'); @Component export struct AtomicServiceTabs { @BuilderParam tabContents?: [TabContentBuilder?, - TabContentBuilder?, - TabContentBuilder?, - TabContentBuilder?, - TabContentBuilder?]; + TabContentBuilder?, + TabContentBuilder?, + TabContentBuilder?, + TabContentBuilder?]; @Prop tabBarOptionsArray: [TabBarOptions, TabBarOptions, TabBarOptions?, TabBarOptions?, TabBarOptions?]; @Prop tabBarPosition?: TabBarPosition = TabBarPosition.BOTTOM; @Prop barBackgroundColor?: ResourceColor = Color.Transparent; @Prop index?: number | undefined = 0; @Prop barOverlap?: boolean = true; + @Prop layoutMode?: LayoutMode = LayoutMode.VERTICAL; controller?: TabsController = new TabsController(); onChange?: Callback; onTabBarClick?: Callback; onContentWillChange?: OnContentWillChangeCallback; + @State selectedIndex: number = 0; + @State layoutModelStatue: boolean = false; + @State widthFlag: boolean = false; + @State landStatus: boolean = false; + @State barHeight?: Length = undefined; + @State barModeStatus: BarMode = BarMode.Fixed; + @State iconTextStatus: boolean = false; + @State directionStatus: FlexDirection = FlexDirection.Column; + @State textMarginTop?: number = undefined; + @State textMarginLeft?: number = undefined; + @State tabMargin?: number = undefined; + @State tabPadding?: number = MARGIN_VERTICAL_VP; + listener: mediaquery.MediaQueryListener = + this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); + + aboutToAppear() { + this.initBarWidthAndHeight() + if (this.iconTextStatus && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { + this.landStatus = this.listener.matches; + this.foldListener(); + this.startListener(); + } + } + + aboutToDisappear(): void { + this.listener.off('change'); + display.off('foldDisplayModeChange'); + } + + initBarWidthAndHeight() { + this.layoutModelStatue = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; + if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { + this.iconTextStatus = true; + } + if (this.tabBarPosition === TabBarPosition.LEFT) { + this.barModeStatus = BarMode.Scrollable; + this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); + } + this.buildTab(); + } + + getScreenInfo() { + const screenWidth = px2vp(display.getDefaultDisplaySync().width); + this.widthFlag = screenWidth / this.tabBarOptionsArray.length > 104 ? true : false; + } + + foldListener() { + if (display.isFoldable()) { + display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { + this.getScreenInfo(); + this.initLayoutStatus(); + }); + } + } + + startListener() { + this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { + this.landStatus = mediaQueryResult.matches; + this.getScreenInfo(); + this.initLayoutStatus(); + }); + } + + initLayoutStatus() { + this.layoutModelStatue = (this.landStatus || this.widthFlag) ? true : false; + this.buildTab(); + } + + buildTab() { + this.directionStatus = this.layoutModelStatue ? FlexDirection.Row : FlexDirection.Column; + if (this.iconTextStatus) { + this.textMarginTop = this.layoutModelStatue ? undefined : MARGIN_VERTICAL_VP; + this.textMarginLeft = this.layoutModelStatue ? MARGIN_HORIZONTAL_VP : undefined; + this.tabPadding = this.layoutModelStatue ? undefined : MARGIN_VERTICAL_VP; + this.tabMargin = this.layoutModelStatue ? MARGIN_HORIZONTAL_VP : undefined; + } + } + + getColor(userColor: ResourceColor, defaultColor: ResourceColor): ResourceColor { + return userColor ? userColor : defaultColor; + } + + getFontSize(): Resource { + return this.layoutModelStatue ? $r('sys.float.ohos_id_text_size_button3') : + (this.iconTextStatus ? $r('sys.float.ohos_id_text_size_caption') : + $r('sys.float.ohos_id_text_size_button3')); + } + + @Builder + TabBuilder(item: TabBarOptions, index: number) { + Flex({ + direction: this.directionStatus, + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Center + }) { + if (item.icon) { + Image(item.icon as ResourceStr) + .width(TEXT_WIDTH_HEIGHT_SIZE) + .height(TEXT_WIDTH_HEIGHT_SIZE) + .objectFit(ImageFit.Contain) + .fillColor(this.selectedIndex === index ? this.getColor(item.selectedColor, ICON_SELECTED_COLOR) + : this.getColor(item.unselectedColor, ICON_UNSELECTED_COLOR)) + .backgroundColor(Color.Transparent) + .flexShrink(0) + } + if (item.text) { + Text(item.text) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(1) + .fontColor(this.selectedIndex === index ? this.getColor(item.selectedColor, TEXT_SELECTED_COLOR) + : this.getColor(item.unselectedColor, TEXT_UNSELECTED_COLOR)) + .maxFontSize(this.getFontSize()) + .minFontSize(9) + .fontWeight(TEXT_FONT_WEIGHT) + .lineHeight(TEXT_LIGHT_HEIGHT) + .textAlign(TextAlign.Center) + .focusOnTouch(true) + .backgroundColor(Color.Transparent) + .margin({ + top: this.textMarginTop, + left: this.textMarginLeft + }) + } + } + .padding({ left: this.tabPadding, right: this.tabPadding }) + .margin({ left: this.tabMargin, right: this.tabMargin }) + .height(this.barHeight) + } build() { Tabs({ @@ -46,23 +185,35 @@ export struct AtomicServiceTabs { this.tabContents[index]?.() } } - .tabBar(BottomTabBarStyle.of(item.icon, item.text) - .labelStyle({ unselectedColor: item.unselectedColor, selectedColor: item.selectedColor }) - .iconStyle({ unselectedColor: item.unselectedColor, selectedColor: item.selectedColor })) + .tabBar( + this.TabBuilder(item, index) + ) .width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') .height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') } }) } + .safeAreaPadding({ + bottom: 0 + }) + .animationDuration(0) .barBackgroundColor(this.barBackgroundColor) .divider(null) + .barMode(this.barModeStatus) .vertical(this.tabBarPosition === TabBarPosition.LEFT ? true : false) .scrollable(false) .barOverlap(this.barOverlap) .barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK) - .onChange(this.onChange) + .onChange((index: number) => { + if (this.onChange) { + this.onChange(index); + } + this.selectedIndex = index; + }) .onTabBarClick(this.onTabBarClick) .onContentWillChange(this.onContentWillChange) + .barWidth((this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') + .barHeight((this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') .width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') .height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') } -- Gitee From b146ad3d68aabe88ae111ad151f38ef1d7b9e369 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Tue, 14 Jan 2025 13:48:38 +0000 Subject: [PATCH 02/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 75 ++++++++++++++++++- 1 file changed, 72 insertions(+), 3 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index 172d3fb..d505857 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -18,6 +18,13 @@ if (!("finalizeConstruction" in ViewPU.prototype)) { } const DEFAULT_BAR_WIDTH = 96; const DEFAULT_BAR_HEIGHT = 52; +const TEXT_WIDTH_HEIGHT_SIZE = 24; +const TEXT_FONT_WEIGHT = 500; +const TEXT_LIGHT_HEIGHT = 14; +const TEXT_SELECTED_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_bottom_tab_text_on'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const TEXT_UNSELECTED_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_bottom_tab_text_off'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const ICON_SELECTED_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_bottom_tab_icon'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const ICON_UNSELECTED_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_bottom_tab_icon_off'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; export class AtomicServiceTabs extends ViewPU { constructor(m1, n1, o1, p1 = -1, q1 = undefined, r1) { super(m1, o1, p1, r1); @@ -119,6 +126,68 @@ export class AtomicServiceTabs extends ViewPU { set barOverlap(e1) { this.__barOverlap.set(e1); } + getColor(userColor, defaultColor) { + return userColor ? userColor : defaultColor; + } + getFontSize(item) { + return item.icon && item.text ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_caption'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; + } + TabBuilder(item, index, parent = null) { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Column.create(); + Column.width('100%'); + }, Column); + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (item.icon) { + this.ifElseBranchUpdateFunction(0, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Image.create(item.icon); + Image.width(TEXT_WIDTH_HEIGHT_SIZE); + Image.height(TEXT_WIDTH_HEIGHT_SIZE); + Image.margin({ bottom: 4 }); + Image.objectFit(ImageFit.Contain); + Image.fillColor(this.selectedIndex === index ? this.getColor(item.selectedColor, ICON_SELECTED_COLOR) + : this.getColor(item.unselectedColor, ICON_UNSELECTED_COLOR)); + Image.backgroundColor(Color.Transparent); + }, Image); + }); + } + else { + this.ifElseBranchUpdateFunction(1, () => { + }); + } + }, If); + If.pop(); + this.observeComponentCreation2((elmtId, isInitialRender) => { + If.create(); + if (item.text) { + this.ifElseBranchUpdateFunction(0, () => { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Text.create(item.text); + Text.textOverflow({ overflow: TextOverflow.Ellipsis }); + Text.maxLines(1); + Text.fontColor(this.selectedIndex === index ? this.getColor(item.selectedColor, TEXT_SELECTED_COLOR) + : this.getColor(item.unselectedColor, TEXT_UNSELECTED_COLOR)); + Text.maxFontSize(this.getFontSize(item)); + Text.minFontSize(9); + Text.fontWeight(TEXT_FONT_WEIGHT); + Text.lineHeight(TEXT_LIGHT_HEIGHT); + Text.textAlign(TextAlign.Center); + Text.focusOnTouch(true); + Text.padding({ left: 4, right: 4 }); + }, Text); + Text.pop(); + }); + } + else { + this.ifElseBranchUpdateFunction(1, () => { + }); + } + }, If); + If.pop(); + Column.pop(); + } initialRender() { this.observeComponentCreation2((c1, d1) => { Tabs.create({ @@ -162,9 +231,9 @@ export class AtomicServiceTabs extends ViewPU { }, If); If.pop(); }); - TabContent.tabBar(BottomTabBarStyle.of(n.icon, n.text) - .labelStyle({ unselectedColor: n.unselectedColor, selectedColor: n.selectedColor }) - .iconStyle({ unselectedColor: n.unselectedColor, selectedColor: n.selectedColor })); + TabContent.tabBar({ builder: () => { + this.TabBuilder.call(this, item, index); + } }); TabContent.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); TabContent.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); }, TabContent); -- Gitee From a03ddb00e3905d7750c340ff0771d625c8c0442f Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 15 Jan 2025 06:40:28 +0000 Subject: [PATCH 03/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- .../source/atomicservicetabs.ets | 85 +++++++------------ 1 file changed, 32 insertions(+), 53 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index cda5590..0a63a3d 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -21,10 +21,6 @@ const TEXT_FONT_WEIGHT: number = 500; const TEXT_LIGHT_HEIGHT: number = 14; const MARGIN_HORIZONTAL_VP: number = 8 const MARGIN_VERTICAL_VP: number = 4; -const TEXT_SELECTED_COLOR: ResourceColor = $r('sys.color.ohos_id_color_bottom_tab_text_on'); -const TEXT_UNSELECTED_COLOR: ResourceColor = $r('sys.color.ohos_id_color_bottom_tab_text_off'); -const ICON_SELECTED_COLOR: ResourceColor = $r('sys.color.ohos_id_color_bottom_tab_icon'); -const ICON_UNSELECTED_COLOR: ResourceColor = $r('sys.color.ohos_id_color_bottom_tab_icon_off'); @Component export struct AtomicServiceTabs { @@ -43,26 +39,22 @@ export struct AtomicServiceTabs { onChange?: Callback; onTabBarClick?: Callback; onContentWillChange?: OnContentWillChangeCallback; - @State selectedIndex: number = 0; - @State layoutModelStatue: boolean = false; - @State widthFlag: boolean = false; - @State landStatus: boolean = false; - @State barHeight?: Length = undefined; - @State barModeStatus: BarMode = BarMode.Fixed; - @State iconTextStatus: boolean = false; - @State directionStatus: FlexDirection = FlexDirection.Column; - @State textMarginTop?: number = undefined; - @State textMarginLeft?: number = undefined; - @State tabMargin?: number = undefined; - @State tabPadding?: number = MARGIN_VERTICAL_VP; + @State private selectedIndex: number = 0; + @State private isHorizontal: boolean = false; + @State private barModeStatus: BarMode = BarMode.Fixed; + @State private directionStatus: FlexDirection = FlexDirection.Column; + @State private textMarginTop?: number = undefined; + @State private textMarginLeft?: number = undefined; + @State private tabMargin?: number = undefined; + @State private tabPadding?: number = MARGIN_VERTICAL_VP; + private isIconAndText: boolean = false; + private barHeight?: Length = undefined; listener: mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); aboutToAppear() { - this.initBarWidthAndHeight() - if (this.iconTextStatus && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { - this.landStatus = this.listener.matches; - this.foldListener(); + this.initBarModeAndHeight() + if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { this.startListener(); } } @@ -72,10 +64,10 @@ export struct AtomicServiceTabs { display.off('foldDisplayModeChange'); } - initBarWidthAndHeight() { - this.layoutModelStatue = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; + initBarModeAndHeight() { + this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { - this.iconTextStatus = true; + this.isIconAndText = true; } if (this.tabBarPosition === TabBarPosition.LEFT) { this.barModeStatus = BarMode.Scrollable; @@ -84,50 +76,38 @@ export struct AtomicServiceTabs { this.buildTab(); } - getScreenInfo() { - const screenWidth = px2vp(display.getDefaultDisplaySync().width); - this.widthFlag = screenWidth / this.tabBarOptionsArray.length > 104 ? true : false; - } - - foldListener() { + startListener() { if (display.isFoldable()) { display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { - this.getScreenInfo(); this.initLayoutStatus(); }); } - } - - startListener() { this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { - this.landStatus = mediaQueryResult.matches; - this.getScreenInfo(); this.initLayoutStatus(); }); } initLayoutStatus() { - this.layoutModelStatue = (this.landStatus || this.widthFlag) ? true : false; + const screenWidth = px2vp(display.getDefaultDisplaySync().width); + const widthFlag = screenWidth / this.tabBarOptionsArray.length > 104 ? true : false; + console.log('widthFlag=== ', widthFlag) + this.isHorizontal = widthFlag ? true : false; this.buildTab(); } buildTab() { - this.directionStatus = this.layoutModelStatue ? FlexDirection.Row : FlexDirection.Column; - if (this.iconTextStatus) { - this.textMarginTop = this.layoutModelStatue ? undefined : MARGIN_VERTICAL_VP; - this.textMarginLeft = this.layoutModelStatue ? MARGIN_HORIZONTAL_VP : undefined; - this.tabPadding = this.layoutModelStatue ? undefined : MARGIN_VERTICAL_VP; - this.tabMargin = this.layoutModelStatue ? MARGIN_HORIZONTAL_VP : undefined; + this.directionStatus = this.isHorizontal ? FlexDirection.Row : FlexDirection.Column; + if (this.isIconAndText) { + this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; + this.textMarginLeft = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; + this.tabPadding = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; + this.tabMargin = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; } } - getColor(userColor: ResourceColor, defaultColor: ResourceColor): ResourceColor { - return userColor ? userColor : defaultColor; - } - getFontSize(): Resource { - return this.layoutModelStatue ? $r('sys.float.ohos_id_text_size_button3') : - (this.iconTextStatus ? $r('sys.float.ohos_id_text_size_caption') : + return this.isHorizontal ? $r('sys.float.ohos_id_text_size_button3') : + (this.isIconAndText ? $r('sys.float.ohos_id_text_size_caption') : $r('sys.float.ohos_id_text_size_button3')); } @@ -143,8 +123,7 @@ export struct AtomicServiceTabs { .width(TEXT_WIDTH_HEIGHT_SIZE) .height(TEXT_WIDTH_HEIGHT_SIZE) .objectFit(ImageFit.Contain) - .fillColor(this.selectedIndex === index ? this.getColor(item.selectedColor, ICON_SELECTED_COLOR) - : this.getColor(item.unselectedColor, ICON_UNSELECTED_COLOR)) + .fillColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor) .backgroundColor(Color.Transparent) .flexShrink(0) } @@ -152,8 +131,7 @@ export struct AtomicServiceTabs { Text(item.text) .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1) - .fontColor(this.selectedIndex === index ? this.getColor(item.selectedColor, TEXT_SELECTED_COLOR) - : this.getColor(item.unselectedColor, TEXT_UNSELECTED_COLOR)) + .fontColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor) .maxFontSize(this.getFontSize()) .minFontSize(9) .fontWeight(TEXT_FONT_WEIGHT) @@ -226,7 +204,7 @@ export class TabBarOptions { public selectedColor?: ResourceColor; constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr, - unselectedColor?: ResourceColor, selectedColor?: ResourceColor) { + unselectedColor?: ResourceColor, selectedColor?: ResourceColor) { this.icon = icon; this.text = text; this.unselectedColor = unselectedColor; @@ -240,4 +218,5 @@ export enum TabBarPosition { } export type TabContentBuilder = () => void; + export type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean; \ No newline at end of file -- Gitee From d1ed3cc2750172e215b02a854e7e3dac33d193f9 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 15 Jan 2025 06:41:21 +0000 Subject: [PATCH 04/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 231 ++++++++++++++++-- 1 file changed, 208 insertions(+), 23 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index d505857..8873cee 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -16,15 +16,14 @@ if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } +import display from "@ohos.display"; const DEFAULT_BAR_WIDTH = 96; -const DEFAULT_BAR_HEIGHT = 52; +const DEFAULT_BAR_HEIGHT = 48; const TEXT_WIDTH_HEIGHT_SIZE = 24; const TEXT_FONT_WEIGHT = 500; const TEXT_LIGHT_HEIGHT = 14; -const TEXT_SELECTED_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_bottom_tab_text_on'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const TEXT_UNSELECTED_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_bottom_tab_text_off'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const ICON_SELECTED_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_bottom_tab_icon'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; -const ICON_UNSELECTED_COLOR = { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_bottom_tab_icon_off'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; +const MARGIN_HORIZONTAL_VP = 8; +const MARGIN_VERTICAL_VP = 4; export class AtomicServiceTabs extends ViewPU { constructor(m1, n1, o1, p1 = -1, q1 = undefined, r1) { super(m1, o1, p1, r1); @@ -37,10 +36,22 @@ export class AtomicServiceTabs extends ViewPU { this.__barBackgroundColor = new SynchedPropertyObjectOneWayPU(n1.barBackgroundColor, this, "barBackgroundColor"); this.__index = new SynchedPropertyObjectOneWayPU(n1.index, this, "index"); this.__barOverlap = new SynchedPropertySimpleOneWayPU(n1.barOverlap, this, "barOverlap"); + this.__layoutMode = new SynchedPropertySimpleOneWayPU(n1.layoutMode, this, "layoutMode"); this.controller = new TabsController(); this.onChange = undefined; this.onTabBarClick = undefined; this.onContentWillChange = undefined; + this.__selectedIndex = new ObservedPropertySimplePU(0, this, "selectedIndex"); + this.__isHorizontal = new ObservedPropertySimplePU(false, this, "isHorizontal"); + this.__barModeStatus = new ObservedPropertySimplePU(BarMode.Fixed, this, "barModeStatus"); + this.__directionStatus = new ObservedPropertySimplePU(FlexDirection.Column, this, "directionStatus"); + this.__textMarginTop = new ObservedPropertySimplePU(undefined, this, "textMarginTop"); + this.__textMarginLeft = new ObservedPropertySimplePU(undefined, this, "textMarginLeft"); + this.__tabMargin = new ObservedPropertySimplePU(undefined, this, "tabMargin"); + this.__tabPadding = new ObservedPropertySimplePU(MARGIN_VERTICAL_VP, this, "tabPadding"); + this.isIconAndText = false; + this.barHeight = undefined; + this.listener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); this.setInitiallyProvidedValue(n1); this.finalizeConstruction(); } @@ -60,6 +71,9 @@ export class AtomicServiceTabs extends ViewPU { if (l1.barOverlap === undefined) { this.__barOverlap.set(true); } + if (l1.layoutMode === undefined) { + this.__layoutMode.set(LayoutMode.VERTICAL); + } if (l1.controller !== undefined) { this.controller = l1.controller; } @@ -72,6 +86,39 @@ export class AtomicServiceTabs extends ViewPU { if (l1.onContentWillChange !== undefined) { this.onContentWillChange = l1.onContentWillChange; } + if (l1.selectedIndex !== undefined) { + this.selectedIndex = l1.selectedIndex; + } + if (l1.isHorizontal !== undefined) { + this.isHorizontal = l1.isHorizontal; + } + if (l1.barModeStatus !== undefined) { + this.barModeStatus = l1.barModeStatus; + } + if (l1.directionStatus !== undefined) { + this.directionStatus = l1.directionStatus; + } + if (l1.textMarginTop !== undefined) { + this.textMarginTop = l1.textMarginTop; + } + if (l1.textMarginLeft !== undefined) { + this.textMarginLeft = l1.textMarginLeft; + } + if (l1.tabMargin !== undefined) { + this.tabMargin = l1.tabMargin; + } + if (l1.tabPadding !== undefined) { + this.tabPadding = l1.tabPadding; + } + if (l1.isIconAndText !== undefined) { + this.isIconAndText = l1.isIconAndText; + } + if (l1.barHeight !== undefined) { + this.barHeight = l1.barHeight; + } + if (l1.listener !== undefined) { + this.listener = l1.listener; + } } updateStateVars(k1) { this.__tabBarOptionsArray.reset(k1.tabBarOptionsArray); @@ -79,6 +126,7 @@ export class AtomicServiceTabs extends ViewPU { this.__barBackgroundColor.reset(k1.barBackgroundColor); this.__index.reset(k1.index); this.__barOverlap.reset(k1.barOverlap); + this.__layoutMode.reset(k1.layoutMode); } purgeVariableDependenciesOnElmtId(j1) { this.__tabBarOptionsArray.purgeDependencyOnElmtId(j1); @@ -86,6 +134,15 @@ export class AtomicServiceTabs extends ViewPU { this.__barBackgroundColor.purgeDependencyOnElmtId(j1); this.__index.purgeDependencyOnElmtId(j1); this.__barOverlap.purgeDependencyOnElmtId(j1); + this.__layoutMode.purgeDependencyOnElmtId(j1); + this.__selectedIndex.purgeDependencyOnElmtId(j1); + this.__isHorizontal.purgeDependencyOnElmtId(j1); + this.__barModeStatus.purgeDependencyOnElmtId(j1); + this.__directionStatus.purgeDependencyOnElmtId(j1); + this.__textMarginTop.purgeDependencyOnElmtId(j1); + this.__textMarginLeft.purgeDependencyOnElmtId(j1); + this.__tabMargin.purgeDependencyOnElmtId(j1); + this.__tabPadding.purgeDependencyOnElmtId(j1); } aboutToBeDeleted() { this.__tabBarOptionsArray.aboutToBeDeleted(); @@ -93,6 +150,15 @@ export class AtomicServiceTabs extends ViewPU { this.__barBackgroundColor.aboutToBeDeleted(); this.__index.aboutToBeDeleted(); this.__barOverlap.aboutToBeDeleted(); + this.__layoutMode.aboutToBeDeleted(); + this.__selectedIndex.aboutToBeDeleted(); + this.__isHorizontal.aboutToBeDeleted(); + this.__barModeStatus.aboutToBeDeleted(); + this.__directionStatus.aboutToBeDeleted(); + this.__textMarginTop.aboutToBeDeleted(); + this.__textMarginLeft.aboutToBeDeleted(); + this.__tabMargin.aboutToBeDeleted(); + this.__tabPadding.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } @@ -126,17 +192,122 @@ export class AtomicServiceTabs extends ViewPU { set barOverlap(e1) { this.__barOverlap.set(e1); } - getColor(userColor, defaultColor) { - return userColor ? userColor : defaultColor; + get layoutMode() { + return this.__layoutMode.get(); + } + set layoutMode(newValue) { + this.__layoutMode.set(newValue); + } + get selectedIndex() { + return this.__selectedIndex.get(); + } + set selectedIndex(newValue) { + this.__selectedIndex.set(newValue); + } + get isHorizontal() { + return this.__isHorizontal.get(); + } + set isHorizontal(newValue) { + this.__isHorizontal.set(newValue); + } + get barModeStatus() { + return this.__barModeStatus.get(); + } + set barModeStatus(newValue) { + this.__barModeStatus.set(newValue); + } + get directionStatus() { + return this.__directionStatus.get(); + } + set directionStatus(newValue) { + this.__directionStatus.set(newValue); + } + get textMarginTop() { + return this.__textMarginTop.get(); + } + set textMarginTop(newValue) { + this.__textMarginTop.set(newValue); } - getFontSize(item) { - return item.icon && item.text ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_caption'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; + get textMarginLeft() { + return this.__textMarginLeft.get(); + } + set textMarginLeft(newValue) { + this.__textMarginLeft.set(newValue); + } + get tabMargin() { + return this.__tabMargin.get(); + } + set tabMargin(newValue) { + this.__tabMargin.set(newValue); + } + get tabPadding() { + return this.__tabPadding.get(); + } + set tabPadding(newValue) { + this.__tabPadding.set(newValue); + } + aboutToAppear() { + this.initBarModeAndHeight(); + if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { + this.startListener(); + } + } + aboutToDisappear() { + this.listener.off('change'); + display.off('foldDisplayModeChange'); + } + initBarModeAndHeight() { + this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; + if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { + this.isIconAndText = true; + } + if (this.tabBarPosition === TabBarPosition.LEFT) { + this.barModeStatus = BarMode.Scrollable; + this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); + } + this.buildTab(); + } + startListener() { + if (display.isFoldable()) { + display.on('foldDisplayModeChange', (data) => { + this.initLayoutStatus(); + }); + } + this.listener.on('change', (mediaQueryResult) => { + this.initLayoutStatus(); + }); + } + initLayoutStatus() { + const screenWidth = px2vp(display.getDefaultDisplaySync().width); + const widthFlag = screenWidth / this.tabBarOptionsArray.length > 104 ? true : false; + console.log('widthFlag=== ', widthFlag); + this.isHorizontal = widthFlag ? true : false; + this.buildTab(); + } + buildTab() { + this.directionStatus = this.isHorizontal ? FlexDirection.Row : FlexDirection.Column; + if (this.isIconAndText) { + this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; + this.textMarginLeft = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; + this.tabPadding = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; + this.tabMargin = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; + } + } + getFontSize() { + return this.isHorizontal ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : + (this.isIconAndText ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_caption'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); } TabBuilder(item, index, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { - Column.create(); - Column.width('100%'); - }, Column); + Flex.create({ + direction: this.directionStatus, + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Center + }); + Flex.padding({ left: this.tabPadding, right: this.tabPadding }); + Flex.margin({ left: this.tabMargin, right: this.tabMargin }); + Flex.height(this.barHeight); + }, Flex); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (item.icon) { @@ -145,11 +316,10 @@ export class AtomicServiceTabs extends ViewPU { Image.create(item.icon); Image.width(TEXT_WIDTH_HEIGHT_SIZE); Image.height(TEXT_WIDTH_HEIGHT_SIZE); - Image.margin({ bottom: 4 }); Image.objectFit(ImageFit.Contain); - Image.fillColor(this.selectedIndex === index ? this.getColor(item.selectedColor, ICON_SELECTED_COLOR) - : this.getColor(item.unselectedColor, ICON_UNSELECTED_COLOR)); + Image.fillColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor); Image.backgroundColor(Color.Transparent); + Image.flexShrink(0); }, Image); }); } @@ -167,15 +337,18 @@ export class AtomicServiceTabs extends ViewPU { Text.create(item.text); Text.textOverflow({ overflow: TextOverflow.Ellipsis }); Text.maxLines(1); - Text.fontColor(this.selectedIndex === index ? this.getColor(item.selectedColor, TEXT_SELECTED_COLOR) - : this.getColor(item.unselectedColor, TEXT_UNSELECTED_COLOR)); - Text.maxFontSize(this.getFontSize(item)); + Text.fontColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor); + Text.maxFontSize(this.getFontSize()); Text.minFontSize(9); Text.fontWeight(TEXT_FONT_WEIGHT); Text.lineHeight(TEXT_LIGHT_HEIGHT); Text.textAlign(TextAlign.Center); Text.focusOnTouch(true); - Text.padding({ left: 4, right: 4 }); + Text.backgroundColor(Color.Transparent); + Text.margin({ + top: this.textMarginTop, + left: this.textMarginLeft + }); }, Text); Text.pop(); }); @@ -186,7 +359,7 @@ export class AtomicServiceTabs extends ViewPU { } }, If); If.pop(); - Column.pop(); + Flex.pop(); } initialRender() { this.observeComponentCreation2((c1, d1) => { @@ -195,15 +368,27 @@ export class AtomicServiceTabs extends ViewPU { index: this.index, controller: this.controller }); + Tabs.safeAreaPadding({ + bottom: 0 + }); + Tabs.animationDuration(0); Tabs.barBackgroundColor(ObservedObject.GetRawObject(this.barBackgroundColor)); Tabs.divider(null); + Tabs.barMode(this.barModeStatus); Tabs.vertical(this.tabBarPosition === TabBarPosition.LEFT ? true : false); Tabs.scrollable(false); Tabs.barOverlap(this.barOverlap); Tabs.barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK); - Tabs.onChange(this.onChange); + Tabs.onChange((index) => { + if (this.onChange) { + this.onChange(index); + } + this.selectedIndex = index; + }); Tabs.onTabBarClick(this.onTabBarClick); Tabs.onContentWillChange(this.onContentWillChange); + Tabs.barWidth((this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); + Tabs.barHeight((this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); Tabs.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); Tabs.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); }, Tabs); @@ -232,8 +417,8 @@ export class AtomicServiceTabs extends ViewPU { If.pop(); }); TabContent.tabBar({ builder: () => { - this.TabBuilder.call(this, item, index); - } }); + this.TabBuilder.call(this, item, index); + } }); TabContent.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); TabContent.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); }, TabContent); -- Gitee From 2ccde25e77c1299242a45b9f994450ea8a202eb2 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 15 Jan 2025 14:31:22 +0000 Subject: [PATCH 05/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- atomicservicetabs/interfaces/atomicservicetabs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index 8873cee..8618d11 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -16,7 +16,7 @@ if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } -import display from "@ohos.display"; +const display = requireNapi('display'); const DEFAULT_BAR_WIDTH = 96; const DEFAULT_BAR_HEIGHT = 48; const TEXT_WIDTH_HEIGHT_SIZE = 24; -- Gitee From d82564ddb6357abb6fe81128bb1a7cdc98cbb4d3 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Thu, 16 Jan 2025 06:55:31 +0000 Subject: [PATCH 06/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 206 +++++++++--------- 1 file changed, 103 insertions(+), 103 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index 8618d11..e024151 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -1,3 +1,4 @@ + /* * Copyright (c) 2024 Huawei Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); @@ -6,7 +7,7 @@ * * http://www.apache.org/licenses/LICENSE-2.0 * - * Unless required by applicable law or agreed to in writing, software + * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and @@ -25,18 +26,18 @@ const TEXT_LIGHT_HEIGHT = 14; const MARGIN_HORIZONTAL_VP = 8; const MARGIN_VERTICAL_VP = 4; export class AtomicServiceTabs extends ViewPU { - constructor(m1, n1, o1, p1 = -1, q1 = undefined, r1) { - super(m1, o1, p1, r1); - if (typeof q1 === "function") { - this.paramsGenerator_ = q1; + constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { + super(parent, __localStorage, elmtId, extraInfo); + if (typeof paramsLambda === "function") { + this.paramsGenerator_ = paramsLambda; } this.tabContents = undefined; - this.__tabBarOptionsArray = new SynchedPropertyObjectOneWayPU(n1.tabBarOptionsArray, this, "tabBarOptionsArray"); - this.__tabBarPosition = new SynchedPropertySimpleOneWayPU(n1.tabBarPosition, this, "tabBarPosition"); - this.__barBackgroundColor = new SynchedPropertyObjectOneWayPU(n1.barBackgroundColor, this, "barBackgroundColor"); - this.__index = new SynchedPropertyObjectOneWayPU(n1.index, this, "index"); - this.__barOverlap = new SynchedPropertySimpleOneWayPU(n1.barOverlap, this, "barOverlap"); - this.__layoutMode = new SynchedPropertySimpleOneWayPU(n1.layoutMode, this, "layoutMode"); + this.__tabBarOptionsArray = new SynchedPropertyObjectOneWayPU(params.tabBarOptionsArray, this, "tabBarOptionsArray"); + this.__tabBarPosition = new SynchedPropertySimpleOneWayPU(params.tabBarPosition, this, "tabBarPosition"); + this.__barBackgroundColor = new SynchedPropertyObjectOneWayPU(params.barBackgroundColor, this, "barBackgroundColor"); + this.__index = new SynchedPropertyObjectOneWayPU(params.index, this, "index"); + this.__barOverlap = new SynchedPropertySimpleOneWayPU(params.barOverlap, this, "barOverlap"); + this.__layoutMode = new SynchedPropertySimpleOneWayPU(params.layoutMode, this, "layoutMode"); this.controller = new TabsController(); this.onChange = undefined; this.onTabBarClick = undefined; @@ -52,97 +53,97 @@ export class AtomicServiceTabs extends ViewPU { this.isIconAndText = false; this.barHeight = undefined; this.listener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); - this.setInitiallyProvidedValue(n1); + this.setInitiallyProvidedValue(params); this.finalizeConstruction(); } - setInitiallyProvidedValue(l1) { - if (l1.tabContents !== undefined) { - this.tabContents = l1.tabContents; + setInitiallyProvidedValue(params) { + if (params.tabContents !== undefined) { + this.tabContents = params.tabContents; } - if (l1.tabBarPosition === undefined) { + if (params.tabBarPosition === undefined) { this.__tabBarPosition.set(TabBarPosition.BOTTOM); } - if (l1.barBackgroundColor === undefined) { + if (params.barBackgroundColor === undefined) { this.__barBackgroundColor.set(Color.Transparent); } - if (l1.index === undefined) { + if (params.index === undefined) { this.__index.set(0); } - if (l1.barOverlap === undefined) { + if (params.barOverlap === undefined) { this.__barOverlap.set(true); } - if (l1.layoutMode === undefined) { + if (params.layoutMode === undefined) { this.__layoutMode.set(LayoutMode.VERTICAL); } - if (l1.controller !== undefined) { - this.controller = l1.controller; + if (params.controller !== undefined) { + this.controller = params.controller; } - if (l1.onChange !== undefined) { - this.onChange = l1.onChange; + if (params.onChange !== undefined) { + this.onChange = params.onChange; } - if (l1.onTabBarClick !== undefined) { - this.onTabBarClick = l1.onTabBarClick; + if (params.onTabBarClick !== undefined) { + this.onTabBarClick = params.onTabBarClick; } - if (l1.onContentWillChange !== undefined) { - this.onContentWillChange = l1.onContentWillChange; + if (params.onContentWillChange !== undefined) { + this.onContentWillChange = params.onContentWillChange; } - if (l1.selectedIndex !== undefined) { - this.selectedIndex = l1.selectedIndex; + if (params.selectedIndex !== undefined) { + this.selectedIndex = params.selectedIndex; } - if (l1.isHorizontal !== undefined) { - this.isHorizontal = l1.isHorizontal; + if (params.isHorizontal !== undefined) { + this.isHorizontal = params.isHorizontal; } - if (l1.barModeStatus !== undefined) { - this.barModeStatus = l1.barModeStatus; + if (params.barModeStatus !== undefined) { + this.barModeStatus = params.barModeStatus; } - if (l1.directionStatus !== undefined) { - this.directionStatus = l1.directionStatus; + if (params.directionStatus !== undefined) { + this.directionStatus = params.directionStatus; } - if (l1.textMarginTop !== undefined) { - this.textMarginTop = l1.textMarginTop; + if (params.textMarginTop !== undefined) { + this.textMarginTop = params.textMarginTop; } - if (l1.textMarginLeft !== undefined) { - this.textMarginLeft = l1.textMarginLeft; + if (params.textMarginLeft !== undefined) { + this.textMarginLeft = params.textMarginLeft; } - if (l1.tabMargin !== undefined) { - this.tabMargin = l1.tabMargin; + if (params.tabMargin !== undefined) { + this.tabMargin = params.tabMargin; } - if (l1.tabPadding !== undefined) { - this.tabPadding = l1.tabPadding; + if (params.tabPadding !== undefined) { + this.tabPadding = params.tabPadding; } - if (l1.isIconAndText !== undefined) { - this.isIconAndText = l1.isIconAndText; + if (params.isIconAndText !== undefined) { + this.isIconAndText = params.isIconAndText; } - if (l1.barHeight !== undefined) { - this.barHeight = l1.barHeight; + if (params.barHeight !== undefined) { + this.barHeight = params.barHeight; } - if (l1.listener !== undefined) { - this.listener = l1.listener; + if (params.listener !== undefined) { + this.listener = params.listener; } } - updateStateVars(k1) { - this.__tabBarOptionsArray.reset(k1.tabBarOptionsArray); - this.__tabBarPosition.reset(k1.tabBarPosition); - this.__barBackgroundColor.reset(k1.barBackgroundColor); - this.__index.reset(k1.index); - this.__barOverlap.reset(k1.barOverlap); - this.__layoutMode.reset(k1.layoutMode); - } - purgeVariableDependenciesOnElmtId(j1) { - this.__tabBarOptionsArray.purgeDependencyOnElmtId(j1); - this.__tabBarPosition.purgeDependencyOnElmtId(j1); - this.__barBackgroundColor.purgeDependencyOnElmtId(j1); - this.__index.purgeDependencyOnElmtId(j1); - this.__barOverlap.purgeDependencyOnElmtId(j1); - this.__layoutMode.purgeDependencyOnElmtId(j1); - this.__selectedIndex.purgeDependencyOnElmtId(j1); - this.__isHorizontal.purgeDependencyOnElmtId(j1); - this.__barModeStatus.purgeDependencyOnElmtId(j1); - this.__directionStatus.purgeDependencyOnElmtId(j1); - this.__textMarginTop.purgeDependencyOnElmtId(j1); - this.__textMarginLeft.purgeDependencyOnElmtId(j1); - this.__tabMargin.purgeDependencyOnElmtId(j1); - this.__tabPadding.purgeDependencyOnElmtId(j1); + updateStateVars(params) { + this.__tabBarOptionsArray.reset(params.tabBarOptionsArray); + this.__tabBarPosition.reset(params.tabBarPosition); + this.__barBackgroundColor.reset(params.barBackgroundColor); + this.__index.reset(params.index); + this.__barOverlap.reset(params.barOverlap); + this.__layoutMode.reset(params.layoutMode); + } + purgeVariableDependenciesOnElmtId(rmElmtId) { + this.__tabBarOptionsArray.purgeDependencyOnElmtId(rmElmtId); + this.__tabBarPosition.purgeDependencyOnElmtId(rmElmtId); + this.__barBackgroundColor.purgeDependencyOnElmtId(rmElmtId); + this.__index.purgeDependencyOnElmtId(rmElmtId); + this.__barOverlap.purgeDependencyOnElmtId(rmElmtId); + this.__layoutMode.purgeDependencyOnElmtId(rmElmtId); + this.__selectedIndex.purgeDependencyOnElmtId(rmElmtId); + this.__isHorizontal.purgeDependencyOnElmtId(rmElmtId); + this.__barModeStatus.purgeDependencyOnElmtId(rmElmtId); + this.__directionStatus.purgeDependencyOnElmtId(rmElmtId); + this.__textMarginTop.purgeDependencyOnElmtId(rmElmtId); + this.__textMarginLeft.purgeDependencyOnElmtId(rmElmtId); + this.__tabMargin.purgeDependencyOnElmtId(rmElmtId); + this.__tabPadding.purgeDependencyOnElmtId(rmElmtId); } aboutToBeDeleted() { this.__tabBarOptionsArray.aboutToBeDeleted(); @@ -165,32 +166,32 @@ export class AtomicServiceTabs extends ViewPU { get tabBarOptionsArray() { return this.__tabBarOptionsArray.get(); } - set tabBarOptionsArray(i1) { - this.__tabBarOptionsArray.set(i1); + set tabBarOptionsArray(newValue) { + this.__tabBarOptionsArray.set(newValue); } get tabBarPosition() { return this.__tabBarPosition.get(); } - set tabBarPosition(h1) { - this.__tabBarPosition.set(h1); + set tabBarPosition(newValue) { + this.__tabBarPosition.set(newValue); } get barBackgroundColor() { return this.__barBackgroundColor.get(); } - set barBackgroundColor(g1) { - this.__barBackgroundColor.set(g1); + set barBackgroundColor(newValue) { + this.__barBackgroundColor.set(newValue); } get index() { return this.__index.get(); } - set index(f1) { - this.__index.set(f1); + set index(newValue) { + this.__index.set(newValue); } get barOverlap() { return this.__barOverlap.get(); } - set barOverlap(e1) { - this.__barOverlap.set(e1); + set barOverlap(newValue) { + this.__barOverlap.set(newValue); } get layoutMode() { return this.__layoutMode.get(); @@ -362,7 +363,7 @@ export class AtomicServiceTabs extends ViewPU { Flex.pop(); } initialRender() { - this.observeComponentCreation2((c1, d1) => { + this.observeComponentCreation2((elmtId, isInitialRender) => { Tabs.create({ barPosition: this.tabBarPosition === TabBarPosition.LEFT ? BarPosition.Start : BarPosition.End, index: this.index, @@ -392,21 +393,21 @@ export class AtomicServiceTabs extends ViewPU { Tabs.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); Tabs.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); }, Tabs); - this.observeComponentCreation2((h, i) => { + this.observeComponentCreation2((elmtId, isInitialRender) => { ForEach.create(); - const j = (l, m) => { - const n = l; - this.observeComponentCreation2((p, q) => { + const forEachItemGenFunction = (_item, index) => { + const item = _item; + this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (n) { + if (item) { this.ifElseBranchUpdateFunction(0, () => { - this.observeComponentCreation2((u, v) => { + this.observeComponentCreation2((elmtId, isInitialRender) => { TabContent.create(() => { - this.observeComponentCreation2((y, z) => { + this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (this.tabContents && this.tabContents[m]) { + if (this.tabContents && this.tabContents[index]) { this.ifElseBranchUpdateFunction(0, () => { - this.tabContents[m]?.bind(this)?.(this); + this.tabContents[index]?.bind(this)?.(); }); } else { @@ -432,7 +433,7 @@ export class AtomicServiceTabs extends ViewPU { }, If); If.pop(); }; - this.forEachUpdateFunction(h, this.tabBarOptionsArray, j, undefined, true, false); + this.forEachUpdateFunction(elmtId, this.tabBarOptionsArray, forEachItemGenFunction, undefined, true, false); }, ForEach); ForEach.pop(); Tabs.pop(); @@ -442,18 +443,17 @@ export class AtomicServiceTabs extends ViewPU { } } export class TabBarOptions { - constructor(b, c, d, e) { - this.icon = b; - this.text = c; - this.unselectedColor = d; - this.selectedColor = e; + constructor(icon, text, unselectedColor, selectedColor) { + this.icon = icon; + this.text = text; + this.unselectedColor = unselectedColor; + this.selectedColor = selectedColor; } } - export var TabBarPosition; -(function (a) { - a[a["LEFT"] = 0] = "LEFT"; - a[a["BOTTOM"] = 1] = "BOTTOM"; +(function (TabBarPosition) { + TabBarPosition[TabBarPosition["LEFT"] = 0] = "LEFT"; + TabBarPosition[TabBarPosition["BOTTOM"] = 1] = "BOTTOM"; })(TabBarPosition || (TabBarPosition = {})); export default { AtomicServiceTabs, TabBarOptions, TabBarPosition}; \ No newline at end of file -- Gitee From 8c9e6c1e1bf45de4369124dd5d7a9afbb7c41e19 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Fri, 17 Jan 2025 02:43:18 +0000 Subject: [PATCH 07/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index e024151..70dafb1 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -1,4 +1,3 @@ - /* * Copyright (c) 2024 Huawei Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); @@ -52,6 +51,8 @@ export class AtomicServiceTabs extends ViewPU { this.__tabPadding = new ObservedPropertySimplePU(MARGIN_VERTICAL_VP, this, "tabPadding"); this.isIconAndText = false; this.barHeight = undefined; + this.isListener = false; + this.isFold = false; this.listener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); this.setInitiallyProvidedValue(params); this.finalizeConstruction(); @@ -117,6 +118,12 @@ export class AtomicServiceTabs extends ViewPU { if (params.barHeight !== undefined) { this.barHeight = params.barHeight; } + if (params.isListener !== undefined) { + this.isListener = params.isListener; + } + if (params.isFold !== undefined) { + this.isFold = params.isFold; + } if (params.listener !== undefined) { this.listener = params.listener; } @@ -250,12 +257,17 @@ export class AtomicServiceTabs extends ViewPU { aboutToAppear() { this.initBarModeAndHeight(); if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { + this.isListener = true; this.startListener(); } } aboutToDisappear() { - this.listener.off('change'); - display.off('foldDisplayModeChange'); + if (this.isListener) { + this.listener.off('change'); + if (this.isFold) { + display.off('foldDisplayModeChange'); + } + } } initBarModeAndHeight() { this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; @@ -269,10 +281,13 @@ export class AtomicServiceTabs extends ViewPU { this.buildTab(); } startListener() { - if (display.isFoldable()) { - display.on('foldDisplayModeChange', (data) => { - this.initLayoutStatus(); - }); + if (canIUse('SystemCapability.Window.SessionManager')) { + if (display.isFoldable()) { + this.isFold = true; + display.on('foldDisplayModeChange', (data) => { + this.initLayoutStatus(); + }); + } } this.listener.on('change', (mediaQueryResult) => { this.initLayoutStatus(); @@ -281,7 +296,6 @@ export class AtomicServiceTabs extends ViewPU { initLayoutStatus() { const screenWidth = px2vp(display.getDefaultDisplaySync().width); const widthFlag = screenWidth / this.tabBarOptionsArray.length > 104 ? true : false; - console.log('widthFlag=== ', widthFlag); this.isHorizontal = widthFlag ? true : false; this.buildTab(); } @@ -295,8 +309,8 @@ export class AtomicServiceTabs extends ViewPU { } } getFontSize() { - return this.isHorizontal ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : - (this.isIconAndText ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_caption'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + return this.isHorizontal ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : + (this.isIconAndText ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_caption'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); } TabBuilder(item, index, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { -- Gitee From aafc2968cec87cdb4ea545d14dd158bcaf2086b4 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Fri, 17 Jan 2025 02:43:46 +0000 Subject: [PATCH 08/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- .../source/atomicservicetabs.ets | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 0a63a3d..136e58a 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -49,22 +49,29 @@ export struct AtomicServiceTabs { @State private tabPadding?: number = MARGIN_VERTICAL_VP; private isIconAndText: boolean = false; private barHeight?: Length = undefined; + private isListener: boolean = false; + private isFold: boolean = false; listener: mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); - aboutToAppear() { - this.initBarModeAndHeight() + aboutToAppear(): void { + this.initBarModeAndHeight(); if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { + this.isListener = true; this.startListener(); } } aboutToDisappear(): void { - this.listener.off('change'); - display.off('foldDisplayModeChange'); + if (this.isListener) { + this.listener.off('change'); + if (this.isFold) { + display.off('foldDisplayModeChange'); + } + } } - initBarModeAndHeight() { + initBarModeAndHeight(): void { this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { this.isIconAndText = true; @@ -76,26 +83,28 @@ export struct AtomicServiceTabs { this.buildTab(); } - startListener() { - if (display.isFoldable()) { - display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { - this.initLayoutStatus(); - }); + startListener(): void { + if (canIUse('SystemCapability.Window.SessionManager')) { + if (display.isFoldable()) { + this.isFold = true; + display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { + this.initLayoutStatus(); + }); + } } this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { this.initLayoutStatus(); }); } - initLayoutStatus() { + initLayoutStatus(): void { const screenWidth = px2vp(display.getDefaultDisplaySync().width); const widthFlag = screenWidth / this.tabBarOptionsArray.length > 104 ? true : false; - console.log('widthFlag=== ', widthFlag) this.isHorizontal = widthFlag ? true : false; this.buildTab(); } - buildTab() { + buildTab(): void { this.directionStatus = this.isHorizontal ? FlexDirection.Row : FlexDirection.Column; if (this.isIconAndText) { this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; -- Gitee From c3df0440d495fc65a0125c3d1344bd6732117466 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Sat, 18 Jan 2025 03:07:14 +0000 Subject: [PATCH 09/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- atomicservicetabs/source/atomicservicetabs.ets | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 136e58a..4d1ad94 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -13,6 +13,7 @@ * limitations under the License. */ import { display, mediaquery } from "@kit.ArkUI"; +import hilog from '@ohos.hilog'; const DEFAULT_BAR_WIDTH: number = 96; const DEFAULT_BAR_HEIGHT: number = 48; @@ -22,6 +23,7 @@ const TEXT_LIGHT_HEIGHT: number = 14; const MARGIN_HORIZONTAL_VP: number = 8 const MARGIN_VERTICAL_VP: number = 4; + @Component export struct AtomicServiceTabs { @BuilderParam tabContents?: [TabContentBuilder?, @@ -85,11 +87,15 @@ export struct AtomicServiceTabs { startListener(): void { if (canIUse('SystemCapability.Window.SessionManager')) { - if (display.isFoldable()) { - this.isFold = true; - display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { - this.initLayoutStatus(); - }); + try { + this.isFold = display.isFoldable(); + if (this.isFold) { + display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { + this.initLayoutStatus(); + }); + } + } catch (err) { + hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); } } this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { @@ -227,5 +233,4 @@ export enum TabBarPosition { } export type TabContentBuilder = () => void; - export type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean; \ No newline at end of file -- Gitee From 10134886bceaca494a26a9cade73a960c27be5bb Mon Sep 17 00:00:00 2001 From: Poisoned Date: Sat, 18 Jan 2025 03:07:38 +0000 Subject: [PATCH 10/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index 70dafb1..ff97a59 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -6,7 +6,7 @@ * * http://www.apache.org/licenses/LICENSE-2.0 * - * Unless required by applicable law or agreed to in writing, software + * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and @@ -17,6 +17,7 @@ if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } const display = requireNapi('display'); +const hilog = requireNapi('hilog'); const DEFAULT_BAR_WIDTH = 96; const DEFAULT_BAR_HEIGHT = 48; const TEXT_WIDTH_HEIGHT_SIZE = 24; @@ -282,11 +283,16 @@ export class AtomicServiceTabs extends ViewPU { } startListener() { if (canIUse('SystemCapability.Window.SessionManager')) { - if (display.isFoldable()) { - this.isFold = true; - display.on('foldDisplayModeChange', (data) => { - this.initLayoutStatus(); - }); + try { + this.isFold = display.isFoldable(); + if (this.isFold) { + display.on('foldDisplayModeChange', (data) => { + this.initLayoutStatus(); + }); + } + } + catch (err) { + hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); } } this.listener.on('change', (mediaQueryResult) => { @@ -309,8 +315,8 @@ export class AtomicServiceTabs extends ViewPU { } } getFontSize() { - return this.isHorizontal ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : - (this.isIconAndText ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_caption'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + return this.isHorizontal ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : + (this.isIconAndText ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_caption'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); } TabBuilder(item, index, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -464,6 +470,7 @@ export class TabBarOptions { this.selectedColor = selectedColor; } } + export var TabBarPosition; (function (TabBarPosition) { TabBarPosition[TabBarPosition["LEFT"] = 0] = "LEFT"; -- Gitee From 1d2d5b74930ff18c621d8a549ff435115019175c Mon Sep 17 00:00:00 2001 From: Poisoned Date: Sat, 18 Jan 2025 06:16:39 +0000 Subject: [PATCH 11/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- atomicservicetabs/interfaces/atomicservicetabs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index ff97a59..0123dd9 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -315,8 +315,8 @@ export class AtomicServiceTabs extends ViewPU { } } getFontSize() { - return this.isHorizontal ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : - (this.isIconAndText ? { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_caption'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" } : { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + return this.isHorizontal ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : + (this.isIconAndText ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_caption'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); } TabBuilder(item, index, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { -- Gitee From 222a04eadc3954d882bf08014bb4ed60b5221402 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Sat, 18 Jan 2025 10:48:48 +0000 Subject: [PATCH 12/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index 0123dd9..c05c922 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -282,19 +282,17 @@ export class AtomicServiceTabs extends ViewPU { this.buildTab(); } startListener() { - if (canIUse('SystemCapability.Window.SessionManager')) { - try { - this.isFold = display.isFoldable(); - if (this.isFold) { - display.on('foldDisplayModeChange', (data) => { - this.initLayoutStatus(); - }); - } - } - catch (err) { - hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); + try { + this.isFold = canIUse('SystemCapability.Window.SessionManager') ? display.isFoldable() : false; + if (this.isFold) { + display.on('foldDisplayModeChange', (data) => { + this.initLayoutStatus(); + }); } } + catch (err) { + hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); + } this.listener.on('change', (mediaQueryResult) => { this.initLayoutStatus(); }); -- Gitee From 6cdaffeb98bb019f500e338508499ce89b5362aa Mon Sep 17 00:00:00 2001 From: Poisoned Date: Sat, 18 Jan 2025 10:49:31 +0000 Subject: [PATCH 13/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- atomicservicetabs/source/atomicservicetabs.ets | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 4d1ad94..755a678 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -86,17 +86,15 @@ export struct AtomicServiceTabs { } startListener(): void { - if (canIUse('SystemCapability.Window.SessionManager')) { - try { - this.isFold = display.isFoldable(); - if (this.isFold) { - display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { - this.initLayoutStatus(); - }); - } - } catch (err) { - hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); + try { + this.isFold = canIUse('SystemCapability.Window.SessionManager') ? display.isFoldable() : false; + if (this.isFold) { + display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { + this.initLayoutStatus(); + }); } + } catch (err) { + hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); } this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { this.initLayoutStatus(); -- Gitee From 6d8b1100c8bf2ceb5cf4912f404610623ddcf77f Mon Sep 17 00:00:00 2001 From: Poisoned Date: Tue, 21 Jan 2025 08:51:55 +0000 Subject: [PATCH 14/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 65 ++++++++++++------- 1 file changed, 42 insertions(+), 23 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index c05c922..e6f3a9a 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -6,7 +6,7 @@ * * http://www.apache.org/licenses/LICENSE-2.0 * - * Unless required by applicable law or agreed to in writing, software + * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and @@ -45,17 +45,18 @@ export class AtomicServiceTabs extends ViewPU { this.__selectedIndex = new ObservedPropertySimplePU(0, this, "selectedIndex"); this.__isHorizontal = new ObservedPropertySimplePU(false, this, "isHorizontal"); this.__barModeStatus = new ObservedPropertySimplePU(BarMode.Fixed, this, "barModeStatus"); - this.__directionStatus = new ObservedPropertySimplePU(FlexDirection.Column, this, "directionStatus"); this.__textMarginTop = new ObservedPropertySimplePU(undefined, this, "textMarginTop"); this.__textMarginLeft = new ObservedPropertySimplePU(undefined, this, "textMarginLeft"); this.__tabMargin = new ObservedPropertySimplePU(undefined, this, "tabMargin"); this.__tabPadding = new ObservedPropertySimplePU(MARGIN_VERTICAL_VP, this, "tabPadding"); + this.__barHeight = new ObservedPropertyObjectPU(undefined, this, "barHeight"); this.isIconAndText = false; - this.barHeight = undefined; this.isListener = false; this.isFold = false; this.listener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); this.setInitiallyProvidedValue(params); + this.declareWatch("tabBarPosition", this.tabBarPositionWatch); + this.declareWatch("layoutMode", this.layoutModeWatch); this.finalizeConstruction(); } setInitiallyProvidedValue(params) { @@ -98,9 +99,6 @@ export class AtomicServiceTabs extends ViewPU { if (params.barModeStatus !== undefined) { this.barModeStatus = params.barModeStatus; } - if (params.directionStatus !== undefined) { - this.directionStatus = params.directionStatus; - } if (params.textMarginTop !== undefined) { this.textMarginTop = params.textMarginTop; } @@ -113,12 +111,12 @@ export class AtomicServiceTabs extends ViewPU { if (params.tabPadding !== undefined) { this.tabPadding = params.tabPadding; } - if (params.isIconAndText !== undefined) { - this.isIconAndText = params.isIconAndText; - } if (params.barHeight !== undefined) { this.barHeight = params.barHeight; } + if (params.isIconAndText !== undefined) { + this.isIconAndText = params.isIconAndText; + } if (params.isListener !== undefined) { this.isListener = params.isListener; } @@ -147,11 +145,11 @@ export class AtomicServiceTabs extends ViewPU { this.__selectedIndex.purgeDependencyOnElmtId(rmElmtId); this.__isHorizontal.purgeDependencyOnElmtId(rmElmtId); this.__barModeStatus.purgeDependencyOnElmtId(rmElmtId); - this.__directionStatus.purgeDependencyOnElmtId(rmElmtId); this.__textMarginTop.purgeDependencyOnElmtId(rmElmtId); this.__textMarginLeft.purgeDependencyOnElmtId(rmElmtId); this.__tabMargin.purgeDependencyOnElmtId(rmElmtId); this.__tabPadding.purgeDependencyOnElmtId(rmElmtId); + this.__barHeight.purgeDependencyOnElmtId(rmElmtId); } aboutToBeDeleted() { this.__tabBarOptionsArray.aboutToBeDeleted(); @@ -163,11 +161,11 @@ export class AtomicServiceTabs extends ViewPU { this.__selectedIndex.aboutToBeDeleted(); this.__isHorizontal.aboutToBeDeleted(); this.__barModeStatus.aboutToBeDeleted(); - this.__directionStatus.aboutToBeDeleted(); this.__textMarginTop.aboutToBeDeleted(); this.__textMarginLeft.aboutToBeDeleted(); this.__tabMargin.aboutToBeDeleted(); this.__tabPadding.aboutToBeDeleted(); + this.__barHeight.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } @@ -225,12 +223,6 @@ export class AtomicServiceTabs extends ViewPU { set barModeStatus(newValue) { this.__barModeStatus.set(newValue); } - get directionStatus() { - return this.__directionStatus.get(); - } - set directionStatus(newValue) { - this.__directionStatus.set(newValue); - } get textMarginTop() { return this.__textMarginTop.get(); } @@ -255,6 +247,12 @@ export class AtomicServiceTabs extends ViewPU { set tabPadding(newValue) { this.__tabPadding.set(newValue); } + get barHeight() { + return this.__barHeight.get(); + } + set barHeight(newValue) { + this.__barHeight.set(newValue); + } aboutToAppear() { this.initBarModeAndHeight(); if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { @@ -270,6 +268,26 @@ export class AtomicServiceTabs extends ViewPU { } } } + tabBarPositionWatch() { + if (this.tabBarPosition === TabBarPosition.BOTTOM) { + this.barModeStatus = BarMode.Fixed; + this.barHeight = undefined; + } + else { + this.barModeStatus = BarMode.Scrollable; + this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); + } + this.buildTab(); + } + layoutModeWatch() { + if (this.layoutMode === LayoutMode.AUTO) { + this.initLayoutStatus(); + } + else { + this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; + this.buildTab(); + } + } initBarModeAndHeight() { this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { @@ -304,7 +322,6 @@ export class AtomicServiceTabs extends ViewPU { this.buildTab(); } buildTab() { - this.directionStatus = this.isHorizontal ? FlexDirection.Row : FlexDirection.Column; if (this.isIconAndText) { this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; this.textMarginLeft = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; @@ -316,16 +333,16 @@ export class AtomicServiceTabs extends ViewPU { return this.isHorizontal ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : (this.isIconAndText ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_caption'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); } - TabBuilder(item, index, parent = null) { + TabBuilder(item, index, flex, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Flex.create({ - direction: this.directionStatus, + direction: flex, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }); Flex.padding({ left: this.tabPadding, right: this.tabPadding }); Flex.margin({ left: this.tabMargin, right: this.tabMargin }); - Flex.height(this.barHeight); + Flex.height(ObservedObject.GetRawObject(this.barHeight)); }, Flex); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -435,8 +452,10 @@ export class AtomicServiceTabs extends ViewPU { }, If); If.pop(); }); - TabContent.tabBar({ builder: () => { - this.TabBuilder.call(this, item, index); + TabContent.tabBar(this.isHorizontal ? { builder: () => { + this.TabBuilder.call(this, item, index, FlexDirection.Row); + } } : { builder: () => { + this.TabBuilder.call(this, item, index, FlexDirection.Column); } }); TabContent.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); TabContent.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); -- Gitee From 904d7b8c1c107efbeea6a0a8080c74c3b6cb82f8 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Tue, 21 Jan 2025 08:52:20 +0000 Subject: [PATCH 15/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- .../source/atomicservicetabs.ets | 36 ++++++++++++++----- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 755a678..8a32494 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -32,11 +32,11 @@ export struct AtomicServiceTabs { TabContentBuilder?, TabContentBuilder?]; @Prop tabBarOptionsArray: [TabBarOptions, TabBarOptions, TabBarOptions?, TabBarOptions?, TabBarOptions?]; - @Prop tabBarPosition?: TabBarPosition = TabBarPosition.BOTTOM; + @Prop @Watch('tabBarPositionWatch') tabBarPosition?: TabBarPosition = TabBarPosition.BOTTOM; @Prop barBackgroundColor?: ResourceColor = Color.Transparent; @Prop index?: number | undefined = 0; @Prop barOverlap?: boolean = true; - @Prop layoutMode?: LayoutMode = LayoutMode.VERTICAL; + @Prop @Watch('layoutModeWatch') layoutMode?: LayoutMode = LayoutMode.VERTICAL; controller?: TabsController = new TabsController(); onChange?: Callback; onTabBarClick?: Callback; @@ -44,13 +44,12 @@ export struct AtomicServiceTabs { @State private selectedIndex: number = 0; @State private isHorizontal: boolean = false; @State private barModeStatus: BarMode = BarMode.Fixed; - @State private directionStatus: FlexDirection = FlexDirection.Column; @State private textMarginTop?: number = undefined; @State private textMarginLeft?: number = undefined; @State private tabMargin?: number = undefined; @State private tabPadding?: number = MARGIN_VERTICAL_VP; + @State private barHeight?: Length = undefined; private isIconAndText: boolean = false; - private barHeight?: Length = undefined; private isListener: boolean = false; private isFold: boolean = false; listener: mediaquery.MediaQueryListener = @@ -73,6 +72,26 @@ export struct AtomicServiceTabs { } } + tabBarPositionWatch(): void { + if (this.tabBarPosition === TabBarPosition.BOTTOM) { + this.barModeStatus = BarMode.Fixed; + this.barHeight = undefined; + } else { + this.barModeStatus = BarMode.Scrollable; + this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); + } + this.buildTab(); + } + + layoutModeWatch(): void { + if (this.layoutMode === LayoutMode.AUTO) { + this.initLayoutStatus(); + } else { + this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; + this.buildTab(); + } + } + initBarModeAndHeight(): void { this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { @@ -109,7 +128,6 @@ export struct AtomicServiceTabs { } buildTab(): void { - this.directionStatus = this.isHorizontal ? FlexDirection.Row : FlexDirection.Column; if (this.isIconAndText) { this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; this.textMarginLeft = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; @@ -125,9 +143,9 @@ export struct AtomicServiceTabs { } @Builder - TabBuilder(item: TabBarOptions, index: number) { + TabBuilder(item: TabBarOptions, index: number, flex: FlexDirection) { Flex({ - direction: this.directionStatus, + direction: flex, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -177,7 +195,8 @@ export struct AtomicServiceTabs { } } .tabBar( - this.TabBuilder(item, index) + this.isHorizontal ? this.TabBuilder(item, index, FlexDirection.Row) : + this.TabBuilder(item, index, FlexDirection.Column) ) .width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') .height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') @@ -231,4 +250,5 @@ export enum TabBarPosition { } export type TabContentBuilder = () => void; + export type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean; \ No newline at end of file -- Gitee From 9b94789fba285543b45944b89b47ee8e10086a41 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Tue, 21 Jan 2025 14:36:54 +0000 Subject: [PATCH 16/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index e6f3a9a..d52bc0d 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -268,6 +268,22 @@ export class AtomicServiceTabs extends ViewPU { } } } + /** + * 初始化 图文布局状态值，barheight高度 + */ + initBarModeAndHeight() { + if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { + this.isIconAndText = true; + } + if (this.tabBarPosition === TabBarPosition.LEFT) { + this.barModeStatus = BarMode.Scrollable; + this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); + } + this.buildTab(); + } + /** + * 监听折叠展开和屏幕旋转事件影响 图文布局样式 + */ tabBarPositionWatch() { if (this.tabBarPosition === TabBarPosition.BOTTOM) { this.barModeStatus = BarMode.Fixed; @@ -280,23 +296,6 @@ export class AtomicServiceTabs extends ViewPU { this.buildTab(); } layoutModeWatch() { - if (this.layoutMode === LayoutMode.AUTO) { - this.initLayoutStatus(); - } - else { - this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; - this.buildTab(); - } - } - initBarModeAndHeight() { - this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; - if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { - this.isIconAndText = true; - } - if (this.tabBarPosition === TabBarPosition.LEFT) { - this.barModeStatus = BarMode.Scrollable; - this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); - } this.buildTab(); } startListener() { @@ -304,7 +303,7 @@ export class AtomicServiceTabs extends ViewPU { this.isFold = canIUse('SystemCapability.Window.SessionManager') ? display.isFoldable() : false; if (this.isFold) { display.on('foldDisplayModeChange', (data) => { - this.initLayoutStatus(); + this.buildTab(); }); } } @@ -312,16 +311,21 @@ export class AtomicServiceTabs extends ViewPU { hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); } this.listener.on('change', (mediaQueryResult) => { - this.initLayoutStatus(); + this.buildTab(); }); } - initLayoutStatus() { - const screenWidth = px2vp(display.getDefaultDisplaySync().width); - const widthFlag = screenWidth / this.tabBarOptionsArray.length > 104 ? true : false; - this.isHorizontal = widthFlag ? true : false; - this.buildTab(); - } + /** + * 构建组件尺寸参数 + */ buildTab() { + if (this.layoutMode === LayoutMode.AUTO) { + const screenWidth = px2vp(display.getDefaultDisplaySync().width); + this.isHorizontal = + this.tabBarPosition == TabBarPosition.LEFT ? false : screenWidth / this.tabBarOptionsArray.length > 104; + } + else { + this.isHorizontal = this.layoutMode === LayoutMode.HORIZONTAL; + } if (this.isIconAndText) { this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; this.textMarginLeft = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; @@ -487,7 +491,6 @@ export class TabBarOptions { this.selectedColor = selectedColor; } } - export var TabBarPosition; (function (TabBarPosition) { TabBarPosition[TabBarPosition["LEFT"] = 0] = "LEFT"; -- Gitee From 72257848e475bcdd3d4c43a5558e64a4f3d93aba Mon Sep 17 00:00:00 2001 From: Poisoned Date: Tue, 21 Jan 2025 14:37:25 +0000 Subject: [PATCH 17/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- .../source/atomicservicetabs.ets | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 8a32494..0cd3b65 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -72,6 +72,23 @@ export struct AtomicServiceTabs { } } + /** + * 初始化 图文布局状态值，barheight高度 + */ + initBarModeAndHeight(): void { + if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { + this.isIconAndText = true; + } + if (this.tabBarPosition === TabBarPosition.LEFT) { + this.barModeStatus = BarMode.Scrollable; + this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); + } + this.buildTab(); + } + + /** + * 监听折叠展开和屏幕旋转事件影响 图文布局样式 + */ tabBarPositionWatch(): void { if (this.tabBarPosition === TabBarPosition.BOTTOM) { this.barModeStatus = BarMode.Fixed; @@ -84,23 +101,6 @@ export struct AtomicServiceTabs { } layoutModeWatch(): void { - if (this.layoutMode === LayoutMode.AUTO) { - this.initLayoutStatus(); - } else { - this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; - this.buildTab(); - } - } - - initBarModeAndHeight(): void { - this.isHorizontal = (this.layoutMode === LayoutMode.HORIZONTAL) ? true : false; - if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { - this.isIconAndText = true; - } - if (this.tabBarPosition === TabBarPosition.LEFT) { - this.barModeStatus = BarMode.Scrollable; - this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); - } this.buildTab(); } @@ -109,25 +109,28 @@ export struct AtomicServiceTabs { this.isFold = canIUse('SystemCapability.Window.SessionManager') ? display.isFoldable() : false; if (this.isFold) { display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { - this.initLayoutStatus(); + this.buildTab(); }); } } catch (err) { hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); } this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { - this.initLayoutStatus(); + this.buildTab(); }); } - initLayoutStatus(): void { - const screenWidth = px2vp(display.getDefaultDisplaySync().width); - const widthFlag = screenWidth / this.tabBarOptionsArray.length > 104 ? true : false; - this.isHorizontal = widthFlag ? true : false; - this.buildTab(); - } - + /** + * 构建组件尺寸参数 + */ buildTab(): void { + if (this.layoutMode === LayoutMode.AUTO) { + const screenWidth = px2vp(display.getDefaultDisplaySync().width); + this.isHorizontal = + this.tabBarPosition == TabBarPosition.LEFT ? false : screenWidth / this.tabBarOptionsArray.length > 104; + } else { + this.isHorizontal = this.layoutMode === LayoutMode.HORIZONTAL; + } if (this.isIconAndText) { this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; this.textMarginLeft = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; -- Gitee From 9b060839eb5997f43353d3f59e46c7744577cb71 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 22 Jan 2025 02:01:46 +0000 Subject: [PATCH 18/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- atomicservicetabs/interfaces/atomicservicetabs.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index d52bc0d..eea5ac5 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -53,6 +53,7 @@ export class AtomicServiceTabs extends ViewPU { this.isIconAndText = false; this.isListener = false; this.isFold = false; + this.screenWidth = 0; this.listener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); this.setInitiallyProvidedValue(params); this.declareWatch("tabBarPosition", this.tabBarPositionWatch); @@ -123,6 +124,9 @@ export class AtomicServiceTabs extends ViewPU { if (params.isFold !== undefined) { this.isFold = params.isFold; } + if (params.screenWidth !== undefined) { + this.screenWidth = params.screenWidth; + } if (params.listener !== undefined) { this.listener = params.listener; } @@ -256,7 +260,6 @@ export class AtomicServiceTabs extends ViewPU { aboutToAppear() { this.initBarModeAndHeight(); if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { - this.isListener = true; this.startListener(); } } @@ -299,6 +302,7 @@ export class AtomicServiceTabs extends ViewPU { this.buildTab(); } startListener() { + this.isListener = true; try { this.isFold = canIUse('SystemCapability.Window.SessionManager') ? display.isFoldable() : false; if (this.isFold) { @@ -319,9 +323,9 @@ export class AtomicServiceTabs extends ViewPU { */ buildTab() { if (this.layoutMode === LayoutMode.AUTO) { - const screenWidth = px2vp(display.getDefaultDisplaySync().width); + this.screenWidth = px2vp(display.getDefaultDisplaySync().width); this.isHorizontal = - this.tabBarPosition == TabBarPosition.LEFT ? false : screenWidth / this.tabBarOptionsArray.length > 104; + this.tabBarPosition == TabBarPosition.LEFT ? false : this.screenWidth / this.tabBarOptionsArray.length > 104; } else { this.isHorizontal = this.layoutMode === LayoutMode.HORIZONTAL; @@ -491,6 +495,7 @@ export class TabBarOptions { this.selectedColor = selectedColor; } } + export var TabBarPosition; (function (TabBarPosition) { TabBarPosition[TabBarPosition["LEFT"] = 0] = "LEFT"; -- Gitee From 3c2d5f8b510de5b3fc3c213c64b82e53f1813bdc Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 22 Jan 2025 02:02:11 +0000 Subject: [PATCH 19/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- atomicservicetabs/source/atomicservicetabs.ets | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 0cd3b65..d1f2592 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -52,13 +52,13 @@ export struct AtomicServiceTabs { private isIconAndText: boolean = false; private isListener: boolean = false; private isFold: boolean = false; + private screenWidth: number = 0; listener: mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); aboutToAppear(): void { this.initBarModeAndHeight(); if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { - this.isListener = true; this.startListener(); } } @@ -105,6 +105,7 @@ export struct AtomicServiceTabs { } startListener(): void { + this.isListener = true; try { this.isFold = canIUse('SystemCapability.Window.SessionManager') ? display.isFoldable() : false; if (this.isFold) { @@ -118,6 +119,7 @@ export struct AtomicServiceTabs { this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { this.buildTab(); }); + } /** @@ -125,9 +127,9 @@ export struct AtomicServiceTabs { */ buildTab(): void { if (this.layoutMode === LayoutMode.AUTO) { - const screenWidth = px2vp(display.getDefaultDisplaySync().width); + this.screenWidth = px2vp(display.getDefaultDisplaySync().width); this.isHorizontal = - this.tabBarPosition == TabBarPosition.LEFT ? false : screenWidth / this.tabBarOptionsArray.length > 104; + this.tabBarPosition == TabBarPosition.LEFT ? false : this.screenWidth / this.tabBarOptionsArray.length > 104; } else { this.isHorizontal = this.layoutMode === LayoutMode.HORIZONTAL; } @@ -253,5 +255,4 @@ export enum TabBarPosition { } export type TabContentBuilder = () => void; - export type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean; \ No newline at end of file -- Gitee From eec79fd27ea17ff833b18f9a93195e9d6fd9f6fd Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 22 Jan 2025 11:40:37 +0000 Subject: [PATCH 20/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- atomicservicetabs/source/atomicservicetabs.ets | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index d1f2592..7741408 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -129,7 +129,7 @@ export struct AtomicServiceTabs { if (this.layoutMode === LayoutMode.AUTO) { this.screenWidth = px2vp(display.getDefaultDisplaySync().width); this.isHorizontal = - this.tabBarPosition == TabBarPosition.LEFT ? false : this.screenWidth / this.tabBarOptionsArray.length > 104; + this.tabBarPosition === TabBarPosition.LEFT ? false : this.screenWidth / this.tabBarOptionsArray.length > 104; } else { this.isHorizontal = this.layoutMode === LayoutMode.HORIZONTAL; } -- Gitee From 33e66d4fc8ad1039ab04ed9659ab0f4f5573d3bd Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 22 Jan 2025 11:41:04 +0000 Subject: [PATCH 21/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- atomicservicetabs/interfaces/atomicservicetabs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index eea5ac5..378ef99 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -325,7 +325,7 @@ export class AtomicServiceTabs extends ViewPU { if (this.layoutMode === LayoutMode.AUTO) { this.screenWidth = px2vp(display.getDefaultDisplaySync().width); this.isHorizontal = - this.tabBarPosition == TabBarPosition.LEFT ? false : this.screenWidth / this.tabBarOptionsArray.length > 104; + this.tabBarPosition === TabBarPosition.LEFT ? false : this.screenWidth / this.tabBarOptionsArray.length > 104; } else { this.isHorizontal = this.layoutMode === LayoutMode.HORIZONTAL; -- Gitee From 99cf3fbf9ff74e60452f2a1667e4e0e366b9c395 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 5 Feb 2025 06:57:54 +0000 Subject: [PATCH 22/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- .../source/atomicservicetabs.ets | 155 ++++-------------- 1 file changed, 33 insertions(+), 122 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 7741408..bda1f41 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -12,148 +12,63 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { display, mediaquery } from "@kit.ArkUI"; -import hilog from '@ohos.hilog'; const DEFAULT_BAR_WIDTH: number = 96; const DEFAULT_BAR_HEIGHT: number = 48; const TEXT_WIDTH_HEIGHT_SIZE: number = 24; const TEXT_FONT_WEIGHT: number = 500; const TEXT_LIGHT_HEIGHT: number = 14; -const MARGIN_HORIZONTAL_VP: number = 8 -const MARGIN_VERTICAL_VP: number = 4; +const TEXT_FONT_SIZE = $r('sys.float.ohos_id_text_size_button3'); @Component export struct AtomicServiceTabs { @BuilderParam tabContents?: [TabContentBuilder?, - TabContentBuilder?, - TabContentBuilder?, - TabContentBuilder?, - TabContentBuilder?]; + TabContentBuilder?, + TabContentBuilder?, + TabContentBuilder?, + TabContentBuilder?]; @Prop tabBarOptionsArray: [TabBarOptions, TabBarOptions, TabBarOptions?, TabBarOptions?, TabBarOptions?]; @Prop @Watch('tabBarPositionWatch') tabBarPosition?: TabBarPosition = TabBarPosition.BOTTOM; @Prop barBackgroundColor?: ResourceColor = Color.Transparent; @Prop index?: number | undefined = 0; @Prop barOverlap?: boolean = true; - @Prop @Watch('layoutModeWatch') layoutMode?: LayoutMode = LayoutMode.VERTICAL; + @Prop layoutMode?: LayoutMode = LayoutMode.VERTICAL; controller?: TabsController = new TabsController(); onChange?: Callback; onTabBarClick?: Callback; onContentWillChange?: OnContentWillChangeCallback; @State private selectedIndex: number = 0; - @State private isHorizontal: boolean = false; - @State private barModeStatus: BarMode = BarMode.Fixed; - @State private textMarginTop?: number = undefined; - @State private textMarginLeft?: number = undefined; - @State private tabMargin?: number = undefined; - @State private tabPadding?: number = MARGIN_VERTICAL_VP; - @State private barHeight?: Length = undefined; - private isIconAndText: boolean = false; - private isListener: boolean = false; - private isFold: boolean = false; - private screenWidth: number = 0; - listener: mediaquery.MediaQueryListener = - this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); + @State private barModeStatus?: BarMode = BarMode.Fixed; + @State private tabBarHeight?: Length = undefined; + private isIconTextExist: boolean = false; aboutToAppear(): void { - this.initBarModeAndHeight(); - if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { - this.startListener(); - } - } - - aboutToDisappear(): void { - if (this.isListener) { - this.listener.off('change'); - if (this.isFold) { - display.off('foldDisplayModeChange'); - } - } - } - - /** - * 初始化 图文布局状态值，barheight高度 - */ - initBarModeAndHeight(): void { if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { - this.isIconAndText = true; - } - if (this.tabBarPosition === TabBarPosition.LEFT) { - this.barModeStatus = BarMode.Scrollable; - this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); + this.barModeStatus = undefined; + this.isIconTextExist = true; } - this.buildTab(); + this.tabBarPositionWatch(); } /** - * 监听折叠展开和屏幕旋转事件影响 图文布局样式 + * 监听位置变化影响tabbar侧边高度 布局样式 */ tabBarPositionWatch(): void { - if (this.tabBarPosition === TabBarPosition.BOTTOM) { - this.barModeStatus = BarMode.Fixed; - this.barHeight = undefined; - } else { - this.barModeStatus = BarMode.Scrollable; - this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); - } - this.buildTab(); - } - - layoutModeWatch(): void { - this.buildTab(); - } - - startListener(): void { - this.isListener = true; - try { - this.isFold = canIUse('SystemCapability.Window.SessionManager') ? display.isFoldable() : false; - if (this.isFold) { - display.on('foldDisplayModeChange', (data: display.FoldDisplayMode) => { - this.buildTab(); - }); + if( !this.isIconTextExist ){ + if (this.tabBarPosition === TabBarPosition.LEFT) { + this.tabBarHeight = (50 / this.tabBarOptionsArray.length + '%'); + this.barModeStatus = BarMode.Scrollable; + }else { + this.barModeStatus = BarMode.Fixed; + this.tabBarHeight = undefined; } - } catch (err) { - hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); } - this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { - this.buildTab(); - }); - - } - - /** - * 构建组件尺寸参数 - */ - buildTab(): void { - if (this.layoutMode === LayoutMode.AUTO) { - this.screenWidth = px2vp(display.getDefaultDisplaySync().width); - this.isHorizontal = - this.tabBarPosition === TabBarPosition.LEFT ? false : this.screenWidth / this.tabBarOptionsArray.length > 104; - } else { - this.isHorizontal = this.layoutMode === LayoutMode.HORIZONTAL; - } - if (this.isIconAndText) { - this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; - this.textMarginLeft = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; - this.tabPadding = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; - this.tabMargin = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; - } - } - - getFontSize(): Resource { - return this.isHorizontal ? $r('sys.float.ohos_id_text_size_button3') : - (this.isIconAndText ? $r('sys.float.ohos_id_text_size_caption') : - $r('sys.float.ohos_id_text_size_button3')); } @Builder - TabBuilder(item: TabBarOptions, index: number, flex: FlexDirection) { - Flex({ - direction: flex, - alignItems: ItemAlign.Center, - justifyContent: FlexAlign.Center - }) { + TabBuilder(item: TabBarOptions, index: number) { + Column() { if (item.icon) { Image(item.icon as ResourceStr) .width(TEXT_WIDTH_HEIGHT_SIZE) @@ -162,28 +77,21 @@ export struct AtomicServiceTabs { .fillColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor) .backgroundColor(Color.Transparent) .flexShrink(0) - } - if (item.text) { + } else { Text(item.text) .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1) .fontColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor) - .maxFontSize(this.getFontSize()) + .maxFontSize(TEXT_FONT_SIZE) .minFontSize(9) .fontWeight(TEXT_FONT_WEIGHT) .lineHeight(TEXT_LIGHT_HEIGHT) .textAlign(TextAlign.Center) .focusOnTouch(true) .backgroundColor(Color.Transparent) - .margin({ - top: this.textMarginTop, - left: this.textMarginLeft - }) } } - .padding({ left: this.tabPadding, right: this.tabPadding }) - .margin({ left: this.tabMargin, right: this.tabMargin }) - .height(this.barHeight) + .height(this.tabBarHeight) } build() { @@ -200,8 +108,11 @@ export struct AtomicServiceTabs { } } .tabBar( - this.isHorizontal ? this.TabBuilder(item, index, FlexDirection.Row) : - this.TabBuilder(item, index, FlexDirection.Column) + this.isIconTextExist ? + BottomTabBarStyle.of(item.icon, item.text).layoutMode(this.layoutMode) + .labelStyle({ unselectedColor: item.unselectedColor, selectedColor: item.selectedColor }) + .iconStyle({ unselectedColor: item.unselectedColor, selectedColor: item.selectedColor }) : + this.TabBuilder(item, index) ) .width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') .height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') @@ -227,8 +138,8 @@ export struct AtomicServiceTabs { }) .onTabBarClick(this.onTabBarClick) .onContentWillChange(this.onContentWillChange) - .barWidth((this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') - .barHeight((this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') + .barWidth( this.isIconTextExist? undefined: (this.tabBarPosition === TabBarPosition.LEFT ) ? DEFAULT_BAR_WIDTH : '100%') + .barHeight(this.isIconTextExist? undefined:(this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') .width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') .height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') } @@ -241,7 +152,7 @@ export class TabBarOptions { public selectedColor?: ResourceColor; constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr, - unselectedColor?: ResourceColor, selectedColor?: ResourceColor) { + unselectedColor?: ResourceColor, selectedColor?: ResourceColor) { this.icon = icon; this.text = text; this.unselectedColor = unselectedColor; -- Gitee From 3ba10ee564dc57f0bc1c825a3d4cb1b7eabf89f3 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 5 Feb 2025 06:58:23 +0000 Subject: [PATCH 23/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 240 +++--------------- 1 file changed, 38 insertions(+), 202 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index 378ef99..e2262e9 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -6,7 +6,7 @@ * * http://www.apache.org/licenses/LICENSE-2.0 * - * Unless required by applicable law or agreed to in writing, software + * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and @@ -16,15 +16,12 @@ if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } -const display = requireNapi('display'); -const hilog = requireNapi('hilog'); const DEFAULT_BAR_WIDTH = 96; const DEFAULT_BAR_HEIGHT = 48; const TEXT_WIDTH_HEIGHT_SIZE = 24; const TEXT_FONT_WEIGHT = 500; const TEXT_LIGHT_HEIGHT = 14; -const MARGIN_HORIZONTAL_VP = 8; -const MARGIN_VERTICAL_VP = 4; +const TEXT_FONT_SIZE = { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; export class AtomicServiceTabs extends ViewPU { constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); @@ -43,21 +40,11 @@ export class AtomicServiceTabs extends ViewPU { this.onTabBarClick = undefined; this.onContentWillChange = undefined; this.__selectedIndex = new ObservedPropertySimplePU(0, this, "selectedIndex"); - this.__isHorizontal = new ObservedPropertySimplePU(false, this, "isHorizontal"); this.__barModeStatus = new ObservedPropertySimplePU(BarMode.Fixed, this, "barModeStatus"); - this.__textMarginTop = new ObservedPropertySimplePU(undefined, this, "textMarginTop"); - this.__textMarginLeft = new ObservedPropertySimplePU(undefined, this, "textMarginLeft"); - this.__tabMargin = new ObservedPropertySimplePU(undefined, this, "tabMargin"); - this.__tabPadding = new ObservedPropertySimplePU(MARGIN_VERTICAL_VP, this, "tabPadding"); - this.__barHeight = new ObservedPropertyObjectPU(undefined, this, "barHeight"); - this.isIconAndText = false; - this.isListener = false; - this.isFold = false; - this.screenWidth = 0; - this.listener = this.getUIContext().getMediaQuery().matchMediaSync('(orientation: landscape)'); + this.__tabBarHeight = new ObservedPropertyObjectPU(undefined, this, "tabBarHeight"); + this.isIconTextExist = false; this.setInitiallyProvidedValue(params); this.declareWatch("tabBarPosition", this.tabBarPositionWatch); - this.declareWatch("layoutMode", this.layoutModeWatch); this.finalizeConstruction(); } setInitiallyProvidedValue(params) { @@ -94,41 +81,14 @@ export class AtomicServiceTabs extends ViewPU { if (params.selectedIndex !== undefined) { this.selectedIndex = params.selectedIndex; } - if (params.isHorizontal !== undefined) { - this.isHorizontal = params.isHorizontal; - } if (params.barModeStatus !== undefined) { this.barModeStatus = params.barModeStatus; } - if (params.textMarginTop !== undefined) { - this.textMarginTop = params.textMarginTop; - } - if (params.textMarginLeft !== undefined) { - this.textMarginLeft = params.textMarginLeft; - } - if (params.tabMargin !== undefined) { - this.tabMargin = params.tabMargin; - } - if (params.tabPadding !== undefined) { - this.tabPadding = params.tabPadding; - } - if (params.barHeight !== undefined) { - this.barHeight = params.barHeight; - } - if (params.isIconAndText !== undefined) { - this.isIconAndText = params.isIconAndText; - } - if (params.isListener !== undefined) { - this.isListener = params.isListener; + if (params.tabBarHeight !== undefined) { + this.tabBarHeight = params.tabBarHeight; } - if (params.isFold !== undefined) { - this.isFold = params.isFold; - } - if (params.screenWidth !== undefined) { - this.screenWidth = params.screenWidth; - } - if (params.listener !== undefined) { - this.listener = params.listener; + if (params.isIconTextExist !== undefined) { + this.isIconTextExist = params.isIconTextExist; } } updateStateVars(params) { @@ -147,13 +107,8 @@ export class AtomicServiceTabs extends ViewPU { this.__barOverlap.purgeDependencyOnElmtId(rmElmtId); this.__layoutMode.purgeDependencyOnElmtId(rmElmtId); this.__selectedIndex.purgeDependencyOnElmtId(rmElmtId); - this.__isHorizontal.purgeDependencyOnElmtId(rmElmtId); this.__barModeStatus.purgeDependencyOnElmtId(rmElmtId); - this.__textMarginTop.purgeDependencyOnElmtId(rmElmtId); - this.__textMarginLeft.purgeDependencyOnElmtId(rmElmtId); - this.__tabMargin.purgeDependencyOnElmtId(rmElmtId); - this.__tabPadding.purgeDependencyOnElmtId(rmElmtId); - this.__barHeight.purgeDependencyOnElmtId(rmElmtId); + this.__tabBarHeight.purgeDependencyOnElmtId(rmElmtId); } aboutToBeDeleted() { this.__tabBarOptionsArray.aboutToBeDeleted(); @@ -163,13 +118,8 @@ export class AtomicServiceTabs extends ViewPU { this.__barOverlap.aboutToBeDeleted(); this.__layoutMode.aboutToBeDeleted(); this.__selectedIndex.aboutToBeDeleted(); - this.__isHorizontal.aboutToBeDeleted(); this.__barModeStatus.aboutToBeDeleted(); - this.__textMarginTop.aboutToBeDeleted(); - this.__textMarginLeft.aboutToBeDeleted(); - this.__tabMargin.aboutToBeDeleted(); - this.__tabPadding.aboutToBeDeleted(); - this.__barHeight.aboutToBeDeleted(); + this.__tabBarHeight.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } @@ -215,143 +165,45 @@ export class AtomicServiceTabs extends ViewPU { set selectedIndex(newValue) { this.__selectedIndex.set(newValue); } - get isHorizontal() { - return this.__isHorizontal.get(); - } - set isHorizontal(newValue) { - this.__isHorizontal.set(newValue); - } get barModeStatus() { return this.__barModeStatus.get(); } set barModeStatus(newValue) { this.__barModeStatus.set(newValue); } - get textMarginTop() { - return this.__textMarginTop.get(); - } - set textMarginTop(newValue) { - this.__textMarginTop.set(newValue); - } - get textMarginLeft() { - return this.__textMarginLeft.get(); - } - set textMarginLeft(newValue) { - this.__textMarginLeft.set(newValue); + get tabBarHeight() { + return this.__tabBarHeight.get(); } - get tabMargin() { - return this.__tabMargin.get(); - } - set tabMargin(newValue) { - this.__tabMargin.set(newValue); - } - get tabPadding() { - return this.__tabPadding.get(); - } - set tabPadding(newValue) { - this.__tabPadding.set(newValue); - } - get barHeight() { - return this.__barHeight.get(); - } - set barHeight(newValue) { - this.__barHeight.set(newValue); + set tabBarHeight(newValue) { + this.__tabBarHeight.set(newValue); } aboutToAppear() { - this.initBarModeAndHeight(); - if (this.isIconAndText && this.layoutMode === LayoutMode.AUTO && this.tabBarPosition === TabBarPosition.BOTTOM) { - this.startListener(); - } - } - aboutToDisappear() { - if (this.isListener) { - this.listener.off('change'); - if (this.isFold) { - display.off('foldDisplayModeChange'); - } - } - } - /** - * 初始化 图文布局状态值，barheight高度 - */ - initBarModeAndHeight() { if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { - this.isIconAndText = true; - } - if (this.tabBarPosition === TabBarPosition.LEFT) { - this.barModeStatus = BarMode.Scrollable; - this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); + this.barModeStatus = undefined; + this.isIconTextExist = true; } - this.buildTab(); + this.tabBarPositionWatch(); } /** - * 监听折叠展开和屏幕旋转事件影响 图文布局样式 + * 监听位置变化影响tabbar侧边高度 布局样式 */ tabBarPositionWatch() { - if (this.tabBarPosition === TabBarPosition.BOTTOM) { - this.barModeStatus = BarMode.Fixed; - this.barHeight = undefined; - } - else { - this.barModeStatus = BarMode.Scrollable; - this.barHeight = (50 / this.tabBarOptionsArray.length + '%'); - } - this.buildTab(); - } - layoutModeWatch() { - this.buildTab(); - } - startListener() { - this.isListener = true; - try { - this.isFold = canIUse('SystemCapability.Window.SessionManager') ? display.isFoldable() : false; - if (this.isFold) { - display.on('foldDisplayModeChange', (data) => { - this.buildTab(); - }); + if (!this.isIconTextExist) { + if (this.tabBarPosition === TabBarPosition.LEFT) { + this.tabBarHeight = (50 / this.tabBarOptionsArray.length + '%'); + this.barModeStatus = BarMode.Scrollable; + } + else { + this.barModeStatus = BarMode.Fixed; + this.tabBarHeight = undefined; } } - catch (err) { - hilog.error(0x0000, 'AtomicServiceTabs', 'fail to get display isFoldable', JSON.stringify(err)); - } - this.listener.on('change', (mediaQueryResult) => { - this.buildTab(); - }); - } - /** - * 构建组件尺寸参数 - */ - buildTab() { - if (this.layoutMode === LayoutMode.AUTO) { - this.screenWidth = px2vp(display.getDefaultDisplaySync().width); - this.isHorizontal = - this.tabBarPosition === TabBarPosition.LEFT ? false : this.screenWidth / this.tabBarOptionsArray.length > 104; - } - else { - this.isHorizontal = this.layoutMode === LayoutMode.HORIZONTAL; - } - if (this.isIconAndText) { - this.textMarginTop = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; - this.textMarginLeft = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; - this.tabPadding = this.isHorizontal ? undefined : MARGIN_VERTICAL_VP; - this.tabMargin = this.isHorizontal ? MARGIN_HORIZONTAL_VP : undefined; - } - } - getFontSize() { - return this.isHorizontal ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : - (this.isIconAndText ? { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_caption'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } : { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); } - TabBuilder(item, index, flex, parent = null) { + TabBuilder(item, index, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { - Flex.create({ - direction: flex, - alignItems: ItemAlign.Center, - justifyContent: FlexAlign.Center - }); - Flex.padding({ left: this.tabPadding, right: this.tabPadding }); - Flex.margin({ left: this.tabMargin, right: this.tabMargin }); - Flex.height(ObservedObject.GetRawObject(this.barHeight)); - }, Flex); + Column.create(); + Column.height(ObservedObject.GetRawObject(this.tabBarHeight)); + }, Column); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (item.icon) { @@ -369,41 +221,25 @@ export class AtomicServiceTabs extends ViewPU { } else { this.ifElseBranchUpdateFunction(1, () => { - }); - } - }, If); - If.pop(); - this.observeComponentCreation2((elmtId, isInitialRender) => { - If.create(); - if (item.text) { - this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Text.create(item.text); Text.textOverflow({ overflow: TextOverflow.Ellipsis }); Text.maxLines(1); Text.fontColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor); - Text.maxFontSize(this.getFontSize()); + Text.maxFontSize(TEXT_FONT_SIZE); Text.minFontSize(9); Text.fontWeight(TEXT_FONT_WEIGHT); Text.lineHeight(TEXT_LIGHT_HEIGHT); Text.textAlign(TextAlign.Center); Text.focusOnTouch(true); Text.backgroundColor(Color.Transparent); - Text.margin({ - top: this.textMarginTop, - left: this.textMarginLeft - }); }, Text); Text.pop(); }); } - else { - this.ifElseBranchUpdateFunction(1, () => { - }); - } }, If); If.pop(); - Flex.pop(); + Column.pop(); } initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -431,8 +267,8 @@ export class AtomicServiceTabs extends ViewPU { }); Tabs.onTabBarClick(this.onTabBarClick); Tabs.onContentWillChange(this.onContentWillChange); - Tabs.barWidth((this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); - Tabs.barHeight((this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); + Tabs.barWidth(this.isIconTextExist ? undefined : (this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); + Tabs.barHeight(this.isIconTextExist ? undefined : (this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); Tabs.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); Tabs.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); }, Tabs); @@ -460,10 +296,10 @@ export class AtomicServiceTabs extends ViewPU { }, If); If.pop(); }); - TabContent.tabBar(this.isHorizontal ? { builder: () => { - this.TabBuilder.call(this, item, index, FlexDirection.Row); - } } : { builder: () => { - this.TabBuilder.call(this, item, index, FlexDirection.Column); + TabContent.tabBar(this.isIconTextExist ? BottomTabBarStyle.of(item.icon, item.text).layoutMode(this.layoutMode) + .labelStyle({ unselectedColor: item.unselectedColor, selectedColor: item.selectedColor }) + .iconStyle({ unselectedColor: item.unselectedColor, selectedColor: item.selectedColor }) : { builder: () => { + this.TabBuilder.call(this, item, index); } }); TabContent.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); TabContent.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); -- Gitee From fbe542090014d178591125dcafae24018e377537 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 5 Feb 2025 08:05:15 +0000 Subject: [PATCH 24/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- .../source/atomicservicetabs.ets | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index bda1f41..cd98a6e 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -18,7 +18,6 @@ const DEFAULT_BAR_HEIGHT: number = 48; const TEXT_WIDTH_HEIGHT_SIZE: number = 24; const TEXT_FONT_WEIGHT: number = 500; const TEXT_LIGHT_HEIGHT: number = 14; -const TEXT_FONT_SIZE = $r('sys.float.ohos_id_text_size_button3'); @Component @@ -29,7 +28,7 @@ export struct AtomicServiceTabs { TabContentBuilder?, TabContentBuilder?]; @Prop tabBarOptionsArray: [TabBarOptions, TabBarOptions, TabBarOptions?, TabBarOptions?, TabBarOptions?]; - @Prop @Watch('tabBarPositionWatch') tabBarPosition?: TabBarPosition = TabBarPosition.BOTTOM; + @Prop @Watch('barPositionChangeBySingleMode') tabBarPosition?: TabBarPosition = TabBarPosition.BOTTOM; @Prop barBackgroundColor?: ResourceColor = Color.Transparent; @Prop index?: number | undefined = 0; @Prop barOverlap?: boolean = true; @@ -45,24 +44,24 @@ export struct AtomicServiceTabs { aboutToAppear(): void { if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { - this.barModeStatus = undefined; this.isIconTextExist = true; } - this.tabBarPositionWatch(); + this.barPositionChangeBySingleMode(); } /** - * 监听位置变化影响tabbar侧边高度 布局样式 + *单图标或文本场景下监听位置变化影响tabbar高度布局样式 */ - tabBarPositionWatch(): void { - if( !this.isIconTextExist ){ - if (this.tabBarPosition === TabBarPosition.LEFT) { - this.tabBarHeight = (50 / this.tabBarOptionsArray.length + '%'); - this.barModeStatus = BarMode.Scrollable; - }else { - this.barModeStatus = BarMode.Fixed; - this.tabBarHeight = undefined; - } + barPositionChangeBySingleMode(): void { + if (this.isIconTextExist) { + return; + } + if (this.tabBarPosition === TabBarPosition.LEFT) { + this.tabBarHeight = (50 / this.tabBarOptionsArray.length + '%'); + this.barModeStatus = BarMode.Scrollable; + } else { + this.barModeStatus = BarMode.Fixed; + this.tabBarHeight = undefined; } } @@ -82,7 +81,7 @@ export struct AtomicServiceTabs { .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1) .fontColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor) - .maxFontSize(TEXT_FONT_SIZE) + .maxFontSize($r('sys.float.ohos_id_text_size_button3')) .minFontSize(9) .fontWeight(TEXT_FONT_WEIGHT) .lineHeight(TEXT_LIGHT_HEIGHT) @@ -120,9 +119,10 @@ export struct AtomicServiceTabs { }) } .safeAreaPadding({ + // barHeight设置具体高度时，tabBar的背景色不会延伸到底部安全区，需要新增该属性值使tabBar和安全区背景色一致 bottom: 0 }) - .animationDuration(0) + .animationDuration(0) // 切换页签时，tabBar有默认的动画效果，设置该属性取消动画效果 .barBackgroundColor(this.barBackgroundColor) .divider(null) .barMode(this.barModeStatus) @@ -138,8 +138,10 @@ export struct AtomicServiceTabs { }) .onTabBarClick(this.onTabBarClick) .onContentWillChange(this.onContentWillChange) - .barWidth( this.isIconTextExist? undefined: (this.tabBarPosition === TabBarPosition.LEFT ) ? DEFAULT_BAR_WIDTH : '100%') - .barHeight(this.isIconTextExist? undefined:(this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') + .barWidth(this.isIconTextExist ? undefined : + (this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') + .barHeight(this.isIconTextExist ? undefined : + (this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') .width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%') .height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%') } -- Gitee From 2171e2fc21cc87f72c04d4dd6717a0303b1e697f Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 5 Feb 2025 08:05:53 +0000 Subject: [PATCH 25/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- .../interfaces/atomicservicetabs.js | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index e2262e9..78a18e0 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -6,7 +6,7 @@ * * http://www.apache.org/licenses/LICENSE-2.0 * - * Unless required by applicable law or agreed to in writing, software + * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and @@ -21,7 +21,6 @@ const DEFAULT_BAR_HEIGHT = 48; const TEXT_WIDTH_HEIGHT_SIZE = 24; const TEXT_FONT_WEIGHT = 500; const TEXT_LIGHT_HEIGHT = 14; -const TEXT_FONT_SIZE = { "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }; export class AtomicServiceTabs extends ViewPU { constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); @@ -44,7 +43,7 @@ export class AtomicServiceTabs extends ViewPU { this.__tabBarHeight = new ObservedPropertyObjectPU(undefined, this, "tabBarHeight"); this.isIconTextExist = false; this.setInitiallyProvidedValue(params); - this.declareWatch("tabBarPosition", this.tabBarPositionWatch); + this.declareWatch("tabBarPosition", this.barPositionChangeBySingleMode); this.finalizeConstruction(); } setInitiallyProvidedValue(params) { @@ -179,24 +178,24 @@ export class AtomicServiceTabs extends ViewPU { } aboutToAppear() { if (this.tabBarOptionsArray[0].icon && this.tabBarOptionsArray[0].text) { - this.barModeStatus = undefined; this.isIconTextExist = true; } - this.tabBarPositionWatch(); + this.barPositionChangeBySingleMode(); } /** - * 监听位置变化影响tabbar侧边高度 布局样式 + *单图标或文本场景下监听位置变化影响tabbar高度布局样式 */ - tabBarPositionWatch() { - if (!this.isIconTextExist) { - if (this.tabBarPosition === TabBarPosition.LEFT) { - this.tabBarHeight = (50 / this.tabBarOptionsArray.length + '%'); - this.barModeStatus = BarMode.Scrollable; - } - else { - this.barModeStatus = BarMode.Fixed; - this.tabBarHeight = undefined; - } + barPositionChangeBySingleMode() { + if (this.isIconTextExist) { + return; + } + if (this.tabBarPosition === TabBarPosition.LEFT) { + this.tabBarHeight = (50 / this.tabBarOptionsArray.length + '%'); + this.barModeStatus = BarMode.Scrollable; + } + else { + this.barModeStatus = BarMode.Fixed; + this.tabBarHeight = undefined; } } TabBuilder(item, index, parent = null) { @@ -226,7 +225,7 @@ export class AtomicServiceTabs extends ViewPU { Text.textOverflow({ overflow: TextOverflow.Ellipsis }); Text.maxLines(1); Text.fontColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor); - Text.maxFontSize(TEXT_FONT_SIZE); + Text.maxFontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Text.minFontSize(9); Text.fontWeight(TEXT_FONT_WEIGHT); Text.lineHeight(TEXT_LIGHT_HEIGHT); @@ -249,6 +248,7 @@ export class AtomicServiceTabs extends ViewPU { controller: this.controller }); Tabs.safeAreaPadding({ + // barHeight设置具体高度时，tabBar的背景色不会延伸到底部安全区，需要新增该属性值使tabBar和安全区背景色一致 bottom: 0 }); Tabs.animationDuration(0); @@ -267,8 +267,10 @@ export class AtomicServiceTabs extends ViewPU { }); Tabs.onTabBarClick(this.onTabBarClick); Tabs.onContentWillChange(this.onContentWillChange); - Tabs.barWidth(this.isIconTextExist ? undefined : (this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); - Tabs.barHeight(this.isIconTextExist ? undefined : (this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); + Tabs.barWidth(this.isIconTextExist ? undefined : + (this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); + Tabs.barHeight(this.isIconTextExist ? undefined : + (this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); Tabs.width((!this.tabContents && this.tabBarPosition === TabBarPosition.LEFT) ? DEFAULT_BAR_WIDTH : '100%'); Tabs.height((!this.tabContents && this.tabBarPosition === TabBarPosition.BOTTOM) ? DEFAULT_BAR_HEIGHT : '100%'); }, Tabs); @@ -331,7 +333,6 @@ export class TabBarOptions { this.selectedColor = selectedColor; } } - export var TabBarPosition; (function (TabBarPosition) { TabBarPosition[TabBarPosition["LEFT"] = 0] = "LEFT"; -- Gitee From 21841ca751d3436bd346a625ea6ea3e1ff852db3 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Wed, 5 Feb 2025 09:25:24 +0000 Subject: [PATCH 26/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- atomicservicetabs/source/atomicservicetabs.ets | 1 - 1 file changed, 1 deletion(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index cd98a6e..375240a 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -19,7 +19,6 @@ const TEXT_WIDTH_HEIGHT_SIZE: number = 24; const TEXT_FONT_WEIGHT: number = 500; const TEXT_LIGHT_HEIGHT: number = 14; - @Component export struct AtomicServiceTabs { @BuilderParam tabContents?: [TabContentBuilder?, -- Gitee From 22ecd5e709c5c98168bb157f7928dd21ea9279b3 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Sat, 8 Feb 2025 02:37:48 +0000 Subject: [PATCH 27/29] update atomicservicetabs/source/atomicservicetabs.ets. Signed-off-by: Poisoned --- atomicservicetabs/source/atomicservicetabs.ets | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/atomicservicetabs/source/atomicservicetabs.ets b/atomicservicetabs/source/atomicservicetabs.ets index 375240a..5af02b5 100644 --- a/atomicservicetabs/source/atomicservicetabs.ets +++ b/atomicservicetabs/source/atomicservicetabs.ets @@ -66,7 +66,10 @@ export struct AtomicServiceTabs { @Builder TabBuilder(item: TabBarOptions, index: number) { - Column() { + Flex({ + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Center + }){ if (item.icon) { Image(item.icon as ResourceStr) .width(TEXT_WIDTH_HEIGHT_SIZE) -- Gitee From fa7ffde718722ca460a4dc1e15eccade7907415e Mon Sep 17 00:00:00 2001 From: Poisoned Date: Sat, 8 Feb 2025 02:38:12 +0000 Subject: [PATCH 28/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- atomicservicetabs/interfaces/atomicservicetabs.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index 78a18e0..1012097 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -1,3 +1,4 @@ + /* * Copyright (c) 2024 Huawei Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); @@ -6,7 +7,7 @@ * * http://www.apache.org/licenses/LICENSE-2.0 * - * Unless required by applicable law or agreed to in writing, software + * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and @@ -200,9 +201,12 @@ export class AtomicServiceTabs extends ViewPU { } TabBuilder(item, index, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { - Column.create(); - Column.height(ObservedObject.GetRawObject(this.tabBarHeight)); - }, Column); + Flex.create({ + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Center + }); + Flex.height(ObservedObject.GetRawObject(this.tabBarHeight)); + }, Flex); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (item.icon) { @@ -238,7 +242,7 @@ export class AtomicServiceTabs extends ViewPU { } }, If); If.pop(); - Column.pop(); + Flex.pop(); } initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -333,6 +337,7 @@ export class TabBarOptions { this.selectedColor = selectedColor; } } + export var TabBarPosition; (function (TabBarPosition) { TabBarPosition[TabBarPosition["LEFT"] = 0] = "LEFT"; -- Gitee From 391d20f91bbfdd720b7562cff625b5f35d843bf1 Mon Sep 17 00:00:00 2001 From: Poisoned Date: Sat, 8 Feb 2025 09:41:16 +0000 Subject: [PATCH 29/29] update atomicservicetabs/interfaces/atomicservicetabs.js. Signed-off-by: Poisoned --- atomicservicetabs/interfaces/atomicservicetabs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/atomicservicetabs/interfaces/atomicservicetabs.js b/atomicservicetabs/interfaces/atomicservicetabs.js index 1012097..d57fedb 100644 --- a/atomicservicetabs/interfaces/atomicservicetabs.js +++ b/atomicservicetabs/interfaces/atomicservicetabs.js @@ -229,7 +229,7 @@ export class AtomicServiceTabs extends ViewPU { Text.textOverflow({ overflow: TextOverflow.Ellipsis }); Text.maxLines(1); Text.fontColor(this.selectedIndex === index ? item.selectedColor : item.unselectedColor); - Text.maxFontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_button3'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Text.maxFontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_button3'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Text.minFontSize(9); Text.fontWeight(TEXT_FONT_WEIGHT); Text.lineHeight(TEXT_LIGHT_HEIGHT); -- Gitee