【逐日学点HarmonyOS Next知识】tab对齐、相对结构、自定义弹窗全屏、动画 ...

1、HarmonyOS Tabs 是否能支持 tabbar 居左对齐？

当前方案为自定义tabbar实现，示例demo：

1. @Entry
2. @Component
3. struct TabsExample {
4.   @State tabArray: Array<number> = [0, 1,2]
5.   @State focusIndex: number = 0
6.   @State pre: number = 0
7.   @State index: number = 0
8.   private controller: TabsController = new TabsController()
9.   @State test: boolean = false
10.   // 单独的页签
11.   @Builder
12.   Tab(tabName: string, tabItem: number, tabIndex: number) {
13.     Row({ space: 20 }) {
14.       Text(tabName).fontSize(18)
15.         .fontColor(tabItem===this.focusIndex?Color.Red:Color.Black)
16.     }
17.     .justifyContent(FlexAlign.Center)
18.     .constraintSize({ minWidth: 35 })
19.     .width(80)
20.     .height(60)
21.     .borderRadius({ topLeft: 10, topRight: 10 })
22.     .onClick(() => {
23.       this.controller.changeIndex(tabIndex)
24.       this.focusIndex = tabIndex
25.     })
26.   }
27.   build() {
28.     Column() {
29.       Column() {
30.         // 页签
31.         Row({ space: 7 }) {
32.           Scroll() {
33.             Row() {
34.               ForEach(this.tabArray, (item: number, index: number) => {
35.                 this.Tab("页签 " + item, item, index)
36.               })
37.             }
38.             .justifyContent(FlexAlign.Start)
39.           }
40.           .align(Alignment.Start)
41.           .scrollable(ScrollDirection.Horizontal)
42.           .scrollBar(BarState.Off)
43.           .width('90%')
44.         }
45.         .alignItems(VerticalAlign.Bottom)
46.         .width('100%')
47.       }
48.       .alignItems(HorizontalAlign.Start)
49.       .width('100%')
50.       //tabs
51.       Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
52.         ForEach(this.tabArray, (item: number, index: number) => {
53.           TabContent() {
54.             Text('我是页面 ' + item + " 的内容")
55.               .height(300)
56.               .width('100%')
57.               .fontSize(30)
58.           }
59.           .backgroundColor(Color.Pink)
60.         })
61.       }
62.       .width('100%')
63.       .barHeight(0)
64.       .animationDuration(100)
65.       .onChange((index: number) => {
66.         console.log('foo change')
67.         this.focusIndex = index})
68.     }
69.     .height('100%')
70.   }
71. }

复制代码

2、HarmonyOS RelativeContainer中alignRules的bias属性设置无效？

参考demo：

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Row() {
6.       RelativeContainer() {
7.         Row().width(100).height(100)
8.           .backgroundColor("#FF3333")
9.           .alignRules({
10.             top: {anchor: "__container__", align: VerticalAlign.Top},
11.             bottom : {anchor : "__container__", align : VerticalAlign.Bottom},
12.             left: {anchor: "__container__", align: HorizontalAlign.Start},
13.             right : {anchor : "__container__", align: HorizontalAlign.End},
14.             bias : {vertical : 0.3}
15.           })
16.           .id("row1")
17.       }
18.       .width(300).height(300)
19.       .margin({left: 50})
20.       .border({width:2, color: "#6699FF"})
21.     }
22.     .height('100%')
23.   }
24. }

复制代码

3、HarmonyOS 自定义弹框不能全屏？

参考demo：

