Two Font Sizes in Text Component, Left-Right Row Layout, JS Engine, Multi-Level Linkage, Centered Navigation Title

[Daily HarmonyOS Next Knowledge] Two Font Sizes in Text Component, Left-Right Row Layout, JS Engine, Multi-Level Linkage, Centered Navigation Title

1. Is there a way to display two font sizes within a single Text component in HarmonyOS?

There's a requirement to display prices with the digits before the decimal point in 18pt and those after in 12pt. How can this be achieved?

This can be implemented using Text spans. Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5

DEMO:

Row() {
  Text() {
    Span('9999').fontSize(18).fontColor(Color.Orange)
    Span('.00').fontSize(12).fontColor(Color.Orange)
  }
}.width('100%').height('100%')

2. In a HarmonyOS Row container with two child controls, how to align one child left and the other centered?

There are two child controls in a Row container. How to align one child to the left and the other to the center?

Two recommended solutions:

1. Calculate distances by setting margins on each child control.
2. Use Flex layout with a transparent placeholder control.

Demo reference:

@Entry
@Component
struct test {
  build() {
    Column() {
      Text("Using margin")
      Row() {
        Text("Left-aligned").backgroundColor(Color.Red).height(100).width(60).margin({ left: 0 })
        Text("Centered").backgroundColor(Color.Blue).height(100).width(60).margin({ left: 90 })
      }.width('100%')

      Text("Using flex")
      Row() {
        Text("Left-aligned").backgroundColor(Color.Red).height(100).width(60)
        Text("Centered").backgroundColor(Color.Blue).height(100).width(60)
        Text("Transparent placeholder").height(100).width(60).visibility(Visibility.Hidden)
      }.width('100%').justifyContent(FlexAlign.SpaceBetween)
    }
  }
}

3. How to integrate a JS engine on HarmonyOS?

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/_j_s_v_m-V5

JSVM provides standard JavaScript engine capabilities.

Overview:

The standard JS engine strictly adheres to the EcmaScript specification, supporting the standard libraries defined therein and providing comprehensive native APIs for C++ interaction with JS. It accelerates code execution via JIT, offering secure and efficient JS execution capabilities. These capabilities are exposed through a stable ABI, the JSVM-API, which supports dynamic linking to different JS engine versions, shielding developers from interface differences. The API provides engine lifecycle management, JS context management, JS code execution, JS/C++ interoperability, execution environment snapshots, and code caching.

Supported Platform: arm64

Usage:

Link libjsvm.so from the SDK and include the ark_runtime/jsvm.h header in C++ code.

The API offers independent, standard, and complete JavaScript engine capabilities, including managing engine lifecycle, compiling and running JS code, implementing cross-language calls between JS and C++, and taking snapshots.

4. Display issues with multi-level linkage in HarmonyOS TextPicker?

When using two-level linkage, text may be truncated due to excessive length.

1. Can the width of first/second-level items be adjusted?
2. Can item content be displayed in multiple lines?

Simple example to maximize text display:

build() {
  Column() {
    TextPicker({ range: this.multi })
      .onChange((value: string | string[], index: number | number[]) => {
        console.info('TextPicker multi-column: onChange ' + JSON.stringify(value) + ', index: ' + JSON.stringify(index))
      })
      .width('100%')   // Set .width('100%') to maximize text display
  }
}

5. How to center the title in HarmonyOS NavDestination?

By default, the title in NavDestination is left-aligned. How to center it?

NavDestination supports custom title styles. Reference demo:

@Entry
@Component
struct NavRouterExample {
  @State isActiveWLAN: boolean = false
  @State isActiveBluetooth: boolean = false

  @Builder titleStyle(){
    Text('Title')
      .textAlign(TextAlign.Center)
      .fontSize(30)
      .position({ x: '50%'})
      .translate({x:'-50%'})
  }

  build() {
    Column() {
      Navigation() {
        NavRouter() {
          Row() {
            Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)
            Text(`WLAN`)
              .fontSize(22)
              .fontWeight(500)
              .textAlign(TextAlign.Center)
          }
          .width('90%')
          .height(72)

          NavDestination() {
            Flex({ direction: FlexDirection.Row }) {
              Text('No available WLAN found').fontSize(30).padding({ left: 15 })
            }
          }
          .title(this.titleStyle())
          .hideTitleBar(false).backgroundColor('#0c182431')
        }.backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff')
        .borderRadius(24)
        .onStateChange((isActivated: boolean) => {
          this.isActiveWLAN = isActivated
        })

        NavRouter() {
          Row() {
            Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)
            Text(`Bluetooth`)
              .fontSize(22)
              .fontWeight(500)
              .textAlign(TextAlign.Center)
          }
          .width('90%')
          .height(72)

          NavDestination() {
            Flex({ direction: FlexDirection.Row }) {
              Text('No available Bluetooth found').fontSize(30).padding({ left: 15 })
            }
          }.hideTitleBar(false).backgroundColor('#0c182431')
        }.backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff')
        .borderRadius(24)
        .onStateChange((isActivated: boolean) => {
          this.isActiveBluetooth = isActivated
        })
      }
      .title('Settings')
      .titleMode(NavigationTitleMode.Free)
      .mode(NavigationMode.Auto)
      .hideTitleBar(false)
      .hideToolBar(true)
    }.height('100%')
  }
}

Reference: http://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5

NavDestination serves as the root container for child pages, displaying the content area of Navigation.

• NavDestination must be used with Navigation as the root node of Navigation's destination pages. When used alone, it functions as a regular container without routing capabilities.
• If the lifecycle of an intermediate page in the page stack changes, the lifecycle events (onWillShow, onShown, onHidden, onWillDisappear) of both the previous and new top Destination pages trigger last.
• The title bar is hidden if NavDestination has no main/subtitle and no back button.