diff --git a/AppScope/app.json5 b/AppScope/app.json5 index 9f55caaba6b69a2e232f56fb123fdb09a6e44526..01a319a35b6ffd49e9a10653ceb43e59f0592547 100644 --- a/AppScope/app.json5 +++ b/AppScope/app.json5 @@ -3,7 +3,7 @@ "bundleName": "cn.openharmony.circleindicator", "vendor": "example", "versionCode": 1000002, - "versionName": "2.0.0", + "versionName": "2.1.0-rc.0", "icon": "$media:app_icon", "label": "$string:app_name" } diff --git a/CHANGELOG.md b/CHANGELOG.md index e2431f0d5df9ea77cda14de4d1315c55e850c66a..743ea2469a6fcaf9d9c432856a96fca00fc2a557 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +## v2.1.0-rc.0 +- 适配ComponentV2装饰器 + ## v2.0.0 - 适配HSP场景,Indicator的配置中使用到Length入参的接口,后面新增了可选参数context?:common.UIAbilityContext参数,在HSP场景中需要传递正确的context,确保后续资源获取正常,非HSP场景不影响原来的使用方式 diff --git a/README.md b/README.md index e20c0142e0b485e079e8567bfc5f4ec78fb52220..9d124f2f32e5a3ffb3e328bfea3cdae880c1d546 100644 --- a/README.md +++ b/README.md @@ -139,9 +139,7 @@ build() { 在下述版本验证通过： -- DevEco Studio 版本： 4.1 Canary(4.1.3.317) - -- OpenHarmony SDK:API11 (4.1.0.36) +- DevEco Studio NEXT Developer Beta3: (5.0.3.530), SDK: API12 (5.0.0.35(SP3)) HSP场景适配: diff --git a/build-profile.json5 b/build-profile.json5 index 65e8b964530bed0b2cafcc9d44ab779e9c7863b2..e4f1fd45ef67a91f43fd312673d0027273fcfeec 100644 --- a/build-profile.json5 +++ b/build-profile.json5 @@ -6,9 +6,8 @@ { "name": "default", "signingConfig": "default", - "compileSdkVersion": 10, - "compatibleSdkVersion": 10, - "targetSdkVersion": 10, + "compileSdkVersion": 12, + "compatibleSdkVersion": 12, "runtimeOS": "OpenHarmony" } ] diff --git a/entry/oh-package.json5 b/entry/oh-package.json5 index efe8641f8ac83f01580beaa007d598b4cf0d661a..2fb0b3d82f5c02cad6987448c02f39bf23d90b32 100644 --- a/entry/oh-package.json5 +++ b/entry/oh-package.json5 @@ -10,7 +10,7 @@ }, "description": "example description", "main": "", - "version": "2.0.0", + "version": "2.1.0-rc.0", "dependencies": { "@ohos/circleindicator": "file:../library" } diff --git a/entry/src/main/ets/pages/BadgeSampleFixTabsIndicator.ets b/entry/src/main/ets/pages/BadgeSampleFixTabsIndicator.ets index dec3dcdbb3fcbf12a89c2816bbe6b067e3472662..3a1ca697755301c7a6ba2630d9f278177a115f44 100644 --- a/entry/src/main/ets/pages/BadgeSampleFixTabsIndicator.ets +++ b/entry/src/main/ets/pages/BadgeSampleFixTabsIndicator.ets @@ -20,7 +20,7 @@ import { BadgeFixTabsIndicator, BadgeFixTabsModel, BadgeType, BadgeRule, BadgeAnchor } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct BadgeSampleFixTabsIndicator { private data: Array = ["KITKAT", "NOUGAT", "DONUT"] private itemWidths1: Array = [75, 85, 75] @@ -46,9 +46,9 @@ struct BadgeSampleFixTabsIndicator { private badgeRulesX2: Array = [, new BadgeRule(BadgeAnchor.CENTER_X, 0),] private badgeRulesY2: Array = [, new BadgeRule(BadgeAnchor.BOTTOM, -10),] private controller: TabsController = new TabsController() - @State model1: BadgeFixTabsModel = new BadgeFixTabsModel(this.controller) - @State model2: BadgeFixTabsModel = new BadgeFixTabsModel(this.controller) - @State itemIndex: number = 0 + @Local model1: BadgeFixTabsModel = new BadgeFixTabsModel(this.controller) + @Local model2: BadgeFixTabsModel = new BadgeFixTabsModel(this.controller) + @Local itemIndex: number = 0 aboutToAppear() { this.model1 @@ -114,8 +114,8 @@ struct BadgeSampleFixTabsIndicator { build() { Column({ space: 10 }) { - BadgeFixTabsIndicator({ itemIndex: $itemIndex, model: this.model1, titles: this.data }) - BadgeFixTabsIndicator({ itemIndex: $itemIndex, model: this.model2, titles: this.data }) + BadgeFixTabsIndicator({ itemIndex: this.itemIndex, model: this.model1, titles: this.data }) + BadgeFixTabsIndicator({ itemIndex: this.itemIndex, model: this.model2, titles: this.data }) Tabs({ index: this.itemIndex, controller: this.controller }) { this.TabContentSample(0) this.TabContentSample(1) diff --git a/entry/src/main/ets/pages/BannerSampleAutoPlay.ets b/entry/src/main/ets/pages/BannerSampleAutoPlay.ets index c4ed635951f7989ce190ee3b03b08cb7a6b42b5f..0a509a4cc940a9af4a61da239c78259dfb7235f5 100644 --- a/entry/src/main/ets/pages/BannerSampleAutoPlay.ets +++ b/entry/src/main/ets/pages/BannerSampleAutoPlay.ets @@ -20,13 +20,13 @@ import { BannerIndicator, BannerModel } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct BannerSampleNoFades { swiperController: SwiperController = new SwiperController() model: BannerModel = new BannerModel(this.swiperController) - @State + @Local index: number = 0 - @State + @Local count: number = 4 build() { @@ -61,7 +61,7 @@ struct BannerSampleNoFades { this.index = index }) - BannerIndicator({ count: $count, flingIndex: $index, model: this.model }) + BannerIndicator({ count: this.count, flingIndex: this.index, model: this.model }) } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/BannerSampleDefault.ets b/entry/src/main/ets/pages/BannerSampleDefault.ets index 83a6f9326325cefc88df1f1b8bbab7b73afd00a8..2479550f64e3eafac5bc32a9b83c06af7c04a804 100644 --- a/entry/src/main/ets/pages/BannerSampleDefault.ets +++ b/entry/src/main/ets/pages/BannerSampleDefault.ets @@ -20,13 +20,13 @@ import { BannerIndicator, BannerModel } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct BannerSampleDefault { swiperController: SwiperController = new SwiperController() model: BannerModel = new BannerModel(this.swiperController) - @State + @Local index: number = 0 - @State + @Local count: number = 4 build() { @@ -61,7 +61,7 @@ struct BannerSampleDefault { this.index = index }) - BannerIndicator({ count: $count, flingIndex: $index, model: this.model }) + BannerIndicator({ count: this.count, flingIndex: this.index, model: this.model }) } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/BannerSampleDynamic.ets b/entry/src/main/ets/pages/BannerSampleDynamic.ets index eeb76f1642a7820a3284386232d2808f5763facc..5e7b43b6a8339bdcf4b317b5785d296c75243a6f 100644 --- a/entry/src/main/ets/pages/BannerSampleDynamic.ets +++ b/entry/src/main/ets/pages/BannerSampleDynamic.ets @@ -22,17 +22,17 @@ import { BannerIndicator, BannerModel } from '@ohos/circleindicator' const iconArrs: Array = [$r('app.media.p1'), $r('app.media.p2'), $r('app.media.p3'), $r('app.media.p4')]; @Entry -@Component +@ComponentV2 struct BannerSampleDynamic { swiperController: SwiperController = new SwiperController() model: BannerModel = new BannerModel(this.swiperController) - @State + @Local index: number = 0 - @State + @Local count: number = 4 - @State + @Local enable: boolean = true - @State arr: Array = [] + @Local arr: Array = [] build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { @@ -56,7 +56,7 @@ struct BannerSampleDynamic { }) .enabled(this.enable) - BannerIndicator({ count: $count, flingIndex: $index, model: this.model }) + BannerIndicator({ count: this.count, flingIndex: this.index, model: this.model }) } Row() { diff --git a/entry/src/main/ets/pages/BannerSampleNoFades.ets b/entry/src/main/ets/pages/BannerSampleNoFades.ets index 571ccaeb3b177d7ddead1beda7e74ceb7b4d5572..22d45b713675b04e301f90db8b6081398f78825e 100644 --- a/entry/src/main/ets/pages/BannerSampleNoFades.ets +++ b/entry/src/main/ets/pages/BannerSampleNoFades.ets @@ -20,13 +20,13 @@ import {BannerIndicator,BannerModel} from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct BannerSampleNoFades { swiperController: SwiperController = new SwiperController() model: BannerModel = new BannerModel(this.swiperController) - @State + @Local index: number = 0 - @State + @Local count: number = 4 build() { @@ -61,7 +61,7 @@ struct BannerSampleNoFades { this.index = index }) - BannerIndicator({ count: $count, flingIndex: $index, model: this.model }) + BannerIndicator({ count: this.count, flingIndex: this.index!!, model: this.model }) } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/BannerSampleStyled.ets b/entry/src/main/ets/pages/BannerSampleStyled.ets index 42b861336bfe71456a9d3c0a6d6d96055ab9b518..5964c158c223a5f022728abc12a41ab8f9b13324 100644 --- a/entry/src/main/ets/pages/BannerSampleStyled.ets +++ b/entry/src/main/ets/pages/BannerSampleStyled.ets @@ -20,13 +20,13 @@ import { BannerIndicator, BannerModel } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct BannerSampleDefault { swiperController: SwiperController = new SwiperController() model: BannerModel = new BannerModel(this.swiperController) - @State + @Local index: number = 0 - @State + @Local count: number = 4 build() { @@ -61,7 +61,7 @@ struct BannerSampleDefault { this.index = index }) - BannerIndicator({ count: $count, flingIndex: $index, model: this.model }) + BannerIndicator({ count: this.count, flingIndex: this.index, model: this.model }) } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/BottomTabIndicator_center_view.ets b/entry/src/main/ets/pages/BottomTabIndicator_center_view.ets index 88053587e9900bde4f8557f2553bdcd294e1d22e..8be2b3c211cd930732b2ffb48694e7add84a0028 100644 --- a/entry/src/main/ets/pages/BottomTabIndicator_center_view.ets +++ b/entry/src/main/ets/pages/BottomTabIndicator_center_view.ets @@ -22,11 +22,11 @@ import prompt from '@system.prompt'; import { TabIcon } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct BottomTabIndicator_page { private controller: TabsController = new TabsController() - @State model: BottomTabsModel = new BottomTabsModel(this.controller) - @State index: number= 0 + @Local model: BottomTabsModel = new BottomTabsModel(this.controller) + @Local index: number= 0 private data: TabIcon[]| undefined = undefined; aboutToAppear() { @@ -100,7 +100,7 @@ struct BottomTabIndicator_page { this.model.notifyTouch(event, this.index) }) - BottomTabsIndicator({ itemIndex: $index, model: this.model, titles: this.data }) + BottomTabsIndicator({ itemIndex: this.index, model: this.model, titles: this.data }) } .width('100%') diff --git a/entry/src/main/ets/pages/BottomTabIndicator_default.ets b/entry/src/main/ets/pages/BottomTabIndicator_default.ets index a50486f07c409160125e6abe6343182c38bae4c5..e930796764653601719d6fd21f7c315fbec1583b 100644 --- a/entry/src/main/ets/pages/BottomTabIndicator_default.ets +++ b/entry/src/main/ets/pages/BottomTabIndicator_default.ets @@ -21,11 +21,11 @@ import { BottomTabsIndicator, BottomTabsModel } from '@ohos/circleindicator' import { TabIcon } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct BottomTabIndicator_page { private controller: TabsController = new TabsController() - @State model: BottomTabsModel = new BottomTabsModel(this.controller) - @State index: number= 0 + @Local model: BottomTabsModel = new BottomTabsModel(this.controller) + @Local index: number= 0 private data: TabIcon[]| undefined = undefined; aboutToAppear() { @@ -91,7 +91,7 @@ struct BottomTabIndicator_page { }) Stack() { - BottomTabsIndicator({ itemIndex: $index, model: this.model, titles: this.data }) + BottomTabsIndicator({ itemIndex: this.index, model: this.model, titles: this.data }) }.width('100%').backgroundColor(Color.Black) } .width('100%') diff --git a/entry/src/main/ets/pages/CapsuleFixTabsIndicator_default.ets b/entry/src/main/ets/pages/CapsuleFixTabsIndicator_default.ets index 6795c20edbabfa6e84cedf83bf44063e1f315be4..125e5504e37a862500d752df58f1781952ac6acb 100644 --- a/entry/src/main/ets/pages/CapsuleFixTabsIndicator_default.ets +++ b/entry/src/main/ets/pages/CapsuleFixTabsIndicator_default.ets @@ -20,11 +20,11 @@ import { CapsuleFixTabsIndicator, CapsuleFixTabsModel } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct CapsuleFixTabsIndicator_page { private controller: TabsController = new TabsController() - @State model: CapsuleFixTabsModel = new CapsuleFixTabsModel(this.controller) - @State index: number= 0 + @Local model: CapsuleFixTabsModel = new CapsuleFixTabsModel(this.controller) + @Local index: number= 0 aboutToAppear() { this.model @@ -39,7 +39,7 @@ struct CapsuleFixTabsIndicator_page { build() { Column() { - CapsuleFixTabsIndicator({ itemIndex: $index, model: this.model, titles: ['KITKAT', 'NOUGAT', 'DONUT'] }) + CapsuleFixTabsIndicator({ itemIndex: this.index, model: this.model, titles: ['KITKAT', 'NOUGAT', 'DONUT'] }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/entry/src/main/ets/pages/FixTabsIndicator_background_image.ets b/entry/src/main/ets/pages/FixTabsIndicator_background_image.ets index 524cd62782d802081f7c749f127463fc89d43a80..c89d33dced694b7b047b4d03b8dbd8c26824f918 100644 --- a/entry/src/main/ets/pages/FixTabsIndicator_background_image.ets +++ b/entry/src/main/ets/pages/FixTabsIndicator_background_image.ets @@ -20,11 +20,11 @@ import { FixTabsIndicator, FixTabsModel, FixCursorType } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct FixTabsIndicator_page { private controller: TabsController = new TabsController() - @State model: FixTabsModel = new FixTabsModel(this.controller) - @State index: number = 0 + @Local model: FixTabsModel = new FixTabsModel(this.controller) + @Local index: number = 0 aboutToAppear() { this.model @@ -44,7 +44,7 @@ struct FixTabsIndicator_page { build() { Column() { - FixTabsIndicator({ itemIndex: $index, model: this.model, titles: ['我0', '我1', '我2', '我3'] }) + FixTabsIndicator({ itemIndex: this.index, model: this.model, titles: ['我0', '我1', '我2', '我3'] }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/entry/src/main/ets/pages/FixTabsIndicator_default.ets b/entry/src/main/ets/pages/FixTabsIndicator_default.ets index 81f5906f0b57831e9e4612fc38a4b68196e34625..95881e692334da41bdf1f82004af51ba6e46cfd4 100644 --- a/entry/src/main/ets/pages/FixTabsIndicator_default.ets +++ b/entry/src/main/ets/pages/FixTabsIndicator_default.ets @@ -20,11 +20,11 @@ import { FixTabsIndicator, FixTabsModel, FixCursorType } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct FixTabsIndicator_page { private controller: TabsController = new TabsController() - @State model: FixTabsModel = new FixTabsModel(this.controller) - @State index: number = 0 + @Local model: FixTabsModel = new FixTabsModel(this.controller) + @Local index: number = 0 aboutToAppear() { this.model @@ -39,7 +39,7 @@ struct FixTabsIndicator_page { build() { Column() { - FixTabsIndicator({ itemIndex: $index, model: this.model, titles: ['主页0', '主页1', '主页2', '主页3'] }) + FixTabsIndicator({ itemIndex: this.index, model: this.model, titles: ['主页0', '主页1', '主页2', '主页3'] }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/entry/src/main/ets/pages/FixTabsIndicator_fill_background_color.ets b/entry/src/main/ets/pages/FixTabsIndicator_fill_background_color.ets index a533ea3f3b2148dcaf8dea24807e6f93d9ace0ab..c1e2c90899fa5e783fbfcbc7987b7f577ebe71b7 100644 --- a/entry/src/main/ets/pages/FixTabsIndicator_fill_background_color.ets +++ b/entry/src/main/ets/pages/FixTabsIndicator_fill_background_color.ets @@ -20,11 +20,11 @@ import { FixTabsIndicator, FixTabsModel, FixCursorType } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct FixTabsIndicator_page { private controller: TabsController = new TabsController() - @State model: FixTabsModel = new FixTabsModel(this.controller) - @State index: number = 0 + @Local model: FixTabsModel = new FixTabsModel(this.controller) + @Local index: number = 0 aboutToAppear() { this.model @@ -39,7 +39,7 @@ struct FixTabsIndicator_page { build() { Column() { - FixTabsIndicator({ itemIndex: $index, model: this.model, titles: ['消息0', '消息1', '消息2', '消息3'] }) + FixTabsIndicator({ itemIndex: this.index, model: this.model, titles: ['消息0', '消息1', '消息2', '消息3'] }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/entry/src/main/ets/pages/FixTabsIndicator_top_line.ets b/entry/src/main/ets/pages/FixTabsIndicator_top_line.ets index 8fc008b82a1f7d38c1239a083102c2461e9828f1..c6cbe843134f9e068f63179885fbb34047e40a77 100644 --- a/entry/src/main/ets/pages/FixTabsIndicator_top_line.ets +++ b/entry/src/main/ets/pages/FixTabsIndicator_top_line.ets @@ -20,11 +20,11 @@ import { FixTabsIndicator, FixTabsModel, FixCursorType } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct FixTabsIndicator_page { private controller: TabsController = new TabsController() - @State model: FixTabsModel = new FixTabsModel(this.controller) - @State index: number = 0 + @Local model: FixTabsModel = new FixTabsModel(this.controller) + @Local index: number = 0 aboutToAppear() { this.model @@ -39,7 +39,7 @@ struct FixTabsIndicator_page { build() { Column() { - FixTabsIndicator({ itemIndex: $index, model: this.model, titles: ['发现0', '发现1', '发现2', '发现3'] }) + FixTabsIndicator({ itemIndex: this.index, model: this.model, titles: ['发现0', '发现1', '发现2', '发现3'] }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/entry/src/main/ets/pages/IconsSampleDefault.ets b/entry/src/main/ets/pages/IconsSampleDefault.ets index a9d8d9590a718267e453973b7158e6e5f4fdba56..ec584e3fea51a3cf54808d6212728bb1225399a4 100644 --- a/entry/src/main/ets/pages/IconsSampleDefault.ets +++ b/entry/src/main/ets/pages/IconsSampleDefault.ets @@ -29,7 +29,7 @@ import prompt from '@system.prompt' } @Entry -@Component +@ComponentV2 struct IconsSampleDefault { private iconItems: Array = [{ normal: $r("app.media.alarms_normal"), @@ -46,8 +46,8 @@ struct IconsSampleDefault { }] private initData: Array = ["This ", "Is", "A", "Test"] private controller: TabsController = new TabsController() - @State model: IconModel = new IconModel(this.controller) - @State index: number = 0 + @Local model: IconModel = new IconModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -86,7 +86,7 @@ struct IconsSampleDefault { } }.indicator(this) - IconIndicator({ iconItems: this.iconItems, itemIndex: $index, model: this.model }) + IconIndicator({ iconItems: this.iconItems, itemIndex: this.index, model: this.model }) } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/IndicatoCircleSampleDefault.ets b/entry/src/main/ets/pages/IndicatoCircleSampleDefault.ets index a65f56d9c6d8cf5947b0ba1bdd694b992f0f9a99..b18834ea9f9e844585b65c04aa76f7659275a78f 100644 --- a/entry/src/main/ets/pages/IndicatoCircleSampleDefault.ets +++ b/entry/src/main/ets/pages/IndicatoCircleSampleDefault.ets @@ -25,17 +25,17 @@ import { CircleIndicator, CircleModel } from '@ohos/circleindicator' } @Entry -@Component +@ComponentV2 struct IndicatoCircleScale { private text= ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model: CircleModel= new CircleModel(this.controller) - @State model2: CircleModel= new CircleModel(this.controller) - @State model1: CircleModel= new CircleModel(this.controller) - @State model3: CircleModel= new CircleModel(this.controller) - @State itemIndex: number= 0 - @State count: number = 0 + @Local model: CircleModel= new CircleModel(this.controller) + @Local model2: CircleModel= new CircleModel(this.controller) + @Local model1: CircleModel= new CircleModel(this.controller) + @Local model3: CircleModel= new CircleModel(this.controller) + @Local itemIndex: number= 0 + @Local count: number = 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -103,9 +103,9 @@ struct IndicatoCircleScale { this.model.notifyTouch(event, this.itemIndex) }) - CircleIndicator({ itemIndex: $itemIndex, model: this.model, count: $count }) - CircleIndicator({ itemIndex: $itemIndex, model: this.model2, count: $count }) - CircleIndicator({ itemIndex: $itemIndex, model: this.model3, count: $count }) + CircleIndicator({ itemIndex: this.itemIndex, model: this.model, count: this.count }) + CircleIndicator({ itemIndex: this.itemIndex, model: this.model2, count: this.count }) + CircleIndicator({ itemIndex: this.itemIndex, model: this.model3, count: this.count }) } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/IndicatoCircleSampleGradient.ets b/entry/src/main/ets/pages/IndicatoCircleSampleGradient.ets index 00ddd1bd738f4775745f217ad75fb989e9ed4481..5eae69afacecfed70311d41bd28c967eb9037a51 100644 --- a/entry/src/main/ets/pages/IndicatoCircleSampleGradient.ets +++ b/entry/src/main/ets/pages/IndicatoCircleSampleGradient.ets @@ -25,14 +25,14 @@ import { CircleIndicator, CircleModel } from '@ohos/circleindicator' } @Entry -@Component +@ComponentV2 struct IndicatoCircleSampleGradient { private text= ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model: CircleModel= new CircleModel(this.controller) - @State itemIndex: number= 0 - @State count: number = 0 + @Local model: CircleModel= new CircleModel(this.controller) + @Local itemIndex: number= 0 + @Local count: number = 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -83,7 +83,7 @@ struct IndicatoCircleSampleGradient { this.model.notifyTouch(event, this.itemIndex) }) - CircleIndicator({ itemIndex: $itemIndex, model: this.model, count: $count }) + CircleIndicator({ itemIndex: this.itemIndex, model: this.model, count: this.count }) } .width('100%') diff --git a/entry/src/main/ets/pages/IndicatoCircleSampleVertical.ets b/entry/src/main/ets/pages/IndicatoCircleSampleVertical.ets index 3d36bfcdf5f84da4eefe39bcfbf362397f463eb9..4828e7b67521e4e5a447e3186be4020b933603f2 100644 --- a/entry/src/main/ets/pages/IndicatoCircleSampleVertical.ets +++ b/entry/src/main/ets/pages/IndicatoCircleSampleVertical.ets @@ -25,14 +25,14 @@ import { CircleIndicator, CircleModel, CircleOrientation } from '@ohos/circleind } @Entry -@Component +@ComponentV2 struct IndicatoCircleVertical { private text= ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model: CircleModel= new CircleModel(this.controller) - @State itemIndex: number= 0 - @State count: number = 0 + @Local model: CircleModel= new CircleModel(this.controller) + @Local itemIndex: number= 0 + @Local count: number = 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){ @@ -81,7 +81,7 @@ struct IndicatoCircleVertical { .indicator((event: TouchEvent) => { this.model.notifyTouch(event, this.itemIndex) }) - CircleIndicator({ itemIndex: $itemIndex, model:this.model,count:$count}) + CircleIndicator({ itemIndex: this.itemIndex, model:this.model,count:this.count}) } .width('100%') .height('100%') diff --git a/entry/src/main/ets/pages/LineIndicator_custom.ets b/entry/src/main/ets/pages/LineIndicator_custom.ets index b883358dd6d7e875dfc7f5787e1cc790e4da915f..430d974c578ed7d67ee9ea0c02861c60b6a4cb75 100644 --- a/entry/src/main/ets/pages/LineIndicator_custom.ets +++ b/entry/src/main/ets/pages/LineIndicator_custom.ets @@ -20,11 +20,11 @@ import { LineIndicator, LineModel } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct LineIndicator_page { private controller: TabsController = new TabsController() - @State model: LineModel = new LineModel(this.controller) - @State index: number= 0 + @Local model: LineModel = new LineModel(this.controller) + @Local index: number= 0 aboutToAppear() { this.model @@ -66,7 +66,7 @@ struct LineIndicator_page { this.model.notifyTouch(event, this.index) }) - LineIndicator({ itemIndex: $index, model: this.model ,count: 4}) + LineIndicator({ itemIndex: this.index, model: this.model ,count: 4}) } .width('100%') diff --git a/entry/src/main/ets/pages/LineIndicator_default.ets b/entry/src/main/ets/pages/LineIndicator_default.ets index a2453ccc099b12917c77b98bf84f23e5e0c96570..9b365dcb316535c2b55cdc98e6ff191b6b1d89c5 100644 --- a/entry/src/main/ets/pages/LineIndicator_default.ets +++ b/entry/src/main/ets/pages/LineIndicator_default.ets @@ -20,11 +20,11 @@ import { LineIndicator, LineModel } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct LineIndicator_page { private controller: TabsController = new TabsController() - @State model: LineModel = new LineModel(this.controller) - @State index: number= 0 + @Local model: LineModel = new LineModel(this.controller) + @Local index: number= 0 aboutToAppear() { this.model.setHeight('40vp') @@ -61,7 +61,7 @@ struct LineIndicator_page { this.model.notifyTouch(event, this.index) }) - LineIndicator({ itemIndex: $index, model: this.model, count: 4 }) + LineIndicator({ itemIndex: this.index, model: this.model, count: 4 }) } .width('100%') diff --git a/entry/src/main/ets/pages/MagicSampleDefault1.ets b/entry/src/main/ets/pages/MagicSampleDefault1.ets index 16e4d9d1e559bcd547cb61f8199123872f1b73dd..4afa62e8c67992c8ad3d6085806a4f4368ce11b8 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault1.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault1.ets @@ -27,13 +27,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault1 { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model1: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model1: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -64,7 +64,7 @@ struct MagicSampleDefault1 { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model1, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model1, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSampleDefault2.ets b/entry/src/main/ets/pages/MagicSampleDefault2.ets index 195337d481f1d03efb300734960b0e4e368fbe2c..ceb5f8112e0f621419aab6a2c8c065a268d466e5 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault2.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault2.ets @@ -27,13 +27,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault2 { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model2: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model2: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -66,7 +66,7 @@ struct MagicSampleDefault2 { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model2, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model2, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSampleDefault3.ets b/entry/src/main/ets/pages/MagicSampleDefault3.ets index 0cdf446455541876cd8c4445d8c905aa2d920963..4ef742b430bf1db2cae9e9978f3b5cb05e0f202b 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault3.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault3.ets @@ -28,13 +28,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault3 { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model3: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model3: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -66,7 +66,7 @@ struct MagicSampleDefault3 { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model3, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model3, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSampleDefault4.ets b/entry/src/main/ets/pages/MagicSampleDefault4.ets index 4f0c28e0a8f4a03177e684cb038ebd4df52bc4fe..278bf46d00565dd40eed74805c173f9b889cf131 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault4.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault4.ets @@ -27,13 +27,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault4 { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model4: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model4: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -65,7 +65,7 @@ struct MagicSampleDefault4 { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model4, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model4, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSampleDefault5.ets b/entry/src/main/ets/pages/MagicSampleDefault5.ets index 2d9e0035de8b0df11f157aba89de176bb21afc0a..cb1e3a80f1822f810872006685aa397587f8e272 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault5.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault5.ets @@ -28,13 +28,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault5 { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model5: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model5: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -73,7 +73,7 @@ struct MagicSampleDefault5 { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model5, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model5, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSampleDefault6.ets b/entry/src/main/ets/pages/MagicSampleDefault6.ets index 0139c43246c21e4130ad448cf6afa011498b8047..ca5238c38c42ddd19c896daec27043b638fbb850 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault6.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault6.ets @@ -28,13 +28,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model6: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model6: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -72,7 +72,7 @@ struct MagicSampleDefault { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model6, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model6, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSampleDefault7.ets b/entry/src/main/ets/pages/MagicSampleDefault7.ets index 97f44619ee9aca8c5c75d683602e2325ca72bb07..8d411f3c55f89a5ffc8382a362e6cc02f9816fdc 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault7.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault7.ets @@ -28,13 +28,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model7: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model7: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -65,7 +65,7 @@ struct MagicSampleDefault { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model7, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model7, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSampleDefault8.ets b/entry/src/main/ets/pages/MagicSampleDefault8.ets index 517622f02598d68f7965cc7a3389ba452e465d83..1132f4c9cb8150076ce976bdcfda18e8a4d67a8c 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault8.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault8.ets @@ -27,13 +27,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model8: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model8: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -70,7 +70,7 @@ struct MagicSampleDefault { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model8, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model8, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSampleDefault9.ets b/entry/src/main/ets/pages/MagicSampleDefault9.ets index c59ae22148f8a1c7141f90252c596e524647516b..dc4a90cfc22cf47509118a2ffb658451dcc0886f 100644 --- a/entry/src/main/ets/pages/MagicSampleDefault9.ets +++ b/entry/src/main/ets/pages/MagicSampleDefault9.ets @@ -27,13 +27,13 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSampleDefault { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model9: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model9: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -65,7 +65,7 @@ struct MagicSampleDefault { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model9, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index, model: this.model9, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/MagicSamplePinnedTab.ets b/entry/src/main/ets/pages/MagicSamplePinnedTab.ets index b38c85b190c3b6c16435ad3d7db39c06beb6421c..148195a8f0256cf96c684132f5c68c426aff7c75 100644 --- a/entry/src/main/ets/pages/MagicSamplePinnedTab.ets +++ b/entry/src/main/ets/pages/MagicSamplePinnedTab.ets @@ -27,16 +27,17 @@ import { MagicScrollTabsIndicator, MagicScrollTabsModel, MagicTitleMode, MagicCu } @Entry -@Component +@ComponentV2 struct MagicSamplePinnedTab { private initData: Array = ["CUPCAKE", "DONUT", "FROYO", "GINGERBREAD", "HONEYCOMB", "ICE CREAM SANDWICH", "JELLY BEAN", "KITKAT"] - @State curData: Array = this.initData; - @State initDataLoading: Array = new Array() + @Local curData: Array = this.initData; + @Local initDataLoading: Array = new Array() private controller: TabsController = new TabsController() - @State model: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State @Watch("itemIndexChange") index: number = 0 + @Local model: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 + @Monitor('index') itemIndexChange() { setTimeout(() => { this.initDataLoading[this.index] = true @@ -140,7 +141,7 @@ struct MagicSamplePinnedTab { .width("100%").height("16%") - MagicScrollTabsIndicator({ index: $index, model: this.model, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index!!, model: this.model, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { ForEach(this.curData, (item: string, idx: number) => { this.TabContentSimple(idx) diff --git a/entry/src/main/ets/pages/SampleList.ets b/entry/src/main/ets/pages/SampleList.ets index baeb4d2ddeb7b52a496db758a0ff65e0b534676c..2409b4b466bdd3efb0c4e77a12a307dfb3b432d3 100644 --- a/entry/src/main/ets/pages/SampleList.ets +++ b/entry/src/main/ets/pages/SampleList.ets @@ -21,7 +21,7 @@ import router from '@ohos.router' import { PageInfo, PageItem } from './index' @Entry -@Component +@ComponentV2 struct SampleList { private pageInfo = router.getParams() as PageInfo diff --git a/entry/src/main/ets/pages/SpringSampleDefault.ets b/entry/src/main/ets/pages/SpringSampleDefault.ets index 7eee6d0bbcdb6e7bc561a040a344a636ecb3d6ec..8ed568281b359cdfc452d49aa1165c74632f0ee5 100644 --- a/entry/src/main/ets/pages/SpringSampleDefault.ets +++ b/entry/src/main/ets/pages/SpringSampleDefault.ets @@ -26,13 +26,13 @@ import { SpringScrollTabsIndicator, SpringScrollTabsModel } from '@ohos/circlein } @Entry -@Component +@ComponentV2 struct SpringSampleDefault { private initData: number[] = Array.from(new Array(16).keys()) private controller: TabsController = new TabsController() - @State model: SpringScrollTabsModel = new SpringScrollTabsModel(this.controller) - @State itemIndex: number = 2 - @State private isShow: boolean = false + @Local model: SpringScrollTabsModel = new SpringScrollTabsModel(this.controller) + @Local itemIndex: number = 2 + @Local private isShow: boolean = false @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -68,7 +68,7 @@ struct SpringSampleDefault { build() { Column({ space: 5 }) { - SpringScrollTabsIndicator({ itemIndex: $itemIndex, model: this.model, titles: this.initData }) + SpringScrollTabsIndicator({ itemIndex: this.itemIndex!!, model: this.model, titles: this.initData }) Tabs({ index: this.itemIndex, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/entry/src/main/ets/pages/TabsIndicatorDefault.ets b/entry/src/main/ets/pages/TabsIndicatorDefault.ets index 5b2769c5c31e0ee02aef0afe9556f43c7b870ae1..53ce43bcd4615457b4eaea92b38ee2f1d2c36174 100644 --- a/entry/src/main/ets/pages/TabsIndicatorDefault.ets +++ b/entry/src/main/ets/pages/TabsIndicatorDefault.ets @@ -25,15 +25,15 @@ import { ScrollTabsIndicator, ScrollTabsModel, IconItem } from '@ohos/circleindi } @Entry -@Component +@ComponentV2 struct TabsIndicatorDefault { private text = ['Calendar', 'Camera', 'Alarms', 'Location', 'Location'] private icons: IconItem[] = []; public controller: TabsController = new TabsController() - @State model: ScrollTabsModel = new ScrollTabsModel(this.controller) - @State model2: ScrollTabsModel = new ScrollTabsModel(this.controller) - @State model3: ScrollTabsModel = new ScrollTabsModel(this.controller) - @State index: number = 0 + @Local model: ScrollTabsModel = new ScrollTabsModel(this.controller) + @Local model2: ScrollTabsModel = new ScrollTabsModel(this.controller) + @Local model3: ScrollTabsModel = new ScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -85,9 +85,9 @@ struct TabsIndicatorDefault { build() { Column() { - ScrollTabsIndicator({ itemIndex: $index, model: this.model, titles: this.text }) - ScrollTabsIndicator({ itemIndex: $index, model: this.model2, titles: this.text }) - ScrollTabsIndicator({ itemIndex: $index, model: this.model3, titles: this.text }) + ScrollTabsIndicator({ itemIndex: this.index!!, model: this.model, titles: this.text }) + ScrollTabsIndicator({ itemIndex: this.index!!, model: this.model2, titles: this.text }) + ScrollTabsIndicator({ itemIndex: this.index!!, model: this.model3, titles: this.text }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/entry/src/main/ets/pages/TitlesSampleBottom.ets b/entry/src/main/ets/pages/TitlesSampleBottom.ets index a58febdc5759c6391b3ec8a771cab4d40318ebae..f2fd2f582b39cfffc9ee0241fb969d147ba7d81e 100644 --- a/entry/src/main/ets/pages/TitlesSampleBottom.ets +++ b/entry/src/main/ets/pages/TitlesSampleBottom.ets @@ -21,13 +21,13 @@ import {TitleIndicator} from '@ohos/circleindicator' import {TitleModel,TitleLinePosition} from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct TitlesSampleBottom { tabsController: TabsController = new TabsController() - @State + @Local model: TitleModel = new TitleModel(this.tabsController) titles: string[] = ["This", "Is", "A", "Test"] - @State + @Local index: number = 0 @Builder @@ -56,7 +56,7 @@ struct TitlesSampleBottom { .onTouch((event:TouchEvent) => { this.model.notifyTouch(event, this.index) }) - TitleIndicator({ titles: this.titles, itemIndex: $index, model: this.model }) + TitleIndicator({ titles: this.titles, itemIndex: this.index!!, model: this.model }) }.width('100%').height('100%') } diff --git a/entry/src/main/ets/pages/TitlesSampleDefault.ets b/entry/src/main/ets/pages/TitlesSampleDefault.ets index e9d9a6ce3291184815e0cd4c3f2eec1bba74a4f4..3938ec64eb28e66a87ee4eb0a2f60ce49e370770 100644 --- a/entry/src/main/ets/pages/TitlesSampleDefault.ets +++ b/entry/src/main/ets/pages/TitlesSampleDefault.ets @@ -22,13 +22,13 @@ import {TitleModel} from '@ohos/circleindicator' import prompt from '@system.prompt' @Entry -@Component +@ComponentV2 struct TitlesSampleDefault { tabsController: TabsController = new TabsController() - @State + @Local model: TitleModel = new TitleModel(this.tabsController); titles: string[] = ["This", "Is", "A", "Test"] - @State + @Local index: number = 0; @Builder @@ -42,7 +42,7 @@ struct TitlesSampleDefault { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - TitleIndicator({ titles: this.titles, itemIndex: $index, model: this.model }) + TitleIndicator({ titles: this.titles, itemIndex: this.index!!, model: this.model }) Tabs({ controller: this.tabsController }) { this.makeTabContent(0) this.makeTabContent(1) diff --git a/entry/src/main/ets/pages/TitlesSampleInitialPage.ets b/entry/src/main/ets/pages/TitlesSampleInitialPage.ets index cd88e0b808f237c5cb0e24e4adeda97aa900d91d..a4c2c63a4da695740c453073783b920f534cf381 100644 --- a/entry/src/main/ets/pages/TitlesSampleInitialPage.ets +++ b/entry/src/main/ets/pages/TitlesSampleInitialPage.ets @@ -21,13 +21,13 @@ import {TitleIndicator} from '@ohos/circleindicator' import {TitleModel} from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct TitlesSampleInitialPage { tabsController: TabsController = new TabsController() - @State + @Local model: TitleModel = new TitleModel(this.tabsController) titles: string[] = ["This", "Is", "A", "Test"] - @State + @Local index: number = 3 @Builder @@ -41,7 +41,7 @@ struct TitlesSampleInitialPage { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - TitleIndicator({ titles: this.titles, itemIndex: $index, model: this.model }) + TitleIndicator({ titles: this.titles, itemIndex: this.index!!, model: this.model }) Tabs({ index: this.index, controller: this.tabsController }) { this.makeTabContent(0) this.makeTabContent(1) diff --git a/entry/src/main/ets/pages/TitlesSampleStyled.ets b/entry/src/main/ets/pages/TitlesSampleStyled.ets index be96bad420f15f2440f3ae517f9ab45003bf9254..c2d9fc05be2e5a1fcf3a441bba22cc1c16464b63 100644 --- a/entry/src/main/ets/pages/TitlesSampleStyled.ets +++ b/entry/src/main/ets/pages/TitlesSampleStyled.ets @@ -21,13 +21,13 @@ import {TitleIndicator} from '@ohos/circleindicator' import {TitleModel,TitleIndicatorStyle} from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct TitlesSampleStyled { tabsController: TabsController = new TabsController() - @State + @Local model: TitleModel = new TitleModel(this.tabsController) titles: string[] = ["This", "Is", "A", "Test"] - @State + @Local index: number = 0 @Builder @@ -41,7 +41,7 @@ struct TitlesSampleStyled { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - TitleIndicator({ titles: this.titles, itemIndex: $index, model: this.model }) + TitleIndicator({ titles: this.titles, itemIndex: this.index!!, model: this.model }) Tabs({ controller: this.tabsController }) { this.makeTabContent(0) this.makeTabContent(1) diff --git a/entry/src/main/ets/pages/TitlesSampleTriangle.ets b/entry/src/main/ets/pages/TitlesSampleTriangle.ets index 8bb11cf0dc9502ff82334057ecf96ee649ac6390..2ce5232ea66ce3c44e5af6033451d717c00fe577 100644 --- a/entry/src/main/ets/pages/TitlesSampleTriangle.ets +++ b/entry/src/main/ets/pages/TitlesSampleTriangle.ets @@ -21,13 +21,13 @@ import {TitleIndicator} from '@ohos/circleindicator' import {TitleModel,TitleIndicatorStyle} from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct TitlesSampleTriangle { tabsController: TabsController = new TabsController() - @State + @Local model: TitleModel = new TitleModel(this.tabsController) titles: string[] = ["This", "Is", "A", "Test"] - @State + @Local index: number = 0 @Builder @@ -41,7 +41,7 @@ struct TitlesSampleTriangle { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - TitleIndicator({ titles: this.titles, itemIndex: $index, model: this.model }) + TitleIndicator({ titles: this.titles, itemIndex: this.index!!, model: this.model }) Tabs({ controller: this.tabsController }) { this.makeTabContent(0) this.makeTabContent(1) diff --git a/entry/src/main/ets/pages/TriangularSampleIndicator.ets b/entry/src/main/ets/pages/TriangularSampleIndicator.ets index 7d4fec1e72ee076fe5c7a6500109ecbade8a8360..49448e3bbfd4da102508cb16b2b5009673c72765 100644 --- a/entry/src/main/ets/pages/TriangularSampleIndicator.ets +++ b/entry/src/main/ets/pages/TriangularSampleIndicator.ets @@ -21,12 +21,12 @@ import Curves from '@ohos.curves' import { TriangularIndicator, TriangularModel } from '@ohos/circleindicator' @Entry -@Component +@ComponentV2 struct TriangularSampleIndicator { private data: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "NOUGAT", "DONUT"] private controller: TabsController = new TabsController() - @State model: TriangularModel = new TriangularModel(this.controller) - @State itemIndex: number = 0 + @Local model: TriangularModel = new TriangularModel(this.controller) + @Local itemIndex: number = 0 aboutToAppear() { this.model @@ -55,7 +55,7 @@ struct TriangularSampleIndicator { build() { Column() { - TriangularIndicator({ itemIndex: $itemIndex, count: this.data.length, model: this.model }) + TriangularIndicator({ itemIndex: this.itemIndex!, count: this.data.length, model: this.model }) Tabs({ index: this.itemIndex, controller: this.controller }) { this.TabContentSample(0) this.TabContentSample(1) diff --git a/entry/src/main/ets/pages/circleSampleChangDrawable.ets b/entry/src/main/ets/pages/circleSampleChangDrawable.ets index 1a9b8a04536f2b5a8484b8e858718b696c9a761b..2023ff11036c4d9bca3598a22816763d9065d0ed 100644 --- a/entry/src/main/ets/pages/circleSampleChangDrawable.ets +++ b/entry/src/main/ets/pages/circleSampleChangDrawable.ets @@ -25,13 +25,13 @@ import { CircleIndicator, CircleModel } from '@ohos/circleindicator' } @Entry -@Component +@ComponentV2 struct CircleSampleChangDrawable { - @State text:string[]= ["1","2","3","4","5"] - @State count: number = 0 + @Local text:string[]= ["1","2","3","4","5"] + @Local count: number = 0 private controller: TabsController = new TabsController() - @State model: CircleModel= new CircleModel(this.controller) - @State itemIndex: number= 0 + @Local model: CircleModel= new CircleModel(this.controller) + @Local itemIndex: number= 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -103,7 +103,7 @@ struct CircleSampleChangDrawable { this.model.notifyTouch(event, this.itemIndex) }) - CircleIndicator({ itemIndex: $itemIndex, model: this.model, count: $count }) + CircleIndicator({ itemIndex: this.itemIndex, model: this.model, count: this.count }) } .width('100%') diff --git a/entry/src/main/ets/pages/circleSampleDynamicAdapter.ets b/entry/src/main/ets/pages/circleSampleDynamicAdapter.ets index c3831c8897b05bb4d375f6051418d07e8734c84b..64eac07994a60eef4cee9826bcf7c688959d300c 100644 --- a/entry/src/main/ets/pages/circleSampleDynamicAdapter.ets +++ b/entry/src/main/ets/pages/circleSampleDynamicAdapter.ets @@ -25,13 +25,13 @@ import { CircleIndicator, CircleModel } from '@ohos/circleindicator' } @Entry -@Component +@ComponentV2 struct CircleSampleDynamicAdapter { - @State text: string[]= [""] - @State count: number = 0 + @Local text: string[]= [""] + @Local count: number = 0 private controller: TabsController = new TabsController() - @State model: CircleModel= new CircleModel(this.controller) - @State itemIndex: number= 0 + @Local model: CircleModel= new CircleModel(this.controller) + @Local itemIndex: number= 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -103,7 +103,7 @@ struct CircleSampleDynamicAdapter { this.model.notifyTouch(event, this.itemIndex) }) - CircleIndicator({ itemIndex: $itemIndex, model: this.model, count: $count }) + CircleIndicator({ itemIndex: this.itemIndex, model: this.model, count: this.count }) } .width('100%') diff --git a/entry/src/main/ets/pages/circleSampleSnackbar.ets b/entry/src/main/ets/pages/circleSampleSnackbar.ets index ffe8d37f2f56bf2739e962aa6f10248a68525682..c7eb357ebe59d6c827baf374af4679a17bbc520c 100644 --- a/entry/src/main/ets/pages/circleSampleSnackbar.ets +++ b/entry/src/main/ets/pages/circleSampleSnackbar.ets @@ -25,16 +25,16 @@ import { CircleIndicator, CircleModel } from '@ohos/circleindicator' } @Entry -@Component +@ComponentV2 struct CircleSampleSnackbar { - @State text: string[]= ["1", "2", "3", "4", "5"] - @State count: number = 0 + @Local text: string[]= ["1", "2", "3", "4", "5"] + @Local count: number = 0 private controller: TabsController = new TabsController() - @State model: CircleModel= new CircleModel(this.controller) - @State itemIndex: number= 0 - @State flag: boolean = false - @State snackbar: string = "Snackbar" - @State private scaleValue: number = 0 + @Local model: CircleModel= new CircleModel(this.controller) + @Local itemIndex: number= 0 + @Local flag: boolean = false + @Local snackbar: string = "Snackbar" + @Local private scaleValue: number = 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -118,7 +118,7 @@ struct CircleSampleSnackbar { if (this.flag == true) { Column() { - CircleIndicator({ itemIndex: $itemIndex, model: this.model, count: $count }) + CircleIndicator({ itemIndex: this.itemIndex, model: this.model, count: this.count }) } .translate({ x: this.scaleValue * -0.5, y: this.scaleValue * -70, z: this.scaleValue }) .onAppear(() => { @@ -134,7 +134,7 @@ struct CircleSampleSnackbar { }) }) } else { - CircleIndicator({ itemIndex: $itemIndex, model: this.model, count: $count }) + CircleIndicator({ itemIndex: this.itemIndex, model: this.model, count: this.count }) } } diff --git a/entry/src/main/ets/pages/index.ets b/entry/src/main/ets/pages/index.ets index 3ec785437084a06949cf4fffdfc435461bf0b897..c7885cd94cb9e28de3cd3cba927ad80cdc0bc286 100644 --- a/entry/src/main/ets/pages/index.ets +++ b/entry/src/main/ets/pages/index.ets @@ -30,7 +30,7 @@ export class PageInfo { } @Entry -@Component +@ComponentV2 struct Index { private pageInfo: PageInfo[] | null = null; diff --git a/library/oh-package.json5 b/library/oh-package.json5 index 45777869c319aac4a594b56f829b6ee14ad4b65b..c59557b4bfa97aab18abbfddeb9b2d4d94caa229 100644 --- a/library/oh-package.json5 +++ b/library/oh-package.json5 @@ -13,7 +13,7 @@ "main": "index.ets", "repository": "https://gitee.com/openharmony-sig/CircleIndicator", "type": "module", - "version": "2.0.0", + "version": "2.1.0-rc.0", "tags": [ "OpenHarmony", "indicator", diff --git a/library/src/main/ets/components/BadgeFixTabsIndicator.ets b/library/src/main/ets/components/BadgeFixTabsIndicator.ets index f0c4fc36a774ee605c54e2667be9d8a58ed80a46..771c6a3635cdc77a5836b1ca660c13a8c2241b72 100644 --- a/library/src/main/ets/components/BadgeFixTabsIndicator.ets +++ b/library/src/main/ets/components/BadgeFixTabsIndicator.ets @@ -19,18 +19,20 @@ import {BadgeFixTabsModel, BadgeAnchor, BadgeRule, BadgeType} from '../models/BadgeFixTabsModel' -@Component +@ComponentV2 struct BadgeFixTabsIndicator { - @State model: BadgeFixTabsModel = new BadgeFixTabsModel(null) - @State titles: Array = [] - @Link @Watch("itemIndexChange") itemIndex: number + @Param model: BadgeFixTabsModel = new BadgeFixTabsModel(null) + @Param titles: Array = [] + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; private startX: number = 0 - @State indicatorOffset: number = 0 + @Local indicatorOffset: number = 0 isInClick: boolean = false isOnTouch: boolean = false - @State newIndex: number = 0 + @Local newIndex: number = 0 timeoutId: number = -1 + @Monitor('itemIndex') itemIndexChange(): void { clearTimeout(this.timeoutId) this.reset(); @@ -250,7 +252,7 @@ struct BadgeFixTabsIndicator { }.onClick(() => { this.isInClick = true this.newIndex = index - this.itemIndex = index + this.$itemIndex(index) this.isInClick = false if (this.model.getClickListener()) { this.model.getClickListener()(this.itemIndex) diff --git a/library/src/main/ets/components/BannerIndicator.ets b/library/src/main/ets/components/BannerIndicator.ets index a6ee094c7df7ee3a1403cb2a8cb5200642236d6d..6bca3b4b1de7a34bd55a27b5976235c5a75a519d 100644 --- a/library/src/main/ets/components/BannerIndicator.ets +++ b/library/src/main/ets/components/BannerIndicator.ets @@ -22,23 +22,24 @@ import { BannerModel } from '../models/BannerModel' const FLING_INTERVAL: number = 30 const FLING_DURATION: number = 200 -@Component +@ComponentV2 struct BannerIndicator { - @Link + @Param @Require count: number - @State + @Param @Require model: BannerModel = new BannerModel(null) // fling过程中，计算游标位移所用，与Swiper的index变化不一定完全同步 - @Link @Watch("onIndexChange") + @Param @Require private flingIndex: number - @State + @Event $flingIndex: (val: number) => void = (val: number) => {}; + @Local private indicatorOffset: number = 0 flingTimeoutId: number = -1 // fade效果相关 fadeTimeoutId: number = -1 - @State + @Local private indicatorOpacity: number = 1 // autoPlay相关 @@ -47,6 +48,12 @@ struct BannerIndicator { startX: number = 0 lastX: number = 0 + @Monitor('flingIndex') + onIndexChange() { + clearTimeout(this.flingTimeoutId) + this.indicatorOffset = 0 + } + build() { Stack() { if (this.count == 1) { @@ -104,10 +111,7 @@ struct BannerIndicator { } } - onIndexChange() { - clearTimeout(this.flingTimeoutId) - this.indicatorOffset = 0 - } + onIndicatorTouch(event: TouchEvent, currentIndex: number) { switch (event.type) { @@ -172,7 +176,7 @@ struct BannerIndicator { } else if (direction === 1) { //显示下一页 说明往左滑动 offset 为正 if (offset >= 1 - offsetPerFrame) { - this.flingIndex = ((flingIndex + direction) % this.count + this.count) % this.count + this.$flingIndex((((flingIndex + direction) % this.count + this.count) % this.count)) this.indicatorOffset = 0 } else { this.indicatorOffset += offsetPerFrame @@ -184,7 +188,7 @@ struct BannerIndicator { } else if (direction === -1) { //显示上一页 说明往右滑动 offset 为负 if (offset <= -(1 - offsetPerFrame)) { - this.flingIndex = ((flingIndex + direction) % this.count + this.count) % this.count + this.$flingIndex((((flingIndex + direction) % this.count + this.count) % this.count)) this.indicatorOffset = 0 } else { this.indicatorOffset -= offsetPerFrame diff --git a/library/src/main/ets/components/BottomTabsIndicator.ets b/library/src/main/ets/components/BottomTabsIndicator.ets index 7afd05ed3b1bbad4302466b97d66a9dd44296a75..4940604bc30175fffadbf953ed85c044a5984d55 100644 --- a/library/src/main/ets/components/BottomTabsIndicator.ets +++ b/library/src/main/ets/components/BottomTabsIndicator.ets @@ -22,11 +22,12 @@ import { BottomTabsModel } from '../models/BottomTabsModel' import { TabIcon } from './model/TabIcon' import { TabInfo } from './model/TabInfo' -@Component +@ComponentV2 struct BottomTabsIndicator { - @State model: BottomTabsModel = new BottomTabsModel(null) - @Link itemIndex: number - @State titles: TabIcon[] = [] + @Param model: BottomTabsModel = new BottomTabsModel(null) + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param titles: TabIcon[] = [] private colorsUtilsToS: ColorGradient| null = null private colorsUtilsToN: ColorGradient| null = null private tabs: Array = [] @@ -209,7 +210,7 @@ struct BottomTabsIndicator { if (item.index == undefined) { this.model.getCenterClickListener()() } else { - this.itemIndex = item.index + this.$itemIndex(item.index) this.model.getTabsController()?.changeIndex(item.index) if (this.model.getClickListener()) { this.model.getClickListener()(item.index) @@ -253,7 +254,7 @@ struct BottomTabsIndicator { currentIndex++ } this.model.getTabsController()?.changeIndex(currentIndex) - this.itemIndex = currentIndex + this.$itemIndex(currentIndex) offset = 0 this.indicatorOffset = offset this.isMove = 0 diff --git a/library/src/main/ets/components/CapsuleFixTabsIndicator.ets b/library/src/main/ets/components/CapsuleFixTabsIndicator.ets index 999f1c3225dc2eea889b3e9edb9f6748f35f2c10..960a0ae4d4ee9e5976316e6cf9ba3e8e9e4fab57 100644 --- a/library/src/main/ets/components/CapsuleFixTabsIndicator.ets +++ b/library/src/main/ets/components/CapsuleFixTabsIndicator.ets @@ -21,19 +21,21 @@ import { ColorGradient } from '../utils/ColorGradient' import { CapsuleFixTabsModel } from '../models/CapsuleFixTabsModel' import { TabInfo } from './model/TabInfo' -@Component +@ComponentV2 struct CapsuleFixTabsIndicator { - @State model: CapsuleFixTabsModel = new CapsuleFixTabsModel(null) - @Link @Watch('onIndexChange') itemIndex: number - @State titles: string[] = [] + @Param model: CapsuleFixTabsModel = new CapsuleFixTabsModel(null) + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param titles: string[] = [] private tabs: Array = [] private colorsUtilsToS: ColorGradient| null = null private colorsUtilsToN: ColorGradient| null = null private startX = 0 private isMove: number = 0 - @State indicatorOffset: number = 0 + @Local indicatorOffset: number = 0 timeoutId: number = -1 + @Monitor('itemIndex') onIndexChange() { clearTimeout(this.timeoutId) this.reset(); @@ -155,7 +157,7 @@ struct CapsuleFixTabsIndicator { } .onClick(() => { this.model.getTabsController()?.changeIndex(item.index) - this.itemIndex = item.index?item.index:0 + this.$itemIndex((item.index?item.index:0)) if (this.model.getClickListener() && (item.index || item.index == 0)) { this.model.getClickListener()(item.index) } diff --git a/library/src/main/ets/components/CircleIndicator.ets b/library/src/main/ets/components/CircleIndicator.ets index baeb5c6ffe082822a778578c23a5e0e6eeb02039..e8b6500eb108a73a1b5cabacf027ac3aa437563a 100644 --- a/library/src/main/ets/components/CircleIndicator.ets +++ b/library/src/main/ets/components/CircleIndicator.ets @@ -19,18 +19,20 @@ import { CircleModel, Orientation } from '../models/CircleModel' -@Component +@ComponentV2 struct CircleIndicator { - @State model: CircleModel = new CircleModel(null) - @Link itemIndex: number - @State private opacityValue: number = 0 - @State private scaleValue: number = 0 - @Link @Watch('onCountChange') count: number - @State arr: number[] = [] + @Param model: CircleModel = new CircleModel(null) + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param private opacityValue: number = 0 + @Local private scaleValue: number = 0 + @Param @Require count: number + @Local arr: number[] = [] private startX: number = 0 - @State indicatorOffset: number = 0 + @Local indicatorOffset: number = 0 private upFlag: boolean = false;//横向移动手势抬起标志 + @Monitor('count') onCountChange() { this.arr = Array.from(new Array(this.count).keys()) } @@ -608,7 +610,7 @@ struct CircleIndicator { this.model.getTabsController()?.changeIndex(itemIndex) offset = 0 this.indicatorOffset = offset - this.itemIndex = itemIndex + this.$itemIndex(itemIndex) } } } diff --git a/library/src/main/ets/components/FixTabsIndicator.ets b/library/src/main/ets/components/FixTabsIndicator.ets index a51f4534fba68c15e4498f45637d74ce223a6cc0..ee1e4814ba735d9f45d67a70d1745b464cd23d55 100644 --- a/library/src/main/ets/components/FixTabsIndicator.ets +++ b/library/src/main/ets/components/FixTabsIndicator.ets @@ -21,19 +21,21 @@ import { ColorGradient } from '../utils/ColorGradient' import { FixTabsModel, CursorType } from '../models/FixTabsModel' import { TabInfo } from './model/TabInfo' -@Component +@ComponentV2 struct FixTabsIndicator { - @State model: FixTabsModel = new FixTabsModel(null) - @Link @Watch('onIndexChange') itemIndex: number - @State titles: Array = [] + @Param model: FixTabsModel = new FixTabsModel(null) + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param titles: Array = [] private tabs: Array = [] private colorsUtilsToS: ColorGradient| null = null private colorsUtilsToN: ColorGradient| null = null private startX = 0 - @State indicatorOffset: number = 0 - @State isMove: number = 0 // 0 停止 1左 2右 + @Local indicatorOffset: number = 0 + @Local isMove: number = 0 // 0 停止 1左 2右 timeoutId: number = -1 + @Monitor('itemIndex') onIndexChange() { clearTimeout(this.timeoutId) this.reset(); @@ -183,7 +185,7 @@ struct FixTabsIndicator { .width(360 / this.tabs.length) .height('100%') .onClick(() => { - this.itemIndex = item.index?item.index:0 + this.$itemIndex((item.index?item.index:0)) this.model.getTabsController()?.changeIndex(item.index) if (this.model.getClickListener() && (item.index || item.index == 0)) { this.model.getClickListener()(item.index) diff --git a/library/src/main/ets/components/IconIndicator.ets b/library/src/main/ets/components/IconIndicator.ets index eba9c88a07c6e058131d024964496831b49368c5..6b4f7033396e3b2ebd99952cdf3848efcba0ac5a 100644 --- a/library/src/main/ets/components/IconIndicator.ets +++ b/library/src/main/ets/components/IconIndicator.ets @@ -18,11 +18,17 @@ */ import { IconModel, IconItem } from '../models/IconModel' -@Component +@ComponentV2 struct IconIndicator { - @State model: IconModel = new IconModel(null) - @Link @Watch("itemIndexChange") itemIndex: number - @State iconItems: Array = [] + @Param model: IconModel = new IconModel(null) + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param iconItems: Array = [] + + @Monitor('itemIndex') + itemIndexChange() { + this.model.getChangeListener()(this.itemIndex) + } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -39,10 +45,6 @@ struct IconIndicator { .width(this.model.getWidth()).backgroundColor(this.model.getBackgroundColor()) .height(this.model.getHeight()) } - - itemIndexChange() { - this.model.getChangeListener()(this.itemIndex) - } } export default IconIndicator \ No newline at end of file diff --git a/library/src/main/ets/components/LineIndicator.ets b/library/src/main/ets/components/LineIndicator.ets index 6cb88fdf507e9cf738ebd09c9f02ccd7678bde3f..4ec0c60df24c4dfcf66a34e966ee1420dcfb8fc5 100644 --- a/library/src/main/ets/components/LineIndicator.ets +++ b/library/src/main/ets/components/LineIndicator.ets @@ -19,21 +19,24 @@ import { LineModel } from '../models/LineModel' -@Component +@ComponentV2 struct LineIndicator { - @State model: LineModel = new LineModel(null) - @Link @Watch('onIndexChange') itemIndex: number - @State @Watch('onCountChange') count: number = 0 - @State arr: number[] = [] + @Param model: LineModel = new LineModel(null) + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param count: number = 0 + @Local arr: number[] = [] private startX = 0 - @State indicatorOffset: number = 0 + @Local indicatorOffset: number = 0 timeoutId: number = -1 + @Monitor('itemIndex') onIndexChange() { clearTimeout(this.timeoutId) this.reset(); } + @Monitor('count') onCountChange() { this.arr = Array.from(new Array(this.count).keys()) } diff --git a/library/src/main/ets/components/MagicScrollTabsIndicator.ets b/library/src/main/ets/components/MagicScrollTabsIndicator.ets index 24469d21e33d86bbc7d3de546f1e7f6c8ee2ebfe..f9e9ebdd5fd4ff39f18f0cde4971103a4f4258f0 100644 --- a/library/src/main/ets/components/MagicScrollTabsIndicator.ets +++ b/library/src/main/ets/components/MagicScrollTabsIndicator.ets @@ -25,45 +25,20 @@ import ComputeTextWidth from "./inner_components/computeTextWidth" import { MagicScrollTabsModel, TitleMode, CursorType, DividerWidthMode } from '../models/MagicScrollTabsModel' -@Component +@ComponentV2 struct MagicScrollTabsIndicator { - @State model: MagicScrollTabsModel = new MagicScrollTabsModel(null) - @Link @Watch("itemIndexChange") index: number - @State titles: Array = [] - @State fixed: boolean = false - @State indicatorOffset: number = 0 + @Param model: MagicScrollTabsModel = new MagicScrollTabsModel(null) + @Param @Require index: number + @Event $index: (val: number) => void = (val: number) => {}; + @Param titles: Array = [] + @Local fixed: boolean = false + @Local indicatorOffset: number = 0 private startX = 0 private scroller: Scroller = new Scroller() private lastIndex: number = 0 - @State computeEnd: boolean = false - - onIndicatorTouch(event: TouchEvent, index: number) { - let startX = this.startX - let offset = 0 - if (event.type === TouchType.Down) { - this.startX = event.touches[0].x - } - if (event.type === TouchType.Move) { - offset = event.touches[0].x - startX - if ((offset >= 0 && index > 0) || (offset <= 0 && index < this.titles.length - 1)) { - this.indicatorOffset = offset - } - } - if (event.type === TouchType.Up) { - offset = event.touches[0].x - startX - offset = 0 - this.indicatorOffset = offset - } - if (this.model.isFollowTouch() && this.computeEnd) { - this.scroller.scrollTo({ - xOffset: (-px2vp(this.model.getViewWidth()) / 2) + this.model.getLeftPadding() - - px2vp(this.model.getViewWidth()) * (this.model.getScrollPivotX() - 0.5) - + this.scrollExtra(index), - yOffset: 0 - }) - } - } + @Local computeEnd: boolean = false + @Monitor('index') itemIndexChange() { if (this.model.isClickChange() && this.lastIndex == this.index) { return @@ -78,15 +53,15 @@ struct MagicScrollTabsIndicator { this.model.getTabsController()?.changeIndex(this.index) if (that.model.isEnablePivotScroll() && this.model.isFollowTouch()) { xOffset = (-px2vp(this.model.getViewWidth()) / 2) + this.model.getLeftPadding() - - (that.model.getScrollPivotX() - 0.5) * px2vp(this.model.getViewWidth()) + that.scrollExtra(index) + - (that.model.getScrollPivotX() - 0.5) * px2vp(this.model.getViewWidth()) + that.scrollExtra(index) } else if (that.scroller.currentOffset().xOffset < this.model.getLeftPadding() + that.scrollExtra(index) - + that.model.getTextModel().getTextWidthList()[index] / 2 - px2vp(that.model.getViewWidth())) { + + that.model.getTextModel().getTextWidthList()[index] / 2 - px2vp(that.model.getViewWidth())) { xOffset = this.model.getLeftPadding() + that.scrollExtra(index) - + that.model.getTextModel().getTextWidthList()[index] / 2 - px2vp(that.model.getViewWidth()) + + that.model.getTextModel().getTextWidthList()[index] / 2 - px2vp(that.model.getViewWidth()) } else if (that.scroller.currentOffset().xOffset > this.model.getLeftPadding() + that.scrollExtra(index) - - that.model.getTextModel().getTextWidthList()[index] / 2) { + - that.model.getTextModel().getTextWidthList()[index] / 2) { xOffset = this.model.getLeftPadding() + that.scrollExtra(index) - - that.model.getTextModel().getTextWidthList()[index] / 2 + - that.model.getTextModel().getTextWidthList()[index] / 2 } that.scroller.scrollTo({ xOffset: xOffset, @@ -112,6 +87,33 @@ struct MagicScrollTabsIndicator { } + onIndicatorTouch(event: TouchEvent, index: number) { + let startX = this.startX + let offset = 0 + if (event.type === TouchType.Down) { + this.startX = event.touches[0].x + } + if (event.type === TouchType.Move) { + offset = event.touches[0].x - startX + if ((offset >= 0 && index > 0) || (offset <= 0 && index < this.titles.length - 1)) { + this.indicatorOffset = offset + } + } + if (event.type === TouchType.Up) { + offset = event.touches[0].x - startX + offset = 0 + this.indicatorOffset = offset + } + if (this.model.isFollowTouch() && this.computeEnd) { + this.scroller.scrollTo({ + xOffset: (-px2vp(this.model.getViewWidth()) / 2) + this.model.getLeftPadding() + - px2vp(this.model.getViewWidth()) * (this.model.getScrollPivotX() - 0.5) + + this.scrollExtra(index), + yOffset: 0 + }) + } + } + aboutToAppear() { this.model.setOnPageTouchListener((event: TouchEvent, currentIndex: number) => { this.onIndicatorTouch(event, currentIndex); @@ -134,13 +136,13 @@ struct MagicScrollTabsIndicator { Stack() { Row() { if (this.model.getTitleMode() == TitleMode.DEFAULT) { - DefaultText({ index: index, itemIndex: $index, model: this.model }) + DefaultText({ index: index, itemIndex: this.index, model: this.model }) } else if (this.model.getTitleMode() == TitleMode.COLOR_FLIP) { - ColorFlipText({ index: index, indicatorOffset: this.indicatorOffset, itemIndex: $index, model: this.model }) + ColorFlipText({ index: index, indicatorOffset: this.indicatorOffset, itemIndex: this.index, model: this.model }) } else if (this.model.getTitleMode() == TitleMode.COLOR_GRADIENT) { - ColorGradientText({ index: index, indicatorOffset: this.indicatorOffset, itemIndex: $index, model: this.model }) + ColorGradientText({ index: index, indicatorOffset: this.indicatorOffset, itemIndex: this.index, model: this.model }) } else if (this.model.getTitleMode() == TitleMode.CLIP) { - ClipText({ index: index, indicatorOffset: this.indicatorOffset, itemIndex: $index, model: this.model }) + ClipText({ index: index, indicatorOffset: this.indicatorOffset, itemIndex: this.index, model: this.model }) } } .padding({ @@ -209,7 +211,7 @@ struct MagicScrollTabsIndicator { && index == 0 ? this.model.getPinnedTabBgColor() : "#00000000") .height("100%").onClick(() => { this.model.setClickChange(true) - this.index = index + this.$index(index) this.model.setClickChange(false) if (this.model.getClickListener()) { this.model.getClickListener()(this.index) diff --git a/library/src/main/ets/components/ScrollTabsIndicator.ets b/library/src/main/ets/components/ScrollTabsIndicator.ets index 402aa3cd6f178217dcba739cce1c90dcf24a9da1..3f98e40098c5de40a159238ca9ac4950aad24d78 100644 --- a/library/src/main/ets/components/ScrollTabsIndicator.ets +++ b/library/src/main/ets/components/ScrollTabsIndicator.ets @@ -18,15 +18,17 @@ */ import { ScrollTabsModel } from '../models/ScrollTabsModel' -@Component +@ComponentV2 struct ScrollTabsIndicator { - @State model: ScrollTabsModel = new ScrollTabsModel(null) - @State titles: string[] = [] - @Link @Watch("itemIndexChange") itemIndex: number + @Param model: ScrollTabsModel = new ScrollTabsModel(null) + @Param titles: string[] = [] + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; scroller: Scroller = new Scroller() private startX: number = 0 private indicatorOffset: number = 0 + @Monitor('itemIndex') itemIndexChange(): void { this.model.getTabsController()?.changeIndex(this.itemIndex) if (this.model.getChangeListener()) { @@ -70,7 +72,7 @@ struct ScrollTabsIndicator { .opacity(0.3) } }.onClick(() => { - this.itemIndex = idx + this.$itemIndex(idx) if (this.model.getClickListener()) { this.model.getClickListener()(this.itemIndex) } @@ -123,7 +125,7 @@ struct ScrollTabsIndicator { offset = 0 this.indicatorOffset = offset this.model.getTabsController()?.changeIndex(this.itemIndex) - this.itemIndex = index + this.$itemIndex(index) } } } diff --git a/library/src/main/ets/components/SpringScrollTabsIndicator.ets b/library/src/main/ets/components/SpringScrollTabsIndicator.ets index 9e4f7a1545dffe8b0e141b276f2782c874097aa1..2992b97ca38efff16f1be5183e2658c100c83e53 100644 --- a/library/src/main/ets/components/SpringScrollTabsIndicator.ets +++ b/library/src/main/ets/components/SpringScrollTabsIndicator.ets @@ -18,17 +18,19 @@ */ import { SpringScrollTabsModel } from '../models/SpringScrollTabsModel' -@Component +@ComponentV2 struct SpringScrollTabsIndicator { - @State model: SpringScrollTabsModel = new SpringScrollTabsModel(null) - @Link @Watch("itemIndexChange") itemIndex: number - @State titles: Array = [] + @Param model: SpringScrollTabsModel = new SpringScrollTabsModel(null) + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param titles: Array = [] private scroller: Scroller = new Scroller() private lastIndex: number = 0 private startX: number = 0 - @State indicatorOffset: number = 0 + @Local indicatorOffset: number = 0 private timeoutId = -1; + @Monitor('itemIndex') itemIndexChange() { let itemIndex = this.itemIndex this.model.getTabsController()?.changeIndex(itemIndex) @@ -73,7 +75,7 @@ struct SpringScrollTabsIndicator { .height("100%") .onClick(() => { this.model.setClickChange(true) - this.itemIndex = index + this.$itemIndex(index) }) } diff --git a/library/src/main/ets/components/TitleIndicator.ets b/library/src/main/ets/components/TitleIndicator.ets index 072e2bba9b2ae9d884051383bb0f6a5c824b5d4d..be377d6e683c2872a6f4d809767f1a7d29487ec4 100644 --- a/library/src/main/ets/components/TitleIndicator.ets +++ b/library/src/main/ets/components/TitleIndicator.ets @@ -25,16 +25,17 @@ const SPEED_THRESHOLD: number = 30 const FLING_INTERVAL: number = 20 const FLING_OFFSET_PER_FRAME: number = 0.1 -@Component +@ComponentV2 struct TitleIndicator { - @State @Watch("onTitlesUpdate") + @Param titles: string[] = [] - @Link itemIndex: number + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; - @State + @Param model: TitleModel = new TitleModel(null) listBounds: Array = []; - @State + @Local horizontalVpOffsets:number[] = [] // 记录延时动画id, 每次触发touch事件后丢弃之前未播放完的动画, 防止快速连续切换后状态混乱 @@ -57,8 +58,8 @@ struct TitleIndicator { // originalOffset在(0.5, 1] 区间时, 原始页右页占屏幕中央部分, centerIndex == originalIndex - 1, centerIndex 范围 (-1, 0] // vpOffsets 存储每个title的水平位移 单位vp originalIndex: number = 0 - @State @Watch("onOriginalOffsetChange") - originalOffset: number = 0 + @Param originalOffset: number = 0 + @Event $originalOffset: (val: number) => void = (val: number) => {}; centerOffset: number = 0 centerIndex: number = 0 @@ -154,6 +155,7 @@ struct TitleIndicator { .backgroundColor(this.model.getBackgroundColor()) } + @Monitor('titles') onTitlesUpdate() { if (this.listBounds.length != this.titles.length) { this.listBounds = Array.from({ length: this.titles.length }, (item: string, index: number) => new Bounds(0, 0, 0, 0)) @@ -176,13 +178,13 @@ struct TitleIndicator { this.startX = (event.changedTouches[0].screenX) this.lastX2 = this.startX this.lastX = this.startX - this.originalOffset = 0 + this.$originalOffset(0) this.movedDuringTouch = false break case TouchType.Move: this.lastX2 = this.lastX this.lastX = (event.changedTouches[0].screenX) - this.originalOffset = (this.lastX - this.startX) / this.model.getWidth() + this.$originalOffset(((this.lastX - this.startX) / this.model.getWidth())) this.movedDuringTouch = true break case TouchType.Up: @@ -217,7 +219,7 @@ struct TitleIndicator { this.targetIndex = nextIndex this.timeoutId = setTimeout(() => { this.refreshOffsetForFling(this.originalIndex, this.originalOffset, nextIndex) - this.originalOffset = 0 + this.$originalOffset(0) clearTimeout(this.timeoutId) }, FLING_INTERVAL) break @@ -225,6 +227,7 @@ struct TitleIndicator { } // 为减少调用次数优化性能,只监听了 originalOffset属性, 当同时更新originalIndex与originalOffset时, 需确保originalOffset最后赋值 + @Monitor('originalOffset') onOriginalOffsetChange() { let originalIndex = this.originalIndex let originalOffset = this.originalOffset @@ -244,7 +247,7 @@ struct TitleIndicator { } onIndexChange () { - this.itemIndex = this.originalIndex + this.$itemIndex(this.originalIndex) if (this.model.getChangeListener()) { this.model.getChangeListener()(this.originalIndex) } @@ -290,9 +293,9 @@ struct TitleIndicator { refreshOffsetForFling(originalIndex: number, originalOffset:number, nextIndex: number) { if (nextIndex === originalIndex) { if (Math.abs(originalOffset) <= FLING_OFFSET_PER_FRAME) { - this.originalOffset = 0 + this.$originalOffset(0) } else { - this.originalOffset = (Math.abs(this.originalOffset) - FLING_OFFSET_PER_FRAME) * Math.sign(this.originalOffset) + this.$originalOffset(((Math.abs(this.originalOffset) - FLING_OFFSET_PER_FRAME) * Math.sign(this.originalOffset))) clearTimeout(this.timeoutId) this.timeoutId = setTimeout(() => { this.refreshOffsetForFling(originalIndex, this.originalOffset, nextIndex) }, FLING_INTERVAL) } @@ -300,9 +303,9 @@ struct TitleIndicator { if (originalOffset <= -(1 - FLING_OFFSET_PER_FRAME)) { this.originalIndex = nextIndex this.onIndexChange() - this.originalOffset = 0 + this.$originalOffset(0) } else { - this.originalOffset -= FLING_OFFSET_PER_FRAME + this.$originalOffset(this.originalOffset - FLING_OFFSET_PER_FRAME) clearTimeout(this.timeoutId) this.timeoutId = setTimeout(() => { this.refreshOffsetForFling(originalIndex, this.originalOffset, nextIndex) }, FLING_INTERVAL) } @@ -310,9 +313,9 @@ struct TitleIndicator { if (originalOffset >= 1 - FLING_OFFSET_PER_FRAME) { this.originalIndex = nextIndex this.onIndexChange() - this.originalOffset = 0 + this.$originalOffset(0) } else { - this.originalOffset += FLING_OFFSET_PER_FRAME + this.$originalOffset(this.originalOffset + FLING_OFFSET_PER_FRAME) clearTimeout(this.timeoutId) this.timeoutId = setTimeout(() => { this.refreshOffsetForFling(originalIndex, this.originalOffset, nextIndex) }, FLING_INTERVAL) } diff --git a/library/src/main/ets/components/TriangularIndicator.ets b/library/src/main/ets/components/TriangularIndicator.ets index 08b7144dd8850205785f5863352b679175a4f74b..913d2045b211e10f674cdee53194c0b34ff5b7f1 100644 --- a/library/src/main/ets/components/TriangularIndicator.ets +++ b/library/src/main/ets/components/TriangularIndicator.ets @@ -19,16 +19,18 @@ import { TriangularModel } from '../models/TriangularModel' //import Curves from '@ohos.curves' -@Component +@ComponentV2 struct TriangularIndicator { - @State model: TriangularModel = new TriangularModel(null) - @Link @Watch("itemIndexChange") itemIndex: number - @State count: number = 0 + @Param model: TriangularModel = new TriangularModel(null) + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param count: number = 0 private startX: number = 0 - @State indicatorOffset: number = 0 - @State mYOffset: number = 0 + @Local indicatorOffset: number = 0 + @Local mYOffset: number = 0 timeoutId: number = -1 + @Monitor('itemIndex') itemIndexChange(): void { clearTimeout(this.timeoutId) this.indicatorOffset = 0; diff --git a/library/src/main/ets/components/inner_components/MeasurableText.ets b/library/src/main/ets/components/inner_components/MeasurableText.ets index 6b0426839fc2ad47fd643d95ac221eddff1b5b72..952fb75aa6c24f7a3a3d11a1735e2461a1d787bb 100644 --- a/library/src/main/ets/components/inner_components/MeasurableText.ets +++ b/library/src/main/ets/components/inner_components/MeasurableText.ets @@ -19,19 +19,26 @@ import {evaluateTextHeight} from '../../utils/UiUtil' -@Component +@ComponentV2 struct MeasurableText { scroller: Scroller = new Scroller() - @State @Watch("onTextChange") + @Param model: MeasurableText.Model = new MeasurableText.Model(); - @Prop @Watch("onTextChange") + @Param @Require text: string private measured: boolean = false; - @State + @Local textWidth: number = 0; - @State + @Local textHeight: number = 0 + @Monitor('model','text') + onTextChange() { + this.scroller.scrollTo({ + xOffset: 360, yOffset: 0, //xOffset设为100%只有第一次有效，之后只能设一个极大坐标来滑到新的终点 + }); + } + build() { Stack() { Scroll(this.scroller) { @@ -77,12 +84,6 @@ struct MeasurableText { .scrollBar(BarState.Off) }.enabled(false) } - - onTextChange() { - this.scroller.scrollTo({ - xOffset: 360, yOffset: 0, //xOffset设为100%只有第一次有效，之后只能设一个极大坐标来滑到新的终点 - }); - } } namespace MeasurableText { diff --git a/library/src/main/ets/components/inner_components/clipText.ets b/library/src/main/ets/components/inner_components/clipText.ets index efab91cdc38874dcee85fe7337226adb6a07d08e..7ec339b02f933465e9cbd4678275fe6957cc5686 100644 --- a/library/src/main/ets/components/inner_components/clipText.ets +++ b/library/src/main/ets/components/inner_components/clipText.ets @@ -19,18 +19,19 @@ import { MagicScrollTabsModel } from "../../models/MagicScrollTabsModel" -@Component +@ComponentV2 struct ClipText { - index: number = 0 - @Link @Watch("rectChange") itemIndex: number - @State @Watch("rectChange") indicatorOffset: number = 0 - @State @Watch("rectChange") model: MagicScrollTabsModel = new MagicScrollTabsModel(null) - @State method: ClipText.Method = new ClipText.Method() - @State rect: RectAttribute = new Rect({ + @Param index: number = 0 + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param indicatorOffset: number = 0 + @Param model: MagicScrollTabsModel = new MagicScrollTabsModel(null) + @Local method: ClipText.Method = new ClipText.Method() + @Local rect: RectAttribute = new Rect({ width: "0%", height: "100%" }) - + @Monitor('itemIndex','indicatorOffset','model') rectChange() { this.rect = new Rect({ width: this.method.clipFontWidth(this.model, this.index, this.itemIndex, false, this.indicatorOffset), diff --git a/library/src/main/ets/components/inner_components/colorFlipText.ets b/library/src/main/ets/components/inner_components/colorFlipText.ets index b82bc9ab6185779c3fef6b5c813c5071be345612..4d7e9278af5acaa47fdd95b81ff9d8233c529eb9 100644 --- a/library/src/main/ets/components/inner_components/colorFlipText.ets +++ b/library/src/main/ets/components/inner_components/colorFlipText.ets @@ -19,13 +19,14 @@ import { MagicScrollTabsModel } from "../../models/MagicScrollTabsModel" -@Component +@ComponentV2 struct ColorFlipText { - index: number = 0 - @Link itemIndex: number - @State indicatorOffset: number = 0 - @State model: MagicScrollTabsModel = new MagicScrollTabsModel(null) - @State method: ColorFlipText.Method = new ColorFlipText.Method() + @Param index: number = 0 + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param indicatorOffset: number = 0 + @Param model: MagicScrollTabsModel = new MagicScrollTabsModel(null) + @Local method: ColorFlipText.Method = new ColorFlipText.Method() build() { Text(this.model.getTitles()[this.index]) diff --git a/library/src/main/ets/components/inner_components/colorGradientText.ets b/library/src/main/ets/components/inner_components/colorGradientText.ets index c11a1a2400565af6881852fda7fda4f1368dd673..a2a470f59df64769a07212be26af621bd88b5c60 100644 --- a/library/src/main/ets/components/inner_components/colorGradientText.ets +++ b/library/src/main/ets/components/inner_components/colorGradientText.ets @@ -19,13 +19,14 @@ import { MagicScrollTabsModel } from "../../models/MagicScrollTabsModel" -@Component +@ComponentV2 struct ColorGradientText { - index: number = 0 - @State indicatorOffset: number = 0 - @Link itemIndex: number - @State model: MagicScrollTabsModel = new MagicScrollTabsModel(null) - @State method: ColorGradientText.Method = new ColorGradientText.Method() + @Param index: number = 0 + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param indicatorOffset: number = 0 + @Param model: MagicScrollTabsModel = new MagicScrollTabsModel(null) + @Local method: ColorGradientText.Method = new ColorGradientText.Method() build() { Text(this.model.getTitles()[this.index]) diff --git a/library/src/main/ets/components/inner_components/computeTextWidth.ets b/library/src/main/ets/components/inner_components/computeTextWidth.ets index 4ef66784258e1225991f6366716f4283ffb137e7..2712e6539157d6a5d90df566ed16e2f32d889367 100644 --- a/library/src/main/ets/components/inner_components/computeTextWidth.ets +++ b/library/src/main/ets/components/inner_components/computeTextWidth.ets @@ -17,9 +17,9 @@ * limitations under the License. */ -@Component +@ComponentV2 struct ComputeTextWidth { - @State textModel: ComputeTextWidth.textModel = new ComputeTextWidth.textModel() + @Param textModel: ComputeTextWidth.textModel = new ComputeTextWidth.textModel() build() { Scroll(this.textModel.getScroller()) { diff --git a/library/src/main/ets/components/inner_components/defaultText.ets b/library/src/main/ets/components/inner_components/defaultText.ets index 598aec6cdb762ff9cd34cdc33c0d2e75e34e24dd..c173e6c08b49704a6545473eacb446c8456139fc 100644 --- a/library/src/main/ets/components/inner_components/defaultText.ets +++ b/library/src/main/ets/components/inner_components/defaultText.ets @@ -19,11 +19,12 @@ import { MagicScrollTabsModel } from "../../models/MagicScrollTabsModel" -@Component +@ComponentV2 struct DefaultText { - index: number = 0 - @Link itemIndex: number - @State model: MagicScrollTabsModel = new MagicScrollTabsModel(null) + @Param index: number = 0 + @Param @Require itemIndex: number + @Event $itemIndex: (val: number) => void = (val: number) => {}; + @Param model: MagicScrollTabsModel = new MagicScrollTabsModel(null) build() { Text(this.model.getTitles()[this.index]) diff --git a/library/src/main/ets/models/BadgeFixTabsModel.ets b/library/src/main/ets/models/BadgeFixTabsModel.ets index 2967e738f5c962d0338b4eaa54a0d4ad7768d6fc..464d2c15b052e9b7c9dd2d9fa66ccf508714ce0f 100644 --- a/library/src/main/ets/models/BadgeFixTabsModel.ets +++ b/library/src/main/ets/models/BadgeFixTabsModel.ets @@ -28,27 +28,27 @@ const DEFAULT_WIDTH: Length = '480vp' const DEFAULT_INDICATOR_HEIGHT: Length = '3vp' const DEFAULT_UNSELECTED_TEXT_SIZE = '13fp' const DEFAULT_SELECTED_TEXT_SIZE = '17fp' - +@ObservedV2 export class BadgeFixTabsModel extends BaseModel { - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) - public mBadgeTypes: Array = [] - private mBadgeText: Array = [] - private mBadgeRuleX: Array = [] - private mBadgeRuleY: Array = [] - private mAutoCancelBadge: boolean = false - private mItemWidths: Array = [] - private mIndicatorHeight: number = length2Vp(getContext(), DEFAULT_INDICATOR_HEIGHT) - private mIndicatorColor: ResourceColor = $r('app.color.transparent') - private mIndicatorYOffset: number = 0 - private mUnselectedTextColor: string = DEFAULT_SELECTED_COLOR - private mSelectedTextColor: string = DEFAULT_UNSELECTED_COLOR - private mUnselectedTextSize: number = length2Vp(getContext(), DEFAULT_UNSELECTED_TEXT_SIZE) - private mSelectedTextSize: number = length2Vp(getContext(), DEFAULT_SELECTED_TEXT_SIZE) - private mChangeTextSize: boolean = false - private mSplit: boolean = false - private mIndicatorAnimation: boolean = false - private clickListener: (itemIndex: number) => void = (itemIndex: number) => {} + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) + @Trace public mBadgeTypes: Array = [] + @Trace private mBadgeText: Array = [] + @Trace private mBadgeRuleX: Array = [] + @Trace private mBadgeRuleY: Array = [] + @Trace private mAutoCancelBadge: boolean = false + @Trace private mItemWidths: Array = [] + @Trace private mIndicatorHeight: number = length2Vp(getContext(), DEFAULT_INDICATOR_HEIGHT) + @Trace private mIndicatorColor: ResourceColor = $r('app.color.transparent') + @Trace private mIndicatorYOffset: number = 0 + @Trace private mUnselectedTextColor: string = DEFAULT_SELECTED_COLOR + @Trace private mSelectedTextColor: string = DEFAULT_UNSELECTED_COLOR + @Trace private mUnselectedTextSize: number = length2Vp(getContext(), DEFAULT_UNSELECTED_TEXT_SIZE) + @Trace private mSelectedTextSize: number = length2Vp(getContext(), DEFAULT_SELECTED_TEXT_SIZE) + @Trace private mChangeTextSize: boolean = false + @Trace private mSplit: boolean = false + @Trace private mIndicatorAnimation: boolean = false + @Trace private clickListener: (itemIndex: number) => void = (itemIndex: number) => {} constructor(tabsController: TabsController| null) { super(tabsController) diff --git a/library/src/main/ets/models/BannerModel.ets b/library/src/main/ets/models/BannerModel.ets index 1061f472e5f8c894a42ed72266481891be698324..25e982bad2ad3bb5b9d7fd6ae03f8d29bd71ddd5 100644 --- a/library/src/main/ets/models/BannerModel.ets +++ b/library/src/main/ets/models/BannerModel.ets @@ -24,21 +24,22 @@ const DEFAULT_AUTO_PLAY_TIME = 4000; const DEFAULT_FADE_DELAY = 300; const DEFAULT_FADE_LENGTH = 400; +@ObservedV2 export class BannerModel extends BaseModel { constructor(swiperController: SwiperController| null) { super(swiperController) } - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - protected backgroundColor: ResourceColor = $r('app.color.banner_default_background_color') - private color: ResourceColor = $r('app.color.banner_default_color') - private autoPlay: boolean = false - private autoPlayTime: number = DEFAULT_AUTO_PLAY_TIME - private fades: boolean = true - private fadeDelay: number = DEFAULT_FADE_DELAY - private fadeLength: number = DEFAULT_FADE_LENGTH - private notifyPlay: (status: boolean) => void = (status: boolean) => {} - private notifyFades: (fades: boolean) => void = (fades: boolean) => {} + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace protected backgroundColor: ResourceColor = $r('app.color.banner_default_background_color') + @Trace private color: ResourceColor = $r('app.color.banner_default_color') + @Trace private autoPlay: boolean = false + @Trace private autoPlayTime: number = DEFAULT_AUTO_PLAY_TIME + @Trace private fades: boolean = true + @Trace private fadeDelay: number = DEFAULT_FADE_DELAY + @Trace private fadeLength: number = DEFAULT_FADE_LENGTH + @Trace private notifyPlay: (status: boolean) => void = (status: boolean) => {} + @Trace private notifyFades: (fades: boolean) => void = (fades: boolean) => {} setColor(color: number): BannerModel { this.color = color diff --git a/library/src/main/ets/models/BaseModel.ets b/library/src/main/ets/models/BaseModel.ets index 0db441beda85a62fb4e0fc28a87d75367a30f2fd..9cee1b26ea07107dcb202c3a8f703d791bf3d72b 100644 --- a/library/src/main/ets/models/BaseModel.ets +++ b/library/src/main/ets/models/BaseModel.ets @@ -23,15 +23,15 @@ import common from '@ohos.app.ability.common'; const DEFAULT_HEIGHT: Length = '50vp' const DEFAULT_WIDTH: Length = '480vp' - +@ObservedV2 export default class BaseModel > { // 全局设置 - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) - protected backgroundColor: ResourceColor = $r('app.color.default_background_color') - private controller: TabsController | SwiperController| null - private onPageTouch: (event: TouchEvent, currentIndicator: number) => void = (event: TouchEvent, currentIndicator: number) => {} + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) + @Trace protected backgroundColor: ResourceColor = $r('app.color.default_background_color') + @Trace private controller: TabsController | SwiperController| null + @Trace private onPageTouch: (event: TouchEvent, currentIndicator: number) => void = (event: TouchEvent, currentIndicator: number) => {} constructor(controller: TabsController | SwiperController| null) { this.controller = controller; diff --git a/library/src/main/ets/models/BottomTabsModel.ets b/library/src/main/ets/models/BottomTabsModel.ets index 54b1fd300eb2be7fbd3c63ebba9f08cb1591ff48..47faae555549862ee85eef9dec12189eb8fa780f 100644 --- a/library/src/main/ets/models/BottomTabsModel.ets +++ b/library/src/main/ets/models/BottomTabsModel.ets @@ -30,24 +30,24 @@ const DEFAULT_CENTER_VIEW_WIDTH: Length = '50vp' const DEFAULT_CENTER_VIEW_HEIGHT: Length = '50vp' const DEFAULT_SELECT_ICON_SIZE: Length = '35vp' const DEFAULT_UNSELECT_ICON_SIZE: Length = '28vp' - +@ObservedV2 export class BottomTabsModel extends BaseModel { - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) // tab的高度 - protected backgroundColor: ResourceColor = $r('app.color.bottom_default_background_color') - - private textSelectColor: string = DEFAULT_SELECT_TEXT_COLOR // 文字的颜色 - private textNormalColor: string = DEFAULT_UNSELECT_TEXT_COLOR // 文字的颜色 - private textSelectSize: number = length2Vp(getContext(), DEFAULT_SELECT_TEXT_SIZE) // 文字选中的大小 - private textNormalSize: number = length2Vp(getContext(), DEFAULT_UNSELECT_TEXT_SIZE) // 文字未选中的大小 - - private centerView: string | PixelMap | Resource| null = null - private centerViewWidth: number = length2Vp(getContext(), DEFAULT_CENTER_VIEW_WIDTH) - private centerViewHeight: number = length2Vp(getContext(), DEFAULT_CENTER_VIEW_HEIGHT) - private iconSelectSize: number = length2Vp(getContext(), DEFAULT_SELECT_ICON_SIZE) - private iconNormalSize: number = length2Vp(getContext(), DEFAULT_UNSELECT_ICON_SIZE) - private onCenterClick: () => void = () => {} - private clickCallback: (index: number) => void = (index: number) => {} - private iconsScale: boolean = true + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) // tab的高度 + @Trace protected backgroundColor: ResourceColor = $r('app.color.bottom_default_background_color') + + @Trace private textSelectColor: string = DEFAULT_SELECT_TEXT_COLOR // 文字的颜色 + @Trace private textNormalColor: string = DEFAULT_UNSELECT_TEXT_COLOR // 文字的颜色 + @Trace private textSelectSize: number = length2Vp(getContext(), DEFAULT_SELECT_TEXT_SIZE) // 文字选中的大小 + @Trace private textNormalSize: number = length2Vp(getContext(), DEFAULT_UNSELECT_TEXT_SIZE) // 文字未选中的大小 + + @Trace private centerView: string | PixelMap | Resource| null = null + @Trace private centerViewWidth: number = length2Vp(getContext(), DEFAULT_CENTER_VIEW_WIDTH) + @Trace private centerViewHeight: number = length2Vp(getContext(), DEFAULT_CENTER_VIEW_HEIGHT) + @Trace private iconSelectSize: number = length2Vp(getContext(), DEFAULT_SELECT_ICON_SIZE) + @Trace private iconNormalSize: number = length2Vp(getContext(), DEFAULT_UNSELECT_ICON_SIZE) + @Trace private onCenterClick: () => void = () => {} + @Trace private clickCallback: (index: number) => void = (index: number) => {} + @Trace private iconsScale: boolean = true constructor(controller: TabsController| null) { super(controller) diff --git a/library/src/main/ets/models/CapsuleFixTabsModel.ets b/library/src/main/ets/models/CapsuleFixTabsModel.ets index bd2b0780c9c7521f15a1f98a757403c03f5b86f8..5718df8f64a21d356691e664c0f23ef971e03ded 100644 --- a/library/src/main/ets/models/CapsuleFixTabsModel.ets +++ b/library/src/main/ets/models/CapsuleFixTabsModel.ets @@ -27,24 +27,24 @@ const DEFAULT_SELECTED_TEXT_SIZE: Length = '19fp' const DEFAULT_UNSELECTED_TEXT_SIZE: Length = '17fp' const DEFAULT_BORDER_WIDTH: Length = '2vp' const DEFAULT_RADIUS: Length = '25vp' - +@ObservedV2 export class CapsuleFixTabsModel extends BaseModel { - protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) // tab的宽度 - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) // tab的高度 - protected backgroundColor: ResourceColor = $r('app.color.capsule_default_background_color') - - private selectedTextColor: ResourceColor = $r('app.color.capsule_default_selected_text_color') // 选中后的颜色 - private unselectedTextColor: ResourceColor = $r('app.color.capsule_default_unselected_text_color') // 未选中后的颜色 - private selectedTextSize: number = length2Vp(getContext(), DEFAULT_SELECTED_TEXT_SIZE) // 选中后的颜色 - private unselectedTextSize: number = length2Vp(getContext(), DEFAULT_UNSELECTED_TEXT_SIZE) // 未选中后的颜色 - private fillColor: ResourceColor = $r('app.color.capsule_default_fill_color') - private borderWidth: number = length2Vp(getContext(), DEFAULT_BORDER_WIDTH) // 边框的粗细 - - private clickCallback: (index: number) => void = (index: number) =>{} - private radius: number = length2Vp(getContext(), DEFAULT_RADIUS) - private paddingX: number = 0 - private paddingY: number = 0 - private animation: boolean = true + @Trace protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) // tab的宽度 + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) // tab的高度 + @Trace protected backgroundColor: ResourceColor = $r('app.color.capsule_default_background_color') + + @Trace private selectedTextColor: ResourceColor = $r('app.color.capsule_default_selected_text_color') // 选中后的颜色 + @Trace private unselectedTextColor: ResourceColor = $r('app.color.capsule_default_unselected_text_color') // 未选中后的颜色 + @Trace private selectedTextSize: number = length2Vp(getContext(), DEFAULT_SELECTED_TEXT_SIZE) // 选中后的颜色 + @Trace private unselectedTextSize: number = length2Vp(getContext(), DEFAULT_UNSELECTED_TEXT_SIZE) // 未选中后的颜色 + @Trace private fillColor: ResourceColor = $r('app.color.capsule_default_fill_color') + @Trace private borderWidth: number = length2Vp(getContext(), DEFAULT_BORDER_WIDTH) // 边框的粗细 + + @Trace private clickCallback: (index: number) => void = (index: number) =>{} + @Trace private radius: number = length2Vp(getContext(), DEFAULT_RADIUS) + @Trace private paddingX: number = 0 + @Trace private paddingY: number = 0 + @Trace private animation: boolean = true constructor(controller: TabsController| null) { super(controller) diff --git a/library/src/main/ets/models/CircleModel.ets b/library/src/main/ets/models/CircleModel.ets index 488a6d92114ea85e175a1623df38f5fe6f3cca5b..979d2c83ed8931019b93e30ca59d114c50b742dd 100644 --- a/library/src/main/ets/models/CircleModel.ets +++ b/library/src/main/ets/models/CircleModel.ets @@ -30,27 +30,28 @@ const DEFAULT_ITEM_HEIGHT: Length = '10vp' const DEFAULT_MARGIN: Length = '5vp' const DEFAULT_RECTANGLE_RADIUS: Length = '20vp' +@ObservedV2 export class CircleModel extends BaseModel { - protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - protected backgroundColor: ResourceColor = $r('app.color.circle_default_background_color') - private snap: boolean = false - private fillColor: ResourceColor = $r('app.color.circle_default_fill_color') - private rectangle: boolean = false - private strokeWidth: number = length2Vp(getContext(), DEFAULT_STROKE_WIDTH) - private radius: number = length2Vp(getContext(), DEFAULT_RADIUS) - private itemWidth: number = length2Vp(getContext(), DEFAULT_ITEM_WIDTH) - private itemHeight: number = length2Vp(getContext(), DEFAULT_ITEM_HEIGHT) - private borderlines: boolean = false - private backgroundGradient: boolean = false - private scale: boolean = false - private rotate: boolean = false - private unselectedColor: ResourceColor = $r('app.color.circle_default_unselected_color') - private strokeColor: ResourceColor = $r('app.color.circle_default_stroke_color') - private margin: number = length2Vp(getContext(), DEFAULT_MARGIN) - private orientation: Orientation = Orientation.HORIZONTAL - private centered: boolean = true - private rectangleRadius: number = length2Vp(getContext(), DEFAULT_RECTANGLE_RADIUS) + @Trace protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace protected backgroundColor: ResourceColor = $r('app.color.circle_default_background_color') + @Trace private snap: boolean = false + @Trace private fillColor: ResourceColor = $r('app.color.circle_default_fill_color') + @Trace private rectangle: boolean = false + @Trace private strokeWidth: number = length2Vp(getContext(), DEFAULT_STROKE_WIDTH) + @Trace private radius: number = length2Vp(getContext(), DEFAULT_RADIUS) + @Trace private itemWidth: number = length2Vp(getContext(), DEFAULT_ITEM_WIDTH) + @Trace private itemHeight: number = length2Vp(getContext(), DEFAULT_ITEM_HEIGHT) + @Trace private borderlines: boolean = false + @Trace private backgroundGradient: boolean = false + @Trace private scale: boolean = false + @Trace private rotate: boolean = false + @Trace private unselectedColor: ResourceColor = $r('app.color.circle_default_unselected_color') + @Trace private strokeColor: ResourceColor = $r('app.color.circle_default_stroke_color') + @Trace private margin: number = length2Vp(getContext(), DEFAULT_MARGIN) + @Trace private orientation: Orientation = Orientation.HORIZONTAL + @Trace private centered: boolean = true + @Trace private rectangleRadius: number = length2Vp(getContext(), DEFAULT_RECTANGLE_RADIUS) constructor(controller: TabsController| null) { super(controller); diff --git a/library/src/main/ets/models/FixTabsModel.ets b/library/src/main/ets/models/FixTabsModel.ets index 05a7e061fb1061532c0758c2a307007a3b485902..ae2a7b96d6139c5933453b50d74a17de52bfa649 100644 --- a/library/src/main/ets/models/FixTabsModel.ets +++ b/library/src/main/ets/models/FixTabsModel.ets @@ -35,24 +35,23 @@ const DEFAULT_BG_HEIGHT_PERCENT: string = "100%" const DEFAULT_BG_IMAGE_TEXT: string = " " const DEFAULT_TEXT_NORMAL_COLOR: string = "#000000" const DEFAULT_TEXT_SELECT_COLOR: string = "#848484" - +@ObservedV2 export class FixTabsModel extends BaseModel { - private amin: boolean = true // 是否有移动动画 - - private lineHeight: number = length2Vp(getContext(), DEFAULT_LINE_HEIGHT) // 线的高度 - private lineColor: ResourceColor = $r('app.color.fix_line_color') // 横线的颜色 - private textSelectColor: string = DEFAULT_TEXT_NORMAL_COLOR // 文字的颜色 - private textNormalColor: string = DEFAULT_TEXT_SELECT_COLOR // 文字的颜色 - private textSelectSize: number = DEFAULT_TEXT_SELECT_SIZE // 文字选中的大小 - private textNormalSize: number = DEFAULT_TEXT_NORMAL_SIZE // 文字未选中的大小 - private bgColor: ResourceColor = $r('app.color.fix_slider_background_color') // 滑块的背景色 - private bgHeightPercent: string = DEFAULT_BG_HEIGHT_PERCENT - private borderRadius: number = length2Vp(getContext(), DEFAULT_BORDER_RADIUS) // 滑块的背景色的圆角度数 - private bgImageText: string = DEFAULT_BG_IMAGE_TEXT // 背景图片上的文字 - private bgImage: string | PixelMap | Resource| null = null // 滑块上的图片 - private clickCallback: (index: number) => void = (index: number) => {} - private cursorType: CursorType = CursorType.Underline - protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) + @Trace private amin: boolean = true // 是否有移动动画 + @Trace private lineHeight: number = length2Vp(getContext(), DEFAULT_LINE_HEIGHT) // 线的高度 + @Trace private lineColor: ResourceColor = $r('app.color.fix_line_color') // 横线的颜色 + @Trace private textSelectColor: string = DEFAULT_TEXT_NORMAL_COLOR // 文字的颜色 + @Trace private textNormalColor: string = DEFAULT_TEXT_SELECT_COLOR // 文字的颜色 + @Trace private textSelectSize: number = DEFAULT_TEXT_SELECT_SIZE // 文字选中的大小 + @Trace private textNormalSize: number = DEFAULT_TEXT_NORMAL_SIZE // 文字未选中的大小 + @Trace private bgColor: ResourceColor = $r('app.color.fix_slider_background_color') // 滑块的背景色 + @Trace private bgHeightPercent: string = DEFAULT_BG_HEIGHT_PERCENT + @Trace private borderRadius: number = length2Vp(getContext(), DEFAULT_BORDER_RADIUS) // 滑块的背景色的圆角度数 + @Trace private bgImageText: string = DEFAULT_BG_IMAGE_TEXT // 背景图片上的文字 + @Trace private bgImage: string | PixelMap | Resource| null = null // 滑块上的图片 + @Trace private clickCallback: (index: number) => void = (index: number) => {} + @Trace private cursorType: CursorType = CursorType.Underline + @Trace protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) constructor(controller: TabsController| null) { super(controller) diff --git a/library/src/main/ets/models/IconModel.ets b/library/src/main/ets/models/IconModel.ets index 2539e153a7a640e87db10dfb37dea32d5f4a1172..405a684bb9c2bf8524708a6de6884b047246fa1e 100644 --- a/library/src/main/ets/models/IconModel.ets +++ b/library/src/main/ets/models/IconModel.ets @@ -29,11 +29,11 @@ export class IconItem { const DEFAULT_HEIGHT: Length = '70vp' const DEFAULT_SIZE: Length = '40vp' const DEFAULT_MARGIN: Length = '5vp' - +@ObservedV2 export class IconModel extends BaseModel { - private size: number = length2Vp(getContext(), DEFAULT_SIZE) - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - private margin: number = length2Vp(getContext(), DEFAULT_MARGIN) + @Trace private size: number = length2Vp(getContext(), DEFAULT_SIZE) + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace private margin: number = length2Vp(getContext(), DEFAULT_MARGIN) constructor(tabsController: TabsController| null) { super(tabsController) diff --git a/library/src/main/ets/models/LineModel.ets b/library/src/main/ets/models/LineModel.ets index 456d35f5e893494c620400bcceae70831905a7aa..fa2628453fe297fcaf4ad0d064948986c5ee9593 100644 --- a/library/src/main/ets/models/LineModel.ets +++ b/library/src/main/ets/models/LineModel.ets @@ -26,19 +26,19 @@ const DEFAULT_WIDTH: Length = '360vp' const DEFAULT_LINE_WIDTH: Length = '40vp' const DEFAULT_LINE_HEIGHT: Length = '3vp' const DEFAULT_MARGIN: Length = '10vp' - +@ObservedV2 export class LineModel extends BaseModel { - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) - protected backgroundColor: ResourceColor = $r('app.color.line_default_background_color') - - private tabWidth: number = length2Vp(getContext(), DEFAULT_LINE_WIDTH) - private tabHeight: number = length2Vp(getContext(), DEFAULT_LINE_HEIGHT) - private color: ResourceColor = $r('app.color.line_default_selected_color') - private bgColor: ResourceColor = $r('app.color.line_default_unselected_color') - private margin: number = length2Vp(getContext(), DEFAULT_MARGIN) - private centered: boolean = true - private animation: boolean = true + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace protected width: number = length2Vp(getContext(), DEFAULT_WIDTH) + @Trace protected backgroundColor: ResourceColor = $r('app.color.line_default_background_color') + + @Trace private tabWidth: number = length2Vp(getContext(), DEFAULT_LINE_WIDTH) + @Trace private tabHeight: number = length2Vp(getContext(), DEFAULT_LINE_HEIGHT) + @Trace private color: ResourceColor = $r('app.color.line_default_selected_color') + @Trace private bgColor: ResourceColor = $r('app.color.line_default_unselected_color') + @Trace private margin: number = length2Vp(getContext(), DEFAULT_MARGIN) + @Trace private centered: boolean = true + @Trace private animation: boolean = true constructor(controller: TabsController| null) { super(controller) diff --git a/library/src/main/ets/models/MagicScrollTabsModel.ets b/library/src/main/ets/models/MagicScrollTabsModel.ets index ca3835855242c15867176391aa884b75810400d5..296a34f2f6d4e66b979d1a08d3d78627274a1c1e 100644 --- a/library/src/main/ets/models/MagicScrollTabsModel.ets +++ b/library/src/main/ets/models/MagicScrollTabsModel.ets @@ -68,79 +68,78 @@ const DEFAULT_RIGHT_PADDING: number = 0 const DEFAULT_TEXT_COLOR: number | string = 0xaaaaaa const DEFAULT_SELECTED_TEXT_COLOR: number | string = 0xff0000 const DEFAULT_INDICATOR_COLORS: Array = [0xffffff] - +@ObservedV2 export class MagicScrollTabsModel extends BaseModel { // 通用 - protected backgroundColor: ResourceColor = $r('app.color.magic_default_background_color') + @Trace protected backgroundColor: ResourceColor = $r('app.color.magic_default_background_color') // 指示器高度 - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - private titles: Array = [] - private arr: Array = [] - private textSize: number = DEFAULT_TEXT_SIZE - private textColor: number | string = DEFAULT_TEXT_COLOR - private selectedTextColor: number | string = DEFAULT_SELECTED_TEXT_COLOR + @Trace private titles: Array = [] + @Trace private arr: Array = [] + @Trace private textSize: number = DEFAULT_TEXT_SIZE + @Trace private textColor: number | string = DEFAULT_TEXT_COLOR + @Trace private selectedTextColor: number | string = DEFAULT_SELECTED_TEXT_COLOR // 元素间隔 - private interval: number = length2Vp(getContext(), DEFAULT_INTERVAL) + @Trace private interval: number = length2Vp(getContext(), DEFAULT_INTERVAL) // 指示对应tabs宽度 - private viewWidth: number = DEFAULT_VIEW_WIDTH + @Trace private viewWidth: number = DEFAULT_VIEW_WIDTH // 文字边距 - private textHorPadding: number = length2Vp(getContext(), DEFAULT_TEXT_HOR_PADDING) - private textVerPadding: number = length2Vp(getContext(), DEFAULT_TEXT_VER_PADDING) + @Trace private textHorPadding: number = length2Vp(getContext(), DEFAULT_TEXT_HOR_PADDING) + @Trace private textVerPadding: number = length2Vp(getContext(), DEFAULT_TEXT_VER_PADDING) - private clickListener: (index: number) => void = (index: number) => {} + @Trace private clickListener: (index: number) => void = (index: number) => {} // 动画掠过 - private skimOver: boolean = true - private clickChange: boolean = false + @Trace private skimOver: boolean = true + @Trace private clickChange: boolean = false // 滑动偏移 - private leftPadding: number = length2Vp(getContext(), DEFAULT_LEFT_PADDING) - private rightPadding: number = length2Vp(getContext(), DEFAULT_RIGHT_PADDING) - private scrollPivotX: number = DEFAULT_SCROLL_PIVOT_X + @Trace private leftPadding: number = length2Vp(getContext(), DEFAULT_LEFT_PADDING) + @Trace private rightPadding: number = length2Vp(getContext(), DEFAULT_RIGHT_PADDING) + @Trace private scrollPivotX: number = DEFAULT_SCROLL_PIVOT_X // 自动布局与首行固定 - private adjustMode: boolean = false - private pinnedTabView: boolean = false - private pinnedTabBgColor: ResourceColor = $r('app.color.pinned_tab_background_color') - private num: number = DEFAULT_MAX_NUM + @Trace private adjustMode: boolean = false + @Trace private pinnedTabView: boolean = false + @Trace private pinnedTabBgColor: ResourceColor = $r('app.color.pinned_tab_background_color') + @Trace private num: number = DEFAULT_MAX_NUM // 选中背景修改 - private fillColor: ResourceColor = $r('app.color.default_transparent_color') - private roundRadius: number = length2Vp(getContext(), DEFAULT_ROUND_RADIUS) + @Trace private fillColor: ResourceColor = $r('app.color.default_transparent_color') + @Trace private roundRadius: number = length2Vp(getContext(), DEFAULT_ROUND_RADIUS) // 选中字体大小修改 - private selectedTextSize: number = 0 + @Trace private selectedTextSize: number = 0 // 指示器是否处于上层 - private indicatorOnTop: boolean = false + @Trace private indicatorOnTop: boolean = false // 线条指示器设置 // 线条高度 - private strokeWidth: number = DEFAULT_STROKE_WIDTH - private strokeColor: ResourceColor = $r('app.color.magic_stroke_color') - private lineRound: boolean = true + @Trace private strokeWidth: number = DEFAULT_STROKE_WIDTH + @Trace private strokeColor: ResourceColor = $r('app.color.magic_stroke_color') + @Trace private lineRound: boolean = true // 线条宽度 - private dividerWidth: number = length2Vp(getContext(), DEFAULT_DIVIDER_WIDTH) - private dividerWidthMode: DividerWidthMode - = DividerWidthMode.MODE_MATCH_EDGE + @Trace private dividerWidth: number = length2Vp(getContext(), DEFAULT_DIVIDER_WIDTH) + @Trace private dividerWidthMode: DividerWidthMode = DividerWidthMode.MODE_MATCH_EDGE // 线条指示器位置偏移，正数为下方，负数为上方，值为偏移比例 - private yOffset: number = DEFAULT_Y_OFFSET + @Trace private yOffset: number = DEFAULT_Y_OFFSET // 适应布局 - private textModel: ComputeTextWidth.textModel = new ComputeTextWidth.textModel() + @Trace private textModel: ComputeTextWidth.textModel = new ComputeTextWidth.textModel() // 字体动画 - private titleMode: TitleMode = TitleMode.DEFAULT + @Trace private titleMode: TitleMode = TitleMode.DEFAULT // 指示器类型 - private cursorType: CursorType = CursorType.NONE + @Trace private cursorType: CursorType = CursorType.NONE // 贝塞尔指示器 - private maxCircleRadius: number = DEFAULT_MAX_CIRCLE_RADIUS - private minCircleRadius: number = DEFAULT_MIN_CIRCLE_RADIUS - private indicatorColors: Array = DEFAULT_INDICATOR_COLORS + @Trace private maxCircleRadius: number = DEFAULT_MAX_CIRCLE_RADIUS + @Trace private minCircleRadius: number = DEFAULT_MIN_CIRCLE_RADIUS + @Trace private indicatorColors: Array = DEFAULT_INDICATOR_COLORS // 三角指示器 - private triangleHeight: number = length2Vp(getContext(), DEFAULT_TRIANGLE_HEIGHT) - private triangleWidth: number = length2Vp(getContext(), DEFAULT_TRIANGLE_WIDTH) + @Trace private triangleHeight: number = length2Vp(getContext(), DEFAULT_TRIANGLE_HEIGHT) + @Trace private triangleWidth: number = length2Vp(getContext(), DEFAULT_TRIANGLE_WIDTH) // 三角指示器反向 - private reverse: boolean = false + @Trace private reverse: boolean = false // 指示器宽度动画 - private leftCurve: ESObject - private rightCurve: ESObject - private followTouch: boolean = true - private enablePivotScroll: boolean = true - private smoothScroll: boolean = true + @Trace private leftCurve: ESObject + @Trace private rightCurve: ESObject + @Trace private followTouch: boolean = true + @Trace private enablePivotScroll: boolean = true + @Trace private smoothScroll: boolean = true constructor(controller: TabsController| null) { super(controller) diff --git a/library/src/main/ets/models/ScrollTabsModel.ets b/library/src/main/ets/models/ScrollTabsModel.ets index 87eb152fe22f2d5cb63e43d135634dd4b555b374..d6f641de131ea3f6ec7ba00cf723fdbde74638ac 100644 --- a/library/src/main/ets/models/ScrollTabsModel.ets +++ b/library/src/main/ets/models/ScrollTabsModel.ets @@ -31,30 +31,30 @@ const DEFAULT_TEXT_WIDTH: Length = '80vp' const DEFAULT_SELECTED_TEXT_SIZE: Length = '18vp' const DEFAULT_ICON_SIZE: Length = '25vp' const DEFAULT_UNSELECTED_TEXT_SIZE: Length = '18vp' - +@ObservedV2 export class ScrollTabsModel extends BaseModel { - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - protected backgroundColor: ResourceColor = $r('app.color.scroll_default_background_color') - private snap: boolean = true - - private icons: IconItem[] = [] - color: ResourceColor = $r('app.color.scroll_default_cursor_color') - - private fontColor: ResourceColor = $r('app.color.scroll_default_selected_text_color') - private showdivider: boolean = false - private mHasIcon: boolean = false - private cursorHeight: number = length2Vp(getContext(), DEFAULT_CURSOR_HEIGHT) - private textHeight: number = length2Vp(getContext(), DEFAULT_TEXT_HEIGHT) - private dividerHeight: number = length2Vp(getContext(), DEFAULT_DIVIDER_HEIGHT) - private cursorWidth: number = length2Vp(getContext(), DEFAULT_CURSOR_WIDTH) - private textWidth: number = length2Vp(getContext(), DEFAULT_TEXT_WIDTH) - private dividerColor: ResourceColor = $r('app.color.scroll_default_divider_color') - private selectedTextSize: number = length2Vp(getContext(), DEFAULT_SELECTED_TEXT_SIZE) - private iconSize: number = length2Vp(getContext(), DEFAULT_ICON_SIZE) - private UnselectedTextColor: ResourceColor = $r('app.color.scroll_default_unselected_text_color') - private UnselectedTextSize: number = length2Vp(getContext(), DEFAULT_UNSELECTED_TEXT_SIZE) - private cursorUp: boolean = false - private clickListener: (index: number) => void = (index: number) => {} + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace protected backgroundColor: ResourceColor = $r('app.color.scroll_default_background_color') + @Trace private snap: boolean = true + + @Trace private icons: IconItem[] = [] + @Trace color: ResourceColor = $r('app.color.scroll_default_cursor_color') + + @Trace private fontColor: ResourceColor = $r('app.color.scroll_default_selected_text_color') + @Trace private showdivider: boolean = false + @Trace private mHasIcon: boolean = false + @Trace private cursorHeight: number = length2Vp(getContext(), DEFAULT_CURSOR_HEIGHT) + @Trace private textHeight: number = length2Vp(getContext(), DEFAULT_TEXT_HEIGHT) + @Trace private dividerHeight: number = length2Vp(getContext(), DEFAULT_DIVIDER_HEIGHT) + @Trace private cursorWidth: number = length2Vp(getContext(), DEFAULT_CURSOR_WIDTH) + @Trace private textWidth: number = length2Vp(getContext(), DEFAULT_TEXT_WIDTH) + @Trace private dividerColor: ResourceColor = $r('app.color.scroll_default_divider_color') + @Trace private selectedTextSize: number = length2Vp(getContext(), DEFAULT_SELECTED_TEXT_SIZE) + @Trace private iconSize: number = length2Vp(getContext(), DEFAULT_ICON_SIZE) + @Trace private UnselectedTextColor: ResourceColor = $r('app.color.scroll_default_unselected_text_color') + @Trace private UnselectedTextSize: number = length2Vp(getContext(), DEFAULT_UNSELECTED_TEXT_SIZE) + @Trace private cursorUp: boolean = false + @Trace private clickListener: (index: number) => void = (index: number) => {} constructor(controller: TabsController| null) { super(controller); diff --git a/library/src/main/ets/models/SpringScrollTabsModel.ets b/library/src/main/ets/models/SpringScrollTabsModel.ets index ee3b96fad2651aa5675be8c78ac2b636d64c43ef..ee79cf269173f88e74275202c7bec0faaf3f856d 100644 --- a/library/src/main/ets/models/SpringScrollTabsModel.ets +++ b/library/src/main/ets/models/SpringScrollTabsModel.ets @@ -26,17 +26,17 @@ const DEFAULT_VIEW_WIDTH: number = lpx2px(720) const DEFAULT_TEXT_SIZE: number = 12 const DEFAULT_TEXT_COLOR: string = "#000000" const DEFAULT_SELECTED_TEXT_COLOR: string = "#ff0000" - +@ObservedV2 export class SpringScrollTabsModel extends BaseModel { - private maxRadiusPercent: number = DEFAULT_MAX_RADIUS_PERCENT - private minRadiusPercent: number = DEFAULT_MIN_RADIUS_PERCENT - private mSpringColor: ResourceColor = $r('app.color.spring_color') - private viewWidth: number = DEFAULT_VIEW_WIDTH - private textSize: number = DEFAULT_TEXT_SIZE - private textColor: string = DEFAULT_TEXT_COLOR - private selectedTextColor: string = DEFAULT_SELECTED_TEXT_COLOR - private isClickChange: boolean = false - private selectedTextSize: number = DEFAULT_TEXT_SIZE + @Trace private maxRadiusPercent: number = DEFAULT_MAX_RADIUS_PERCENT + @Trace private minRadiusPercent: number = DEFAULT_MIN_RADIUS_PERCENT + @Trace private mSpringColor: ResourceColor = $r('app.color.spring_color') + @Trace private viewWidth: number = DEFAULT_VIEW_WIDTH + @Trace private textSize: number = DEFAULT_TEXT_SIZE + @Trace private textColor: string = DEFAULT_TEXT_COLOR + @Trace private selectedTextColor: string = DEFAULT_SELECTED_TEXT_COLOR + @Trace private isClickChange: boolean = false + @Trace private selectedTextSize: number = DEFAULT_TEXT_SIZE constructor(controller: TabsController| null) { super(controller) diff --git a/library/src/main/ets/models/TitleModel.ets b/library/src/main/ets/models/TitleModel.ets index f747dff79b719a3c17422f6e3fd4006a70ff0b2f..3a7f87370ebf512651d16080a75789ad309f37de 100644 --- a/library/src/main/ets/models/TitleModel.ets +++ b/library/src/main/ets/models/TitleModel.ets @@ -28,7 +28,7 @@ const DEFAULT_FOOTER_LINE_HEIGHT: Length = '2vp' const DEFAULT_TITLE_PADDING: Length = '5vp' const DEFAULT_CLIP_PADDING: Length = '4vp' const DEFAULT_FOOTER_INDICATOR_UNDERLINE_PADDING: Length = '20vp' - +@ObservedV2 export class TitleModel extends BaseModel { constructor(tabsController: TabsController| null) { super(tabsController) @@ -37,27 +37,27 @@ export class TitleModel extends BaseModel { centerItemClickListener: (position: number) => void = (position: number) => {} // 纵向各区域尺寸 - private topPadding: number = length2Vp(getContext(), DEFAULT_TOP_PADDING) // 文字区域和顶部间距 - private textSize: number = length2Vp(getContext(), DEFAULT_TEXT_SIZE) // 字体大小，决定了文字区高度，需要通过evalutateTextHeight 换算 - private footerIndicatorPadding: number = length2Vp(getContext(), DEFAULT_FOOTER_INDICATOR_PADDING) // 文字区和滑块区间距 - private footerIndicatorHeight: number = length2Vp(getContext(), DEFAULT_FOOTER_INDICATOR_HEIGHT) // 滑块高度 - private footerLineHeight: number = length2Vp(getContext(), DEFAULT_FOOTER_LINE_HEIGHT) // 底部直线高度 + @Trace private topPadding: number = length2Vp(getContext(), DEFAULT_TOP_PADDING) // 文字区域和顶部间距 + @Trace private textSize: number = length2Vp(getContext(), DEFAULT_TEXT_SIZE) // 字体大小，决定了文字区高度，需要通过evalutateTextHeight 换算 + @Trace private footerIndicatorPadding: number = length2Vp(getContext(), DEFAULT_FOOTER_INDICATOR_PADDING) // 文字区和滑块区间距 + @Trace private footerIndicatorHeight: number = length2Vp(getContext(), DEFAULT_FOOTER_INDICATOR_HEIGHT) // 滑块高度 + @Trace private footerLineHeight: number = length2Vp(getContext(), DEFAULT_FOOTER_LINE_HEIGHT) // 底部直线高度 // 横向尺寸 - private titlePadding: number = length2Vp(getContext(), DEFAULT_TITLE_PADDING) // 相邻title间最小间距 - private clipPadding: number = length2Vp(getContext(), DEFAULT_CLIP_PADDING) // 左右两侧显示未选中title的区域宽度 - private footerIndicatorUnderlinePadding: number = length2Vp(getContext(), DEFAULT_FOOTER_INDICATOR_UNDERLINE_PADDING) // 横线形式的滑块两侧超出title宽度的长度,此属性原库未以java接口形式公开，仅以xml属性提供自定义 + @Trace private titlePadding: number = length2Vp(getContext(), DEFAULT_TITLE_PADDING) // 相邻title间最小间距 + @Trace private clipPadding: number = length2Vp(getContext(), DEFAULT_CLIP_PADDING) // 左右两侧显示未选中title的区域宽度 + @Trace private footerIndicatorUnderlinePadding: number = length2Vp(getContext(), DEFAULT_FOOTER_INDICATOR_UNDERLINE_PADDING) // 横线形式的滑块两侧超出title宽度的长度,此属性原库未以java接口形式公开，仅以xml属性提供自定义 // 文字相关设置 - private textColor: ResourceColor = $r('app.color.title_default_text_color') - private selectedColor: ResourceColor = $r('app.color.title_default_selected_color') - private selectedBold: boolean = true - private fontFamily: string = "sans-serif" + @Trace private textColor: ResourceColor = $r('app.color.title_default_text_color') + @Trace private selectedColor: ResourceColor = $r('app.color.title_default_selected_color') + @Trace private selectedBold: boolean = true + @Trace private fontFamily: string = "sans-serif" // 游标相关设置 - private linePosition: LinePosition = LinePosition.BOTTOM - private footerIndicatorStyle: IndicatorStyle = IndicatorStyle.UNDERLINE - private footerColor: ResourceColor = $r('app.color.title_default_footer_color') + @Trace private linePosition: LinePosition = LinePosition.BOTTOM + @Trace private footerIndicatorStyle: IndicatorStyle = IndicatorStyle.UNDERLINE + @Trace private footerColor: ResourceColor = $r('app.color.title_default_footer_color') public setOnCenterItemClickListener(callback: (position: number) => void): TitleModel { this.centerItemClickListener = callback diff --git a/library/src/main/ets/models/TriangularModel.ets b/library/src/main/ets/models/TriangularModel.ets index f4b360513701a1c28af5235f06f430ba8e45cd65..4b0ef7cabd43dc00e437b3d6fea970c4fb296e23 100644 --- a/library/src/main/ets/models/TriangularModel.ets +++ b/library/src/main/ets/models/TriangularModel.ets @@ -26,16 +26,16 @@ const DEFAULT_HEIGHT: Length = '18vp' const DEFAULT_LINE_HEIGHT: Length = '10vp' const DEFAULT_TRIANGLE_WIDTH: Length = '12vp' const DEFAULT_TRIANGLE_HEIGHT: Length = '27vp' - +@ObservedV2 export class TriangularModel extends BaseModel { - protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) - protected backgroundColor: ResourceColor = $r('app.color.default_transparent_color') - - private mLineHeight: number = length2Vp(getContext(), DEFAULT_LINE_HEIGHT) - private mTriangleWidth: number = length2Vp(getContext(), DEFAULT_TRIANGLE_WIDTH) - private mTriangleHeight: number = length2Vp(getContext(), DEFAULT_TRIANGLE_HEIGHT) - private mLineColor: ResourceColor = $r('app.color.default_triangular_line_color') - private mReverse: boolean = false + @Trace protected height: number = length2Vp(getContext(), DEFAULT_HEIGHT) + @Trace protected backgroundColor: ResourceColor = $r('app.color.default_transparent_color') + + @Trace private mLineHeight: number = length2Vp(getContext(), DEFAULT_LINE_HEIGHT) + @Trace private mTriangleWidth: number = length2Vp(getContext(), DEFAULT_TRIANGLE_WIDTH) + @Trace private mTriangleHeight: number = length2Vp(getContext(), DEFAULT_TRIANGLE_HEIGHT) + @Trace private mLineColor: ResourceColor = $r('app.color.default_triangular_line_color') + @Trace private mReverse: boolean = false mStartInterpolator: ESObject diff --git a/oh-package.json5 b/oh-package.json5 index aa634de93a2e5677aa74d8fd8d7af4fb54828504..852bb446b555b51e255b1ccb96367b68402307eb 100644 --- a/oh-package.json5 +++ b/oh-package.json5 @@ -12,6 +12,6 @@ }, "description": "example description", "main": "", - "version": "2.0.0", + "version": "2.1.0-rc.0", "dependencies": {} } diff --git a/sharedlibrary/src/main/ets/pages/BadgeSampleFixTabsIndicator.ets b/sharedlibrary/src/main/ets/pages/BadgeSampleFixTabsIndicator.ets index 98b39bb64b09ba40216cbf30b26e00572795690d..534945b4946aaef3bd2698cf6b8004ddfd0194df 100644 --- a/sharedlibrary/src/main/ets/pages/BadgeSampleFixTabsIndicator.ets +++ b/sharedlibrary/src/main/ets/pages/BadgeSampleFixTabsIndicator.ets @@ -21,7 +21,7 @@ import { BadgeFixTabsIndicator, BadgeFixTabsModel, BadgeType, BadgeRule, BadgeAn import common from '@ohos.app.ability.common' @Entry -@Component +@ComponentV2 struct BadgeSampleFixTabsIndicator { private data: Array = ["KITKAT", "NOUGAT", "DONUT"] // private itemWidths1: Array = [75, 85, 75] @@ -48,9 +48,9 @@ struct BadgeSampleFixTabsIndicator { private badgeRulesX2: Array = [, new BadgeRule(BadgeAnchor.CENTER_X, 0),] private badgeRulesY2: Array = [, new BadgeRule(BadgeAnchor.BOTTOM, -10),] private controller: TabsController = new TabsController() - @State model1: BadgeFixTabsModel = new BadgeFixTabsModel(this.controller) - @State model2: BadgeFixTabsModel = new BadgeFixTabsModel(this.controller) - @State itemIndex: number = 0 + @Local model1: BadgeFixTabsModel = new BadgeFixTabsModel(this.controller) + @Local model2: BadgeFixTabsModel = new BadgeFixTabsModel(this.controller) + @Local itemIndex: number = 0 aboutToAppear() { let ctx = getContext(this).createModuleContext('sharedlibrary') as common.UIAbilityContext @@ -117,8 +117,8 @@ struct BadgeSampleFixTabsIndicator { build() { Column({ space: 10 }) { - BadgeFixTabsIndicator({ itemIndex: $itemIndex, model: this.model1, titles: this.data }) - BadgeFixTabsIndicator({ itemIndex: $itemIndex, model: this.model2, titles: this.data }) + BadgeFixTabsIndicator({ itemIndex: this.itemIndex!!, model: this.model1, titles: this.data }) + BadgeFixTabsIndicator({ itemIndex: this.itemIndex!!, model: this.model2, titles: this.data }) Tabs({ index: this.itemIndex, controller: this.controller }) { this.TabContentSample(0) this.TabContentSample(1) diff --git a/sharedlibrary/src/main/ets/pages/BottomTabIndicator_center_view.ets b/sharedlibrary/src/main/ets/pages/BottomTabIndicator_center_view.ets index 91394b26e42ba3e2ffa3bc4aa2b7ac8b5193f5dd..7248ae1aa18df5ac1a0f87796d55da903453d9c5 100644 --- a/sharedlibrary/src/main/ets/pages/BottomTabIndicator_center_view.ets +++ b/sharedlibrary/src/main/ets/pages/BottomTabIndicator_center_view.ets @@ -23,11 +23,11 @@ import { TabIcon } from '@ohos/circleindicator' import common from '@ohos.app.ability.common'; @Entry -@Component +@ComponentV2 struct BottomTabIndicator_page { private controller: TabsController = new TabsController() - @State model: BottomTabsModel = new BottomTabsModel(this.controller) - @State index: number= 0 + @Local model: BottomTabsModel = new BottomTabsModel(this.controller) + @Local index: number= 0 private data: TabIcon[]| undefined = undefined; aboutToAppear() { @@ -104,7 +104,7 @@ struct BottomTabIndicator_page { this.model.notifyTouch(event, this.index) }) - BottomTabsIndicator({ itemIndex: $index, model: this.model, titles: this.data }) + BottomTabsIndicator({ itemIndex: this.index!!, model: this.model, titles: this.data }) } .width('100%') diff --git a/sharedlibrary/src/main/ets/pages/CapsuleFixTabsIndicator_default.ets b/sharedlibrary/src/main/ets/pages/CapsuleFixTabsIndicator_default.ets index 2f632ef0c6140ef74fe90e8ada3eff9ccca72c65..f087ffabf47b2b99019a1b6bd9a6f81afd87a54a 100644 --- a/sharedlibrary/src/main/ets/pages/CapsuleFixTabsIndicator_default.ets +++ b/sharedlibrary/src/main/ets/pages/CapsuleFixTabsIndicator_default.ets @@ -21,11 +21,11 @@ import { CapsuleFixTabsIndicator, CapsuleFixTabsModel } from '@ohos/circleindica import common from '@ohos.app.ability.common' @Entry -@Component +@ComponentV2 struct CapsuleFixTabsIndicator_page { private controller: TabsController = new TabsController() - @State model: CapsuleFixTabsModel = new CapsuleFixTabsModel(this.controller) - @State index: number= 0 + @Local model: CapsuleFixTabsModel = new CapsuleFixTabsModel(this.controller) + @Local index: number= 0 aboutToAppear() { let ctx = getContext(this).createModuleContext('sharedlibrary') as common.UIAbilityContext @@ -43,7 +43,7 @@ struct CapsuleFixTabsIndicator_page { build() { Column() { - CapsuleFixTabsIndicator({ itemIndex: $index, model: this.model, titles: ['KITKAT', 'NOUGAT', 'DONUT'] }) + CapsuleFixTabsIndicator({ itemIndex: this.index!!, model: this.model, titles: ['KITKAT', 'NOUGAT', 'DONUT'] }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/sharedlibrary/src/main/ets/pages/FixTabsIndicator_default.ets b/sharedlibrary/src/main/ets/pages/FixTabsIndicator_default.ets index 333e23c3abc7ca4f8b7c6eb005bbc33bef3aaa01..d39921f5cc2bfb3279d1d08b08f9a3076c6c236b 100644 --- a/sharedlibrary/src/main/ets/pages/FixTabsIndicator_default.ets +++ b/sharedlibrary/src/main/ets/pages/FixTabsIndicator_default.ets @@ -21,11 +21,11 @@ import { FixTabsIndicator, FixTabsModel, FixCursorType } from '@ohos/circleindic import common from '@ohos.app.ability.common' @Entry -@Component +@ComponentV2 struct FixTabsIndicator_page { private controller: TabsController = new TabsController() - @State model: FixTabsModel = new FixTabsModel(this.controller) - @State index: number = 0 + @Local model: FixTabsModel = new FixTabsModel(this.controller) + @Local index: number = 0 aboutToAppear() { let ctx = getContext(this).createModuleContext('sharedlibrary') as common.UIAbilityContext @@ -45,7 +45,7 @@ struct FixTabsIndicator_page { build() { Column() { - FixTabsIndicator({ itemIndex: $index, model: this.model, titles: ['主页0', '主页1', '主页2', '主页3'] }) + FixTabsIndicator({ itemIndex: this.index!!, model: this.model, titles: ['主页0', '主页1', '主页2', '主页3'] }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/sharedlibrary/src/main/ets/pages/IconsSampleDefault.ets b/sharedlibrary/src/main/ets/pages/IconsSampleDefault.ets index 51a01609bcd495459fa98df06e43238361657dd0..5666f01a2db6e2d2138a7697e8a4b07695bcd158 100644 --- a/sharedlibrary/src/main/ets/pages/IconsSampleDefault.ets +++ b/sharedlibrary/src/main/ets/pages/IconsSampleDefault.ets @@ -30,7 +30,7 @@ import common from '@ohos.app.ability.common' } @Entry -@Component +@ComponentV2 struct IconsSampleDefault { private iconItems: Array = [{ normal: $r("app.media.alarms_normal"), @@ -47,8 +47,8 @@ struct IconsSampleDefault { }] private initData: Array = ["This ", "Is", "A", "Test"] private controller: TabsController = new TabsController() - @State model: IconModel = new IconModel(this.controller) - @State index: number = 0 + @Local model: IconModel = new IconModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -90,7 +90,7 @@ struct IconsSampleDefault { } }.indicator(this) - IconIndicator({ iconItems: this.iconItems, itemIndex: $index, model: this.model }) + IconIndicator({ iconItems: this.iconItems, itemIndex: this.index!!, model: this.model }) } .width('100%') .height('100%') diff --git a/sharedlibrary/src/main/ets/pages/Index.ets b/sharedlibrary/src/main/ets/pages/Index.ets index 57ff8bef43ab6340417434692c0b826073de16a5..de5a20a0d9dc85157011a5ca9a3bc4e35624b1ea 100644 --- a/sharedlibrary/src/main/ets/pages/Index.ets +++ b/sharedlibrary/src/main/ets/pages/Index.ets @@ -29,7 +29,7 @@ export class PageInfo { } @Entry -@Component +@ComponentV2 struct Index { private pageInfo: PageInfo[] | null = null; diff --git a/sharedlibrary/src/main/ets/pages/LineIndicator_default.ets b/sharedlibrary/src/main/ets/pages/LineIndicator_default.ets index be536ed2cce69a05b0345fe2229c34267cacb1d4..2cd51e3f2ccba3bebf29d5d22d33ab0e75eebff5 100644 --- a/sharedlibrary/src/main/ets/pages/LineIndicator_default.ets +++ b/sharedlibrary/src/main/ets/pages/LineIndicator_default.ets @@ -21,11 +21,11 @@ import { LineIndicator, LineModel } from '@ohos/circleindicator' import common from '@ohos.app.ability.common' @Entry -@Component +@ComponentV2 struct LineIndicator_page { private controller: TabsController = new TabsController() - @State model: LineModel = new LineModel(this.controller) - @State index: number= 0 + @Local model: LineModel = new LineModel(this.controller) + @Local index: number= 0 aboutToAppear() { let ctx = getContext(this).createModuleContext('sharedlibrary') as common.UIAbilityContext @@ -66,7 +66,7 @@ struct LineIndicator_page { this.model.notifyTouch(event, this.index) }) - LineIndicator({ itemIndex: $index, model: this.model, count: 4 }) + LineIndicator({ itemIndex: this.index!!, model: this.model, count: 4 }) } .width('100%') diff --git a/sharedlibrary/src/main/ets/pages/MagicSampleDefault1.ets b/sharedlibrary/src/main/ets/pages/MagicSampleDefault1.ets index 47b43d76b112c70961cc244fb12aca7832decfd4..47ec1099b255a1648b67c3312ef78cc1a7457947 100644 --- a/sharedlibrary/src/main/ets/pages/MagicSampleDefault1.ets +++ b/sharedlibrary/src/main/ets/pages/MagicSampleDefault1.ets @@ -28,13 +28,13 @@ import common from '@ohos.app.ability.common' } @Entry -@Component +@ComponentV2 struct MagicSampleDefault1 { private initData: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"] private controller: TabsController = new TabsController() - @State model1: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) - @State index: number = 0 + @Local model1: MagicScrollTabsModel = new MagicScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -65,7 +65,7 @@ struct MagicSampleDefault1 { build() { Column({ space: 5 }) { - MagicScrollTabsIndicator({ index: $index, model: this.model1, titles: this.initData }) + MagicScrollTabsIndicator({ index: this.index!!, model: this.model1, titles: this.initData }) Tabs({ index: this.index, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/sharedlibrary/src/main/ets/pages/SampleList.ets b/sharedlibrary/src/main/ets/pages/SampleList.ets index 5d91b9dd2ddd371ea7e676656030d553c06c4393..c9214d49cd77de9cb0b22d3a994bd9e8bd76913b 100644 --- a/sharedlibrary/src/main/ets/pages/SampleList.ets +++ b/sharedlibrary/src/main/ets/pages/SampleList.ets @@ -21,7 +21,7 @@ import router from '@ohos.router' import { PageInfo, PageItem } from './Index' @Entry -@Component +@ComponentV2 struct SampleList { private pageInfo = router.getParams() as PageInfo diff --git a/sharedlibrary/src/main/ets/pages/SpringSampleDefault.ets b/sharedlibrary/src/main/ets/pages/SpringSampleDefault.ets index d8bd892b46f42d978eda26dda16133f6eaa6391f..7b6058164802eb39e9e4f053d048bc832d93270b 100644 --- a/sharedlibrary/src/main/ets/pages/SpringSampleDefault.ets +++ b/sharedlibrary/src/main/ets/pages/SpringSampleDefault.ets @@ -27,13 +27,13 @@ import common from '@ohos.app.ability.common' } @Entry -@Component +@ComponentV2 struct SpringSampleDefault { private initData: number[] = Array.from(new Array(16).keys()) private controller: TabsController = new TabsController() - @State model: SpringScrollTabsModel = new SpringScrollTabsModel(this.controller) - @State itemIndex: number = 2 - @State private isShow: boolean = false + @Local model: SpringScrollTabsModel = new SpringScrollTabsModel(this.controller) + @Local itemIndex: number = 2 + @Local private isShow: boolean = false @Builder SquareText(index: number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -71,7 +71,7 @@ struct SpringSampleDefault { build() { Column({ space: 5 }) { - SpringScrollTabsIndicator({ itemIndex: $itemIndex, model: this.model, titles: this.initData }) + SpringScrollTabsIndicator({ itemIndex: this.itemIndex!!, model: this.model, titles: this.initData }) Tabs({ index: this.itemIndex, controller: this.controller }) { this.TabContentSimple(0) this.TabContentSimple(1) diff --git a/sharedlibrary/src/main/ets/pages/TabsIndicatorDefault.ets b/sharedlibrary/src/main/ets/pages/TabsIndicatorDefault.ets index 5fca60c3610c56d43aa4dbc416398a7d7be62303..d39162d8f6dcde53f2dd257ccce501200fb1cbb8 100644 --- a/sharedlibrary/src/main/ets/pages/TabsIndicatorDefault.ets +++ b/sharedlibrary/src/main/ets/pages/TabsIndicatorDefault.ets @@ -26,15 +26,15 @@ import common from '@ohos.app.ability.common' } @Entry -@Component +@ComponentV2 struct TabsIndicatorDefault { private text = ['Calendar', 'Camera', 'Alarms', 'Location', 'Location'] private icons: IconItem[] = []; public controller: TabsController = new TabsController() - @State model: ScrollTabsModel = new ScrollTabsModel(this.controller) - @State model2: ScrollTabsModel = new ScrollTabsModel(this.controller) - @State model3: ScrollTabsModel = new ScrollTabsModel(this.controller) - @State index: number = 0 + @Local model: ScrollTabsModel = new ScrollTabsModel(this.controller) + @Local model2: ScrollTabsModel = new ScrollTabsModel(this.controller) + @Local model3: ScrollTabsModel = new ScrollTabsModel(this.controller) + @Local index: number = 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -103,9 +103,9 @@ struct TabsIndicatorDefault { build() { Column() { - ScrollTabsIndicator({ itemIndex: $index, model: this.model, titles: this.text }) - ScrollTabsIndicator({ itemIndex: $index, model: this.model2, titles: this.text }) - ScrollTabsIndicator({ itemIndex: $index, model: this.model3, titles: this.text }) + ScrollTabsIndicator({ itemIndex: this.index!!, model: this.model, titles: this.text }) + ScrollTabsIndicator({ itemIndex: this.index!!, model: this.model2, titles: this.text }) + ScrollTabsIndicator({ itemIndex: this.index!!, model: this.model3, titles: this.text }) Tabs({ index: this.index, controller: this.controller }) { TabContent() { diff --git a/sharedlibrary/src/main/ets/pages/TitlesSampleStyled.ets b/sharedlibrary/src/main/ets/pages/TitlesSampleStyled.ets index 1ffc84ee8878e85e528daf79bbf799255698625e..20a29fafc7932940f884762f8e35e094ea1ce3dc 100644 --- a/sharedlibrary/src/main/ets/pages/TitlesSampleStyled.ets +++ b/sharedlibrary/src/main/ets/pages/TitlesSampleStyled.ets @@ -22,13 +22,13 @@ import {TitleModel,TitleIndicatorStyle} from '@ohos/circleindicator' import common from '@ohos.app.ability.common' @Entry -@Component +@ComponentV2 struct TitlesSampleStyled { tabsController: TabsController = new TabsController() - @State + @Local model: TitleModel = new TitleModel(this.tabsController) titles: string[] = ["This", "Is", "A", "Test"] - @State + @Local index: number = 0 @Builder @@ -42,7 +42,7 @@ struct TitlesSampleStyled { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - TitleIndicator({ titles: this.titles, itemIndex: $index, model: this.model }) + TitleIndicator({ titles: this.titles, itemIndex: this.index!!, model: this.model }) Tabs({ controller: this.tabsController }) { this.makeTabContent(0) this.makeTabContent(1) diff --git a/sharedlibrary/src/main/ets/pages/TriangularSampleIndicator.ets b/sharedlibrary/src/main/ets/pages/TriangularSampleIndicator.ets index ccceace2849b8f8c5200fe17a1141e26a3bd3fd0..1033b053c5b13a62d7bbe04c74d47e0608286350 100644 --- a/sharedlibrary/src/main/ets/pages/TriangularSampleIndicator.ets +++ b/sharedlibrary/src/main/ets/pages/TriangularSampleIndicator.ets @@ -22,12 +22,12 @@ import { TriangularIndicator, TriangularModel } from '@ohos/circleindicator' import common from '@ohos.app.ability.common' @Entry -@Component +@ComponentV2 struct TriangularSampleIndicator { private data: Array = ["CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "NOUGAT", "DONUT"] private controller: TabsController = new TabsController() - @State model: TriangularModel = new TriangularModel(this.controller) - @State itemIndex: number = 0 + @Local model: TriangularModel = new TriangularModel(this.controller) + @Local itemIndex: number = 0 aboutToAppear() { let ctx = getContext(this).createModuleContext('sharedlibrary') as common.UIAbilityContext @@ -59,7 +59,7 @@ struct TriangularSampleIndicator { build() { Column() { - TriangularIndicator({ itemIndex: $itemIndex, count: this.data.length, model: this.model }) + TriangularIndicator({ itemIndex: this.itemIndex!!, count: this.data.length, model: this.model }) Tabs({ index: this.itemIndex, controller: this.controller }) { this.TabContentSample(0) this.TabContentSample(1) diff --git a/sharedlibrary/src/main/ets/pages/circleSampleSnackbar.ets b/sharedlibrary/src/main/ets/pages/circleSampleSnackbar.ets index d5732d7f7dd860ca677651d03f2721538ea621a3..70ed3a2707c2b3016b8a44f6d9e56f865913f967 100644 --- a/sharedlibrary/src/main/ets/pages/circleSampleSnackbar.ets +++ b/sharedlibrary/src/main/ets/pages/circleSampleSnackbar.ets @@ -26,16 +26,16 @@ import common from '@ohos.app.ability.common' } @Entry -@Component +@ComponentV2 struct CircleSampleSnackbar { - @State text: string[]= ["1", "2", "3", "4", "5"] - @State count: number = 0 + @Local text: string[]= ["1", "2", "3", "4", "5"] + @Local count: number = 0 private controller: TabsController = new TabsController() - @State model: CircleModel= new CircleModel(this.controller) - @State itemIndex: number= 0 - @State flag: boolean = false - @State snackbar: string = "Snackbar" - @State private scaleValue: number = 0 + @Local model: CircleModel= new CircleModel(this.controller) + @Local itemIndex: number= 0 + @Local flag: boolean = false + @Local snackbar: string = "Snackbar" + @Local private scaleValue: number = 0 @Builder SquareText(index:number) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -124,7 +124,7 @@ struct CircleSampleSnackbar { if (this.flag == true) { Column() { - CircleIndicator({ itemIndex: $itemIndex, model: this.model, count: $count }) + CircleIndicator({ itemIndex: this.itemIndex!!, model: this.model, count: this.count }) } .translate({ x: this.scaleValue * -0.5, y: this.scaleValue * -70, z: this.scaleValue }) .onAppear(() => { @@ -140,7 +140,7 @@ struct CircleSampleSnackbar { }) }) } else { - CircleIndicator({ itemIndex: $itemIndex, model: this.model, count: $count }) + CircleIndicator({ itemIndex: this.itemIndex!!, model: this.model, count: this.count }) } }