From 7d90555d9e489fce4062993eb8054052edb4644e Mon Sep 17 00:00:00 2001 From: liugang9704 <2745340733@qq.com> Date: Tue, 23 Sep 2025 20:18:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EFAQ=E5=90=8C=E6=BA=90?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/ets/pages/TabsHeightAdaptive.ets | 43 +++++++++ .../main/ets/pages/TabsPreloadTabContent.ets | 95 ++++++++++++++++++ .../pages/TabsPreloadTabContentPlanTwo.ets | 96 +++++++++++++++++++ .../entry/src/main/ets/pages/TabsSetWidth.ets | 87 +++++++++++++++++ 4 files changed, 321 insertions(+) create mode 100644 ArkUI/entry/src/main/ets/pages/TabsHeightAdaptive.ets create mode 100644 ArkUI/entry/src/main/ets/pages/TabsPreloadTabContent.ets create mode 100644 ArkUI/entry/src/main/ets/pages/TabsPreloadTabContentPlanTwo.ets create mode 100644 ArkUI/entry/src/main/ets/pages/TabsSetWidth.ets diff --git a/ArkUI/entry/src/main/ets/pages/TabsHeightAdaptive.ets b/ArkUI/entry/src/main/ets/pages/TabsHeightAdaptive.ets new file mode 100644 index 00000000..60d29b09 --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/TabsHeightAdaptive.ets @@ -0,0 +1,43 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* 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 +* limitations under the License. +*/ + +/* +* FAQ:如何实现Tabs高度自适应内容 +*/ + +// [Start tabs_height_adaptive] +@Entry +@Component +struct Index { + build() { + Column() { + Tabs() { + TabContent() { + Row() { + Text('hello') + } + .width('100%') + } + } + .height('auto') + .barBackgroundColor(Color.Orange) + .barHeight(0) + } + .height('100%') + .width('100%') + } +} + +// [End tabs_height_adaptive] \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/TabsPreloadTabContent.ets b/ArkUI/entry/src/main/ets/pages/TabsPreloadTabContent.ets new file mode 100644 index 00000000..4a01cd0f --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/TabsPreloadTabContent.ets @@ -0,0 +1,95 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* 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 +* limitations under the License. +*/ + +/* +* FAQ:Tabs如何实现预加载特定的TabContent页 +*/ + +// [Start tabs_preload_tab_content] +@Entry +@Component +struct TabsDemo { + @State currentIndex: number = 0; + private tabsController: TabsController = new TabsController(); + // Set up page switching animations instead of sliding to jump to page animations + private customContentTransition: (from: number, to: number) => TabContentAnimatedTransition = + (from: number, to: number) => { + let tabContentAnimatedTransition = { + timeout: 1000, + transition: (proxy: TabContentTransitionProxy) => { + this.getUIContext().animateTo({ + duration: 0, + onFinish: () => { + proxy.finishTransition(); + } + }, () => { + }) + } + } as TabContentAnimatedTransition + return tabContentAnimatedTransition; + } + + build() { + Column() { + Tabs({ index: this.currentIndex, controller: this.tabsController }) { + TabContent() { + MyComponent({ color: '#00CB87' }) + }.tabBar(SubTabBarStyle.of('green')) + + TabContent() { + MyComponent({ color: '#007DFF' }) + }.tabBar(SubTabBarStyle.of('green')) + + TabContent() { + MyComponent({ color: '#FFBF00' }) + }.tabBar(SubTabBarStyle.of('green')) + + TabContent() { + MyComponent({ color: '#E67C92' }) + }.tabBar(SubTabBarStyle.of('green')) + } + .customContentTransition(this.customContentTransition) + .width('100%') + .height(296) + .barBackgroundColor('#F1F3F5') + .onChange((index: number) => { + this.currentIndex = index; + }) + } + } +} + +@Component +struct MyComponent { + private color: string = ''; + + aboutToAppear(): void { + // It can be observed by printing the log that no intermediate page has been loaded + console.info('aboutToAppear backgroundColor:' + this.color); + } + + aboutToDisappear(): void { + console.info('aboutToDisappear backgroundColor:' + this.color); + } + + build() { + Column() + .width('100%') + .height('100%') + .backgroundColor(this.color) + } +} + +// [End tabs_preload_tab_content] \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/TabsPreloadTabContentPlanTwo.ets b/ArkUI/entry/src/main/ets/pages/TabsPreloadTabContentPlanTwo.ets new file mode 100644 index 00000000..aefa5474 --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/TabsPreloadTabContentPlanTwo.ets @@ -0,0 +1,96 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* 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 +* limitations under the License. +*/ + +/* +* FAQ:Tabs如何实现预加载特定的TabContent页 +*/ + +// [Start tabs_preload_tab_content] +class MyDataSource implements IDataSource { + private list: number[] = []; + + constructor(list: number[]) { + this.list = list; + } + + totalCount(): number { + return this.list.length; + } + + getData(index: number): number { + return this.list[index]; + } + + registerDataChangeListener(listener: DataChangeListener): void { + } + + unregisterDataChangeListener(listener: DataChangeListener): void { + } +} + + +@Entry +@Component +struct SwiperExample { + private swiperController: SwiperController = new SwiperController(); + private data: MyDataSource = new MyDataSource([]); + + aboutToAppear(): void { + let list: number[] = []; + for (let i = 0; i <= 10; i++) { + list.push(i); + } + this.data = new MyDataSource(list); + } + + build() { + Column({ space: 5 }) { + Swiper(this.swiperController) { + LazyForEach(this.data, (item: string) => { + Text(item.toString()) + .width('90%') + .height(160) + .backgroundColor(0XAFEEEE) + .textAlign(TextAlign.Center) + .fontSize(30) + }, (item: string) => item) + } + .cachedCount(2) + .index(1) + .autoPlay(true) + .interval(4000) + .loop(true) + .duration(1000) + .itemSpace(0) + .indicator(false) + + Row({ space: 12 }) { + Button('change to index:4') + .onClick(() => { + this.swiperController.changeIndex(3, false); + }) + Button('change to index:7') + .onClick(() => { + this.swiperController.changeIndex(6, false); + }) + } + .margin(5) + } + .width('100%') + .margin({ top: 5 }) + } +} + +// [End tabs_preload_tab_content] \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/TabsSetWidth.ets b/ArkUI/entry/src/main/ets/pages/TabsSetWidth.ets new file mode 100644 index 00000000..5451c801 --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/TabsSetWidth.ets @@ -0,0 +1,87 @@ +/* +* Copyright (c) 2024 Huawei Device Co., Ltd. +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* 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 +* limitations under the License. +*/ + +/* +* FAQ:Tabs导航页签栏如何根据TabBar数均匀设置宽度 +*/ + +// [Start tabs_set_width] +@Entry +@Component +struct Index { + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' + @State currentIndex: number = 0 + @State selectedIndex: number = 0 + private controller: TabsController = new TabsController() + + @Builder + TabBuilder(index: number, name: string) { + Column() { + Text(name) + .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) + .fontSize(16) + .fontWeight(this.selectedIndex === index ? 500 : 400) + .lineHeight(22) + .margin({ top: 17, bottom: 7 }) + }.width('100%') + } + + build() { + Column() { + Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#FFBF00') + }.tabBar(this.TabBuilder(0, 'green')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#007DFF') + }.tabBar(this.TabBuilder(1, 'blue')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#FFBF00') + }.tabBar(this.TabBuilder(2, 'yellow')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.TabBuilder(3, 'pink')) + } + .vertical(false) + .barMode(BarMode.Fixed) + .barWidth(360) + .barHeight(56) + .animationDuration(400) + .onChange((index: number) => { + // currentIndex controls TabContent to display tabs + this.currentIndex = index + this.selectedIndex = index + }) + .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { + if (index === targetIndex) { + return + } + // selectedIndex controls the color switching between Image and Text within the custom TabBar + this.selectedIndex = targetIndex + }) + .width(360) + .height(296) + .margin({ top: 52 }) + .backgroundColor('#F1F3F5') + } + .width('100%') + } +} + +// [End tabs_set_width] \ No newline at end of file -- Gitee