Mask Gradient, Stack Layout Alignment, Top Image Clipping, Emoji Panel, Keyboard Height Monitoring

[Daily HarmonyOS Next Knowledge] Mask Gradient, Stack Layout Alignment, Top Image Clipping, Emoji Panel, Keyboard Height Monitoring

1. Does HarmonyOS mask support gradients?

Use blendMode. Refer to the example: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-image-effect-V5

2. Why does align not work in HarmonyOS Stack?

@Entry
@Component
struct Index {
  icon: ResourceStr = $r("app.media.startIcon")

  build() {
    Stack() {
      Image(this.icon)
        .width(30)
        .height(30)
        .align(Alignment.TopStart)
      Image(this.icon)
        .width(30)
        .height(30)
        .align(Alignment.TopEnd)
      Image(this.icon)
        .width(30)
        .height(30)
        .align(Alignment.BottomStart)
      Image(this.icon)
        .width(30)
        .height(30)
        .align(Alignment.BottomEnd)
    }
    .width("100%")
    .height("100%")
  }
}

align sets the alignment of child elements within the container's drawing area, effective in Stack, Button, Marquee, StepperItem, Text, TextArea, TextInput, and FolderStack.

Use Flex layout for alignment:

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // Container sets child elements to center
  Text('alignSelf Start').width('25%').height(80)
    .alignSelf(ItemAlign.Start)
    .backgroundColor(0xF5DEB3)
  Text('alignSelf Baseline')
    .alignSelf(ItemAlign.Baseline)
    .width('25%')
    .height(80)
    .backgroundColor(0xD2B48C)
  Text('alignSelf Baseline').width('25%').height(100)
    .backgroundColor(0xF5DEB3)
    .alignSelf(ItemAlign.Baseline)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor(0xD2B48C)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor(0xF5DEB3)
}
.width('90%')
.height(220)
.backgroundColor(0xAFEEEE)

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-flex-layout-V5

3. How to clip the top and left content of an Image in HarmonyOS using clip?

Use new Path() to define a custom path:

Image($r('app.media.app_icon'))
  .clip(new Path().commands('M50 50 H280 V280 H50 Z'))
  .width('280px')
  .height('280px')

4. HarmonyOS emoji panel and soft keyboard

1. In user comment scenarios, the comment panel and emoji panel should switch smoothly.
2. Transitions must be smooth without flickering (e.g., the comment box should not drop then pop up when the keyboard is hidden).
3. Input emojis should be compatible with system emojis. Can this be achieved with InputText/InputArea?

Refer to: https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/wordrecognition/README.md

5. How to monitor keyboard height in HarmonyOS, move components up when the keyboard pops up, restore them when the keyboard is hidden, and control the avoidance height?

Refer to the example below:

// WebViewComponent.ets
import { IAdjustOffsetParams } from '../viewmodel/IAdjustOffsetParams'

// WebViewNode.ets
import web_webview from '@ohos.web.webview'
import { UIContext } from '@ohos.ArkUI.UIContext'
import { BuilderNode, FrameNode, NodeController } from '@ohos.ArkUI.node'
import WebViewComponent from '../view/WebViewComponent'
import { WebBuilderParmas } from '../viewmodel/WebBuilderParmas'
import { WebViewNodeUpdateParams } from '../viewmodel/WebViewNodeUpdateParams'

@Component
export default struct WebViewComponent {
  @Prop @Watch('onAdjustOffsetChange') adjustOffset: IAdjustOffsetParams | null

  onAdjustOffsetChange() {
    if (this.adjustOffset) {
      console.info(`TAG adjustOffset changed: x=${this.adjustOffset.x} y=${this.adjustOffset.y}`)
    } else {
      console.info(`TAG adjustOffset is null !`)
    }
  }

  build() {
    Row() {
      Text('Hello World')
        .fontSize(20)
        .fontColor(Color.Blue)
    }
    .backgroundColor(Color.White)
  }
}


@Builder
function webBuilder(params: WebBuilderParmas) {
  Column() {
    WebViewComponent({
      adjustOffset: params.adjustOffset
    })
  }
}

class MyNodeController extends NodeController {
  private rootNode: BuilderNode<[WebBuilderParmas]> | null = null;
  private wrapBuilder: WrappedBuilder<[WebBuilderParmas]> = wrapBuilder(webBuilder);

  makeNode(uiContext: UIContext): FrameNode | null {
    if (this.rootNode === null) {
      this.rootNode = new BuilderNode(uiContext);
      this.rootNode.build(this.wrapBuilder, { text: "This is a Text" })
    }
    return this.rootNode.getFrameNode();
  }

  updateNode(updateParams: WebViewNodeUpdateParams) {
    const params: WebBuilderParmas = {
      adjustOffset: updateParams.adjustOffset
    }
    console.info(`TAG updateNode: ${JSON.stringify(params)}`)
    this.rootNode?.update(params)
  }
}

@Entry
@Component
struct MainPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  private myNodeController: MyNodeController = new MyNodeController();
  private currX: number = 0;
  private currY: number = 0;

  build() {
    Column() {
      NodeContainer(this.myNodeController)
      Button('click to update')
        .onClick(() => {
          this.currX += 100;
          this.currY += 100;
          const updateParams: WebViewNodeUpdateParams = {
            adjustOffset: {
              x: this.currX,
              y: this.currY
            }
          }
          this.myNodeController.updateNode(updateParams)
        })
    }
  }
}

Related parameters:

// IAdjustOffsetParams.ets
export interface IAdjustOffsetParams {
  x?: number;
  y?: number;
}

// WebBuilderParmas.ets
export interface WebBuilderParmas {
  adjustOffset: IAdjustOffsetParams;
}

// WebViewNodeUpdateParams.ets
export interface WebViewNodeUpdateParams {
  adjustOffset: IAdjustOffsetParams;
}