【每日学点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?: CustomDialogControllerprivate 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;@BuilderTabBarBuilder(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;})}}}
}