【每日学点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 = 0
  private controller: TabsController = new TabsController()
  @State test: boolean = false
  // 单独的页签
  @Builder
  Tab(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%')
      //tabs
      Tabs({ 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: CustomDialogController
  title: 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.Blue
  dialogController1: CustomDialogController = new CustomDialogController({
    builder: MyDialog1({
      title: '弹窗1',
    }),
    // 弹窗容器样式是否自定义
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Top
  })

  confirm(data: string) {
    this.dialogData = data
    console.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

此接口根据调用对象不同，实现不同的功能：

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