【每日学点HarmonyOS Next知识】状态栏字体、生命周期、自定义对话框屏幕中间、透明度、tab居中

1、HarmonyOS 单页面如何控制状态栏字体颜色？

状态栏字体颜色可通过设置statusBarContentColor修改，参考文档如下：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

参考代码：

复制代码

import window from '@ohos.window';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Row() {
      Column() {
        Text(this.message)
          .align(Alignment.Center)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
        ColumnSplit().height(20)
        Button() {
          Text("点我看效果")
        }
        .width(100)
        .height(50)
        .onClick(() => {
          this.message = "我变了"
          window.getLastWindow(getContext(), (err, data) => {
            let win: window.Window;
            if (err.code) {
              console.error("error code :" + JSON.stringify(err.code))
              return;
            }
            try {
              win = data;
              //设置窗口为全屏模式
              win.setWindowLayoutFullScreen(true);
              // 设置状态栏
              win.setWindowSystemBarProperties({
                // 设置状态栏颜色为其他颜色
                statusBarColor: '#ffe30520',
                // 设置状态栏文本颜色为白色
                statusBarContentColor: '#ffffffff'
              })
              console.info('带状态栏沉浸式窗口设置完成')
            }
            catch (expextion) {
              console.error("error cause :" + JSON.stringify(expextion))
            }
          })
        })
        ColumnSplit().height(20)
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(Color.Green)
  }
}

2、HarmonyOS 生命周期回调触发？

当程序被上滑删除退出时，当前页面的onpagehide和aboutToDisappear哪个先触发。

根据场景来看，只会触发aboutToDisappear回调，生命周期相关特性可参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/js-framework-lifecycle-V5

在app.js中可以定义如下应用生命周期函数：

属性	类型	描述	触发时机
onCreate	() => void	应用创建	当应用创建时调用。
onShow6+	() => void	应用处于前台	当应用处于前台时触发。
onHide6+	() => void	应用处于后台	当应用处于后台时触发。
onDestroy	() => void	应用销毁	当应用退出时触发。

3、HarmonyOS 自定义的dialog如何显示在屏幕中间？

自定义的时间弹窗或者用户隐私协议弹窗如何显示在屏幕中间

参考demo:

复制代码

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController
  private selectDate: Date = new Date()

  build() {
    Column() {
      DatePicker({
        start: new Date('2009-1-1'),
        end: new Date('2100-12-31'),
        selected: this.selectDate
      })
    }
  }
}

@Entry
@Component
struct Index {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    openAnimation: {
      duration: 1200,
      curve: Curve.Friction,
      delay: 500,
      playMode: PlayMode.Alternate,
      onFinish: () => {
        console.info('play end')
      }
    },
    autoCancel: true,
    alignment: DialogAlignment.Center,
    gridCount: 4,
    customStyle: true,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
  })

  // 在自定义组件即将析构销毁时将dialogControlle置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

4、HarmonyOS UI组件提供setAlpha的属性吗？

opacity可以设置透明度，请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-opacity-V5

opacity(value: number | Resource)

设置组件的不透明度。
参数：

参数名	类型	必填	说明
value	number \| Resource	是	元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。默认值：1 说明：子组件会继承父组件的透明度，并与自身的透明度属性叠加。如：父组件透明度为0.1，子组件设置透明度为0.8，则子组件实际透明度为0.1*0.8=0.08。
示例

该示例主要显示通过opacity设置组件的不透明度。

复制代码

// xxx.ets
@Entry
@Component
struct OpacityExample {
  build() {
    Column({ space: 5 }) {
      Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE)
      Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
      Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
      Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
      Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

5、HarmonyOS 关于Tabs只能居中的问题？

Tabs是否支持左对齐，右对齐

Tabs组件未提供居左的样式，可以用Flex自定义一个靠左的tabBar组件，在onclick事件中通过修改索引值和Tabs组件的索引联动，实现切换效果

复制代码

@Entry
@Component
struct Index {
  private tabsController: TabsController = new TabsController()
  @State currentIndex: number = 0;

  @Builder
  TabBarBuilder(title: string, targetIndex: number) {
    Text(title)
      .fontWeight(targetIndex === this.currentIndex ? FontWeight.Bold : FontWeight.Normal)
      .margin({ left: 10, right: 10 })
      .onClick(() => {
        this.tabsController.changeIndex(targetIndex)
      })
  }

  build() {
    Row() {
      Column() {
         
Flex({ direction: FlexDirection.Row }) {
        Flex({ direction: FlexDirection.RowReverse }) {
          this.TabBarBuilder('页签1', 0)
          this.TabBarBuilder('页签2', 1)
          this.TabBarBuilder('页签3', 2)
        }

        Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
          TabContent() {
            Text("页签1页面")
          }

          TabContent() {
            Text("页签2页面")
          }

          TabContent() {
            Text("页签3页面")
          }
        }.onChange((index: number) => {
          this.currentIndex = index;
        })
      }
    }
  }
}