Image Display Issues, Custom Keyboard Monitoring, State Styles, Line Spacing Settings, Image Component Request Headers

[Daily HarmonyOS Next Knowledge] Image Display Issues, Custom Keyboard Monitoring, State Styles, Line Spacing Settings, Image Component Request Headers

1. Images fail to display when the HarmonyOS file path contains a '#' symbol. How to resolve this?

The Image component does not support direct sandbox paths. Convert the sandbox path to a sandbox URI using fileuri.getUriFromPath(file.path) from the @ohos.file.fileuri module, then pass the URI to the Image component to display sandbox GIFs correctly.

2. How to monitor system events to retract the keyboard in a HarmonyOS custom keyboard?

Global events are used for keyboard retraction operations:

@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController()
  @State inputValue: string = ""

  // Custom keyboard component
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Button('x').onClick(() => {
        // Close the custom keyboard
        this.controller.stopEditing()
      })
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.inputValue += item
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      Text('1221213213')
        .height('20%')
        .backgroundColor(Color.Green)
      TextArea()
        .height('20%')
        .backgroundColor(Color.Orange)
      TextInput({ controller: this.controller, text: this.inputValue })// Bind custom keyboard
        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }).height('48vp')
      Column()
        .width('100%')
        .height('70%')
        .backgroundColor(Color.Grey)
    }.height('100%')
    .width('100%')
    .onClick(() => {
      this.controller.stopEditing()
    })
    .backgroundColor(Color.Pink)
  }
}

3. How to set line spacing for Text in HarmonyOS?

Use the lineHeight attribute: https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text

4. Setting fontColor in the stateStyles of a HarmonyOS Button component does not work. Must a custom state be created?

Use attributeModifier for dynamic attribute settings:

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

Dynamically set component attributes using if/else logic and polymorphic styles:

attributeModifier(modifier: AttributeModifier<T>)

5. Does the HarmonyOS ArKUI Image component support setting request headers?

The ImageKnife library now supports custom request headers. Reference:

https://gitee.com/openharmony-tpc/ImageKnife#%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E