From b9d6551b75b078dfbf00850327a0896f97877d23 Mon Sep 17 00:00:00 2001 From: rex <1491721419@qq.com> Date: Tue, 5 Aug 2025 15:59:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EFAQ=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/MonitorTabContent.ets | 56 ++++++++++++ ArkUI/entry/src/main/ets/pages/TabsDemo.ets | 74 ++++++++++++++++ .../src/main/ets/pages/TabsPageSwitching.ets | 88 +++++++++++++++++++ 3 files changed, 218 insertions(+) create mode 100644 ArkUI/entry/src/main/ets/pages/MonitorTabContent.ets create mode 100644 ArkUI/entry/src/main/ets/pages/TabsDemo.ets create mode 100644 ArkUI/entry/src/main/ets/pages/TabsPageSwitching.ets diff --git a/ArkUI/entry/src/main/ets/pages/MonitorTabContent.ets b/ArkUI/entry/src/main/ets/pages/MonitorTabContent.ets new file mode 100644 index 0000000..682e75f --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/MonitorTabContent.ets @@ -0,0 +1,56 @@ +/* +* 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 monitor_tabContent] +@Component +struct MonitorTabContent { + build() { + Column() { + Tabs() { + TabContent() { + ChildrenComponent1(); + } + // ... + } + .height('60%') + .barMode(BarMode.Fixed) + .backgroundColor(0xf1f3f5) + } + .width('100%') + .height(500) + .padding(24) + } +} + +@Component +struct ChildrenComponent1 { + build() { + Column() { + Text('Tab 1 Content') + } + .onVisibleAreaChange([0, 1], (isExpanding, currentRatio) => { + if(isExpanding && currentRatio > 0) { + console.log('Tab 1 出现'); + } else if(!isExpanding && currentRatio === 0) { + console.log('Tab 1 消失'); + } + }) + } +} +// [End monitor_tabContent] \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/TabsDemo.ets b/ArkUI/entry/src/main/ets/pages/TabsDemo.ets new file mode 100644 index 0000000..2627684 --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/TabsDemo.ets @@ -0,0 +1,74 @@ +/* +* 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切换动画有延迟，Tabs页面切换完才触发tabBar切换，如何修改 +*/ + +// [Start tabBar_animation] +@Component +struct TabsDemo { + @State tabArray: Array = [0, 1, 2, 3]; + @State selectedIndex: number = 0; + @State currentIndex: number = 0; + @State selectedFontColor: Color = Color.Blue; + @State fontColor: Color = Color.Black; + private controller: TabsController = new TabsController(); + + @Builder + tabBuilder(index: number, name: string) { + Column() { + Text(name) + .fontSize(16) + .lineHeight(22) + .fontWeight(this.selectedIndex === index ? 500 : 400) + .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) + + Divider() + .strokeWidth(2) + .color('#007DEF') + .opacity(this.selectedIndex === index ? 1 : 0) + } + .width('100%') + } + + build() { + Column() { + Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { + ForEach(this.tabArray,(item: number, index:number) => { + // The system has its own tab. + TabContent() { + Text('我的内容' + item) + .fontSize(30) + } + .tabBar(this.tabBuilder(item, 'bar' + item)) + }) + } + .onChange((index: number) => { + // CurrentIndex Control TabContent Display Tab. + this.currentIndex = index; + }) + .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { + if(index === targetIndex) { + return; + } + // SelectedIndex controls the color switching between Image and Text in the custom TabBar. + this.selectedIndex = targetIndex; + }) + } + .width('100%') + } +} +// [End tabBar_animation] \ No newline at end of file diff --git a/ArkUI/entry/src/main/ets/pages/TabsPageSwitching.ets b/ArkUI/entry/src/main/ets/pages/TabsPageSwitching.ets new file mode 100644 index 0000000..fd58235 --- /dev/null +++ b/ArkUI/entry/src/main/ets/pages/TabsPageSwitching.ets @@ -0,0 +1,88 @@ +/* +* 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_page_switching] +@Component +struct TabsPageSwitching { + @State currentIndex: number = 0; + private controller: TabsController = new TabsController(); + private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Right }); + + @Builder + tabBuilder(index: number, name: string) { + Column() { + Text(name) + .fontSize(16) + .lineHeight(22) + .margin({ top: 16, bottom: 16 }) + .fontColor(this.currentIndex === index ? Color.Blue : Color.Black) + + Divider() + .strokeWidth(2) + .color(Color.Blue) + .opacity(this.currentIndex === index ? 1 : 0) + } + .width('100%') + } + + build() { + Column() { + Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { + TabContent() { + Column() + .width('100%') + .height('100%') + .backgroundColor(Color.Green) + } + .tabBar(this.tabBuilder(0, 'Tab1')) + + TabContent() { + Column() + .width('100%') + .height('100%') + .backgroundColor(Color.Pink) + .gesture(PanGesture(this.panOption)) + } + .tabBar(this.tabBuilder(1, 'Tab2')) + + TabContent() { + Column() + .width('100%') + .height('100%') + .backgroundColor(Color.Orange) + .gesture(PanGesture(this.panOption)) + } + .tabBar(this.tabBuilder(2, 'Tab3')) + } + .vertical(false) + .barMode(BarMode.Fixed) + .barWidth(360) + .barHeight(56) + .animationDuration(200) + .onChange((index: number) => { + this.currentIndex = index; + }) + .width('100%') + .height(296) + .margin({ top: 52 }) + } + .width('100%') + } +} +// [End tabs_page_switching] \ No newline at end of file -- Gitee