【每日学点HarmonyOS Next知识】tab对齐、相对布局、自定义弹窗全屏、动画集合、回到桌面

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

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

@Entry
@Component
struct TabsExample {@State tabArray: Array<number> = [0, 1,2]@State focusIndex: number = 0@State pre: number = 0@State index: number = 0private controller: TabsController = new TabsController()@State test: boolean = false// 单独的页签@BuilderTab(tabName: string, tabItem: number, tabIndex: number) {Row({ space: 20 }) {Text(tabName).fontSize(18).fontColor(tabItem===this.focusIndex?Color.Red:Color.Black)}.justifyContent(FlexAlign.Center).constraintSize({ minWidth: 35 }).width(80).height(60).borderRadius({ topLeft: 10, topRight: 10 }).onClick(() => {this.controller.changeIndex(tabIndex)this.focusIndex = tabIndex})}build() {Column() {Column() {// 页签Row({ space: 7 }) {Scroll() {Row() {ForEach(this.tabArray, (item: number, index: number) => {this.Tab("页签 " + item, item, index)})}.justifyContent(FlexAlign.Start)}.align(Alignment.Start).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('90%')}.alignItems(VerticalAlign.Bottom).width('100%')}.alignItems(HorizontalAlign.Start).width('100%')//tabsTabs({ barPosition: BarPosition.Start, controller: this.controller }) {ForEach(this.tabArray, (item: number, index: number) => {TabContent() {Text('我是页面 ' + item + " 的内容").height(300).width('100%').fontSize(30)}.backgroundColor(Color.Pink)})}.width('100%').barHeight(0).animationDuration(100).onChange((index: number) => {console.log('foo change')this.focusIndex = index})}.height('100%')}
}

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

参考demo：

@Entry
@Component
struct Index {build() {Row() {RelativeContainer() {Row().width(100).height(100).backgroundColor("#FF3333").alignRules({top: {anchor: "__container__", align: VerticalAlign.Top},bottom : {anchor : "__container__", align : VerticalAlign.Bottom},left: {anchor: "__container__", align: HorizontalAlign.Start},right : {anchor : "__container__", align: HorizontalAlign.End},bias : {vertical : 0.3}}).id("row1")}.width(300).height(300).margin({left: 50}).border({width:2, color: "#6699FF"})}.height('100%')}
}

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

参考demo：

@CustomDialog
export struct MyDialog1 {controller1: CustomDialogControllertitle: string = ''build() {Row() {Column({ space: 10 }) {Text(this.title).fontSize(25).fontColor(Color.Blue)Flex({ justifyContent: FlexAlign.SpaceAround }) {Button('取消').onClick(() => {this.controller1.close()}).backgroundColor(0xffffff).fontColor(Color.Black)Button('确认').onClick(() => {this.controller1.close()}).backgroundColor(0xffffff).fontColor(Color.Black)}.width('100%')}.width('100%').backgroundColor(Color.Gray).height('100%')}}
}
// main页面
@Entry
@Component
struct Index {@State dialogData: string = ''@State colorTest: Color = Color.BluedialogController1: CustomDialogController = new CustomDialogController({builder: MyDialog1({title: '弹窗1',}),// 弹窗容器样式是否自定义customStyle: true,offset: { dx: 0, dy: 0 },alignment: DialogAlignment.Top})confirm(data: string) {this.dialogData = dataconsole.info('ssss') // 获取弹窗输入的信息}build() {Row() {Column({ space: 10 }) {Text('这是一个弹窗的测试').fontSize(25).margin(20).fontColor(0x3399FF)Button('点击打开弹窗').onClick(() => {this.dialogController1.open()})}.width('100%')}.height('100%').backgroundColor(Color.White)}
}

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

组件A缩放&旋转动画1S后，再次缩放&旋转，再过4s再次缩放&旋转，再过1s缩放&旋转这4个为一个集合，这个集合一直执行。这种怎么实现。

使用关键帧动画可以实现keyframeAnimateTo参考demo：

import { UIContext } from '@ohos.ArkUI.UIContext';@Entry
@Component
struct Index {@State myScale: number = 1.0;uiContext: UIContext | undefined = undefined;aboutToAppear() {this.uiContext = this.getUIContext?.();}build() {Column() {Circle().width(100).height(100).fill("#46B1E3").margin(100).scale({ x: this.myScale, y: this.myScale })//设置x轴/y轴的缩放.onClick(() => {if (!this.uiContext) {console.info("no uiContext, keyframe failed");return;}this.myScale = 1;// 设置关键帧动画整体播放3次this.uiContext.keyframeAnimateTo({ iterations: 3 }, [{// 第一段关键帧动画时长为800ms，scale属性做从1到1.5的动画duration: 800,event: () => {this.myScale = 1.5;}},{// 第二段关键帧动画时长为500ms，scale属性做从1.5到1的动画duration: 500,event: () => {this.myScale = 1;}}]);})}.width('100%').margin({ top: 5 })}
}

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
此接口根据调用对象不同，实现不同的功能：