Status Bar Font, Lifecycle, Custom Dialog Centering, Transparency, Tab Centering

【Daily HarmonyOS Next Knowledge】Status Bar Font, Lifecycle, Custom Dialog Centering, Transparency, Tab Centering

1. How to control the status bar font color in a single HarmonyOS page?

The status bar font color can be modified by setting statusBarContentColor. Refer to the documentation:

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

Reference code:

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;
              // Set the window to full-screen mode
              win.setWindowLayoutFullScreen(true);
              // Set status bar properties
              win.setWindowSystemBarProperties({
                // Set status bar background color
                statusBarColor: '#ffe30520',
                // Set status bar text color to white
                statusBarContentColor: '#ffffffff'
              })
              console.info('Status bar immersive window setup completed')
            }
            catch (expextion) {
              console.error("error cause :" + JSON.stringify(expextion))
            }
          })
        })
        ColumnSplit().height(20)
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(Color.Green)
  }
}

2. When do HarmonyOS lifecycle callbacks trigger?

When the app is swiped up to exit, which callback triggers first: onPageHide or aboutToDisappear?

In this scenario, only the aboutToDisappear callback triggers. For lifecycle characteristics, refer to:

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

Application lifecycle functions can be defined in app.js as follows:

Attribute	Type	Description	Trigger Time
onCreate	() => void	App creation	Called when the app is created.
onShow6+	() => void	App in foreground	Triggered when the app is in the foreground.
onHide6+	() => void	App in background	Triggered when the app is in the background.
onDestroy	() => void	App destruction	Triggered when the app exits.

3. How to display a custom HarmonyOS dialog in the center of the screen?

How to center a custom time picker dialog or user privacy agreement dialog.

Reference 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,
  })

  // Set dialogController to null when the custom component is about to be destroyed
  aboutToDisappear() {
    this.dialogController = null // Set dialogController to null
  }

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

4. Does the HarmonyOS UI component provide an setAlpha attribute?

Transparency can be set using opacity. Refer to:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-opacity-V5

opacity(value: number | Resource)

Sets the opacity of the component.

Parameters:

Parameter Name	Type	Required	Description
value	number \	Resource	Yes

Example:

// 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 })
  }
}

![[【每日学点HarmonyOS Next知识】25.03.02.png]]

5. Can HarmonyOS Tabs be aligned left/right instead of only centered?

Does the Tabs component support left/right alignment?

The Tabs component does not provide a left-aligned style. You can customize a left-aligned tabBar using Flex,联动索引值 with the Tabs component via onClick to achieve switching:

@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;
        })
      }
    }
  }
}