1. @CustomDialog
2. export struct MyDialog1 {
3.   controller1: CustomDialogController
4.   title: string = ''
5.   build() {
6.     Row() {
7.       Column({ space: 10 }) {
8.         Text(this.title).fontSize(25)
9.           .fontColor(Color.Blue)
10.         Flex({ justifyContent: FlexAlign.SpaceAround }) {
11.           Button('取消')
12.             .onClick(() => {
13.               this.controller1.close()
14.             })
15.             .backgroundColor(0xffffff)
16.             .fontColor(Color.Black)
17.           Button('确认')
18.             .onClick(() => {
19.               this.controller1.close()
20.             })
21.             .backgroundColor(0xffffff)
22.             .fontColor(Color.Black)
23.         }
24.         .width('100%')
25.       }
26.       .width('100%')
27.       .backgroundColor(Color.Gray).height('100%')
28.     }
29.   }
30. }
31. // main页面
32. @Entry
33. @Component
34. struct Index {
35.   @State dialogData: string = ''
36.   @State colorTest: Color = Color.Blue
37.   dialogController1: CustomDialogController = new CustomDialogController({
38.     builder: MyDialog1({
39.       title: '弹窗1',
40.     }),
41.     // 弹窗容器样式是否自定义
42.     customStyle: true,
43.     offset: { dx: 0, dy: 0 },
44.     alignment: DialogAlignment.Top
45.   })
47.   confirm(data: string) {
48.     this.dialogData = data
49.     console.info('ssss') // 获取弹窗输入的信息
50.   }
51.   build() {
52.     Row() {
53.       Column({ space: 10 }) {
54.         Text('这是一个弹窗的测试')
55.           .fontSize(25).margin(20).fontColor(0x3399FF)
56.         Button('点击打开弹窗')
57.           .onClick(() => {
58.             this.dialogController1.open()
59.           })
60.       }.width('100%')
61.     }.height('100%').backgroundColor(Color.White)
62.   }
63. }

复制代码

4、HarmonyOS 如何实现动画集合？

组件A缩放&旋转动画1S后，再次缩放&旋转，再过4s再次缩放&旋转，再过1s缩放&旋转这4个为一个集合，这个集合一直实行。这种怎么实现。
利用关键帧动画可以实现keyframeAnimateTo参考demo：

1. import { UIContext } from '@ohos.ArkUI.UIContext';
3. @Entry
4. @Component
5. struct Index {
6.   @State myScale: number = 1.0;
7.   uiContext: UIContext | undefined = undefined;
9.   aboutToAppear() {
10.     this.uiContext = this.getUIContext?.();
11.   }
13.   build() {
14.     Column() {
15.       Circle()
16.         .width(100)
17.         .height(100)
18.         .fill("#46B1E3")
19.         .margin(100)
20.         .scale({ x: this.myScale, y: this.myScale })//设置x轴/y轴的缩放
21.         .onClick(() => {
22.           if (!this.uiContext) {
23.             console.info("no uiContext, keyframe failed");
24.             return;
25.           }
26.           this.myScale = 1;
27.           // 设置关键帧动画整体播放3次
28.           this.uiContext.keyframeAnimateTo({ iterations: 3 }, [
29.             {
30.               // 第一段关键帧动画时长为800ms，scale属性做从1到1.5的动画
31.               duration: 800,
32.               event: () => {
33.                 this.myScale = 1.5;
34.               }
35.             },
36.             {
37.               // 第二段关键帧动画时长为500ms，scale属性做从1.5到1的动画
38.               duration: 500,
39.               event: () => {
40.                 this.myScale = 1;
41.               }
42.             }
43.           ]);
44.         })
45.     }.width('100%').margin({ top: 5 })
46.   }
47. }

复制代码

5、HarmonyOS 回到桌面API咨询？

APP中有功能会引导用户回到桌面添加服务卡片，是否有API可以触发回到桌面。
窗口里有minimize方法，这个接口会通知ams窗口退后台，来实现app回到后台的结果 参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#minimize11
minimize(callback: AsyncCallback<void>): void
此接口根据调用对象不同，实现不同的功能：

• 当调用对象为主窗口时，实现最小化功能，可在Dock栏中还原。
  
• 当调用对象为子窗口时，实现隐蔽功能，不可在Dock栏中还原，可以利用showWindow()举行还原。悬浮窗类型的窗口对象，调用此接口会报1300002错误码。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。