Textbox Focus Acquisition, Custom Component Subcomponent Addition, Floating Button

#harmonyosnext

【Daily HarmonyOS Next Knowledge】 Textbox Focus Acquisition, Custom Component Subcomponent Addition, Floating Button, Dialog Button Update, Variable Name Component

1. Why can't HarmonyOS TextArea automatically focus when displayed?

Obtain focus through requestFocus. Refer to the demo below:

import inputMethod from '@ohos.inputMethod';

@Entry
@Component
export struct AsrPage {
  @State message: string = 'Hello World'
  @State show: boolean = false
  inputMethodController = inputMethod.getController();
  controller: TextInputController = new TextInputController()
  inputId: string = 'ceshi'
  aboutToAppear(): void {
    let textConfig: inputMethod.TextConfig = {
      inputAttribute: {
        textInputType: 0,
        enterKeyType: 1
      }
    }
    this.inputMethodController.attach(false, textConfig)
      .then(() => {
      })
      .catch((reason: ESObject) => {
      })
  }
  build() {
    NavDestination() {
      Column() {
        TextArea({
          placeholder: '',
          text: ''
        })
          .width('100%')
          .height(26)
          .defaultFocus(true)
          .visibility(this.show ? Visibility.Visible : Visibility.None)
          .borderColor('#ff0000')
          .backgroundColor('#ff0000')
          .id(this.inputId)

        Button('打开').onClick(() => {
          this.show = true
          this.controller.caretPosition(this.message.length)
          focusControl.requestFocus(this.inputId)
          this.inputMethodController.showTextInput().then(() => {
          }).catch((reason: ESObject) => {

          })

        })
        Button('关闭').onClick(() => {
          this.show = true
          this.inputMethodController.hideTextInput().then(() => {
          }).catch((reason: ESObject) => {
          })

        })
      }.justifyContent(FlexAlign.Center).width('100%').height('100%')
    }.hideTitleBar(true)
  }
}

2. How to add child controls to a HarmonyOS custom component when using it?

If you have customized a control and want to add controls inside it like using containers such as Row or Column, refer to the following example. You can pass subcomponents to the custom component via builder:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-custom-component-layout-V5#sizeresult10

3. Does HarmonyOS have a floatingActionButton component?

There is no built-in floatingActionButton component. To achieve a floating button effect, you can customize it using the Button() component. Refer to the demo below:

// xxx.ets
@Entry
@Component
struct HoverButtonExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    Stack() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }, (item: number) => item.toString())
      }.width('90%')
      Button() {
        Image($r('app.media.ic_public_add'))
          .width(50)
          .height(50)
      }
      .width(60)
      .height(60)
      .position({ x: '80%', y: 600 })
      .shadow({ radius: 10 })
      .onClick(() => {
        // Operations to be executed
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

4. How to update the button content of AlertDialog in HarmonyOS?

When the cancel button content passed to AlertDialog is set with a @State variable, it does not update and always displays the initial value.

AlertDialog does not support setting variables for the value of primaryButton. You can try customizing a pop-up window.

Refer to the document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5

5. How to use variable-name components (similar to React) in HarmonyOS ArkTS?

In the following example, the subcomponent referenced in Row is a variable passed from outside, which may be View1 or View2. How to support syntax similar to the following:

@Prop private view;
build() {
  Row() {
    view();
  }
  .width('100%')
  .height('100%')
}

Dynamic component loading can be achieved via @builderParam.

Refer to the official website example: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builderparam-V5

When developers create a custom component and want to add specific functions to it (e.g., adding a click-to-navigate operation to a specified custom component), embedding event methods directly in the component will cause all instances of the custom component to gain the function. To solve this, ArkUI introduces the @BuilderParam decorator, which decorates variables pointing to @Builder methods (i.e., @BuilderParam is used to承接 @Builder functions). Developers can assign values to the @BuilderParam-decorated custom build function in different ways (e.g., parameter modification, trailing closure, arrow function borrowing) when initializing the custom component, and add specific functions to the component by calling @BuilderParam inside the custom component. This decorator is used to declare an element of any UI description, similar to a slot placeholder.