!8985 UX二期 Tabs组件相关XTS

Merge pull request !8985 from sunjiakun/UXII8.2_xts

arkui/ace_ets_components_ux/ace_ets_component_tabs/Test.json

@@ -4,7 +4,7 @@
         "type": "OHJSUnitTest",
         "test-timeout": "600000",
         "bundle-name": "com.example.acetabstest",
-        "module-name": "phone",
+        "module-name": "entry_test",
         "shell-timeout": "600000",
         "testcase-timeout": 240000
     },

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/TestAbility/pages/Index.ets

@@ -33,7 +33,7 @@ struct TabsExample {
     @State nullFlag: boolean = false
 
     @State strokeWidthNum: number = 10
-    @State dividerColorNum: number = 0xFFFF0000
+    @State dividerColorNum: number = 0xFF0000
     @State startMarginNum: number = 5
     @State endMarginNum: number = 5
 
@@ -235,7 +235,7 @@ struct TabsExample {
                     Column().width('100%').height('100%').backgroundColor(Color.Yellow)
                 }.tabBar(SubTabBarStyle.of('pink')
                 .indicator({
-                    color: 0xFFFF0000, //下划线颜色
+                    color: 0xFF0000,
                 })
                 .selectedMode(this.selfSelectedMode)
                 .board({ borderRadius: this.selfSubTabBorderRadius })

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/TestAbility/pages/IndexSec.ets

+/*
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import events_emitter from '@ohos.events.emitter';
+import AbilityDelegatorRegistry from '@ohos.application.abilityDelegatorRegistry';
+import { Hypium } from '@ohos/hypium';
+import hilog from '@ohos.hilog';
+import testsuite from '../../test/List.test'
+@Entry
+@Component
+struct TabsExampleSec {
+    private controller: TabsController = new TabsController()
+    
+    @State barOverlap: boolean = false
+    @State barBackgroundColorColor: Color = Color.Red
+    @State barBackgroundColorNumber: number = 0
+    @State barBackgroundColorString: string = "#00000000"
+    @State barBackgroundColorResource: Resource = $r("sys.color.ohos_toggle_bg")
+
+    private stateChangCallBack = (eventData) => {
+        console.info("tabs page state change called:" + JSON.stringify(eventData));
+        if (eventData != null) {
+            this.barOverlap = eventData.data.barOverlap;
+            this.barBackgroundColorColor = eventData.data.barBackgroundColorColor;
+            this.barBackgroundColorNumber = eventData.data.barBackgroundColorNumber;         
+            this.barBackgroundColorString = eventData.data.barBackgroundColorString;        
+            this.barBackgroundColorResource = eventData.data.barBackgroundColorResource;
+        }
+    }
+
+    aboutToAppear(){
+        var stateChangeEvent = {
+            eventId: 183,
+            priority: events_emitter.EventPriority.LOW
+        }
+        events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+    }
+
+    build() {
+        Column() {
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .key('TabsOverlapTest1')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .barOverlap(this.barOverlap)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .key('TabsOverlapTest2')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .barOverlap(false)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .barBackgroundColor(this.barBackgroundColorColor)
+            .key('BarBackgroundColorColor')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .barOverlap(false)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .barBackgroundColor(this.barBackgroundColorNumber)
+            .key('BarBackgroundColorNumber')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .barOverlap(false)
+            .height('90%')
+            .width('90%')
+            .backgroundColor("#F5F5F5")
+            .barBackgroundColor(this.barBackgroundColorString)
+            .key('BarBackgroundColorString')
+
+            Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+                TabContent() {
+                    Column(){
+                        Text('Tab1').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Yellow)
+                }.tabBar("tab1")
+
+                TabContent() {
+                    Column(){
+                        Text('Tab2').fontSize(32)
+                    }.width('100%').height('100%').backgroundColor(Color.Pink)
+                }.tabBar("tab2")
+            }
+            .vertical(false)
+            .scrollable(true)
+            .barWidth(350)
+            .barHeight(70)
+            .animationDuration(200)
+            .height('90%')
+            .width('90%')
+            .barBackgroundColor(this.barBackgroundColorResource)
+            .key('BarBackgroundColorResource')
+        }
+    }
+}
\ No newline at end of file

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/test/List.test.ets

@@ -13,7 +13,9 @@
  * limitations under the License.
  */
 import tabs from './Tabs'
+import tabsSec from './TabsSec'
 
 export default function testsuite() {
        tabs()
+       tabsSec()
 }
\ No newline at end of file

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/ets/test/Tabs.ets

@@ -69,10 +69,10 @@ export default function tabs() {
           eventId: 183,
           priority: events_emitter.EventPriority.LOW
         }
-        console.info("[ArkUI_Tabs_Divider_0100] start to publish emit");
+        console.info("start to publish emit");
         events_emitter.emit(innerEvent, eventData);
       } catch (err) {
-        console.log("[ArkUI_Tabs_Divider_0100] change component data error: " + err.message);
+        console.log("change component data error: " + err.message);
       }
       await Utils.sleep(2000);
       done();
@@ -277,7 +277,7 @@ export default function tabs() {
           eventId: 183,
           priority: events_emitter.EventPriority.LOW
         }
-        console.info("[ArkUI_Tabs_Divider_0900] start to publish emit");
+        console.info("[ArkUI_Tabs_Divider_0800] start to publish emit");
         events_emitter.emit(innerEvent, eventData);
       } catch (err) {
         console.log("[ArkUI_Tabs_Divider_0800] change component data error: " + err.message);

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/module.json

 {
   "module": {
-    "name": "phone",
+    "name": "entry_test",
     "type": "feature",
     "description": "$string:module_test_desc",
     "mainElement": "TestAbility",

arkui/ace_ets_components_ux/ace_ets_component_tabs/src/main/resources/base/profile/test_pages.json

 {
   "src": [
-    "TestAbility/pages/Index"
+    "TestAbility/pages/Index",
+    "TestAbility/pages/IndexSec"
   ]
 }