Control Edge Blur, Dialog Squeezed by Keyboard, Image Component Property Issues, Pixel to Buffer Conversion

【Daily HarmonyOS Next Knowledge】Control Edge Blur, Dialog Squeezed by Keyboard, Image Component Property Issues, Pixel to Buffer Conversion, Manipulating Child Components

1. How to achieve a blurred edge fade-out effect for controls in HarmonyOS?

Currently, lists such as List and Scroll do not have edge fade-out effects. Similar to the Porter-Duff algorithm for layer overlay, using Canvas to draw two layers and applying destination-in blending with a gradient on the second layer can create a fade-out effect on the first layer. However, it seems Canvas can only draw new content and cannot use the content displayed by a control as a layer for subsequent overlay operations.

Reference code:

@Entry
@Component
struct page240527110725022 {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  @Builder
  overlayBuilder() {
    Stack()
      .height("100%")
      .width("100%")
      .linearGradient({
        direction: GradientDirection.Bottom, // Gradient direction
        colors: [["#00FFFFFF", 0.0], ["#FFFFFFFF", 0.3]] // Repeating color effect when the last element's ratio is less than 1
      })
      .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
      .hitTestBehavior(HitTestMode.None);
  }

  build() {
    Column() {
      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);
          }
          .onClick(() => {
            console.log('is click');
          });
        }, (item: string) => item);
      }
      .width('90%')
      .scrollBar(BarState.Off)
      .overlay(this.overlayBuilder())
      .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN);
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 });
  }
}

2. In HarmonyOS, the input box in a custom dialog is pushed up by the keyboard. How to prevent this?

In a custom dialog, the input box is pushed up by the keyboard. How can we prevent components from being pushed up by the keyboard?

Custom popups are only suitable for simple notification scenarios and cannot replace full pages. Due to the current behavior of fully避让 the input method, when the soft keyboard appears, the popup will automatically shift upward by the height of the keyboard. Therefore, if the popup is too tall, some content may become invisible. This is the current specification. It is recommended to use modal sheets instead.

Reference document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5

This is a specification issue. Popups currently fully避让 the input method. It is recommended to avoid using popups in such scenarios or implement a workaround: have the app listen for keyboard show/hide events and add a Scroll component when space is insufficient.

3. In the HarmonyOS Image component, when src is an AnimatedDrawableDescriptor, the mode property does not take effect.

Reference document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#rendermode

renderMode(value: ImageRenderMode)

Sets the rendering mode for the image. This property is not supported for SVG image sources.

When a ColorFilter is set, this property has no effect.

When the component's parameter type is AnimatedDrawableDescriptor, setting this property has no effect.

4. How to convert a HarmonyOS PixelMap to an ArrayBuffer?

The following two methods both take a PixelMap as input and output an ArrayBuffer, but the resulting ArrayBuffer objects seem different. What are the differences between these two methods, and what are their respective use cases?

const readBuffer = new ArrayBuffer(pixelBytesNumber);
pixelMap.readPixelsToBuffer(readBuffer).then(() => {
  console.info('Succeeded in reading image pixel data.');
}).catch((error : BusinessError) => {
  console.error('Failed to read image pixel data. And the error is: ' + error);
});

import {BusinessError} from '@ohos.base';
imagePackerApi.packing(imageSource, packOpts).then((data : ArrayBuffer) => {
  // ...
}).catch((error : BusinessError) => {
  console.error('Failed to pack the image. And the error is: ' + error);
});

Reference document:

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

@ohos.multimedia.image (Image Processing) provides image processing capabilities, including creating PixelMap objects from properties, reading image pixel data, and reading image data within a specified region.

1. On HarmonyOS, image data is stored using the PixelMap class. You can convert an ArrayBuffer to a PixelMap and set it to an Image component.
2. Provides image processing effects, including creating PixelMap objects from properties, reading image pixel data, and reading image data within a specified region. The ImagePacker class is used for image compression and packing. Before calling ImagePacker methods, you need to create an ImagePacker instance via createImagePacker. To send image data to a Bluetooth printer using socket.sppWrite, you can use readPixelsToBuffer.

5. How to manipulate child components in HarmonyOS?

How can I obtain an array of child component instances of a specific component via code?

Parent components can use the @Prop or @Link decorators to synchronize variables between parent and child components.

Reference link:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-management-V5

The getInspectorByKey method can obtain all properties of a component with a specified ID, but it does not include child component information.

Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-component-id-V5#getinspectorbykey9

getInspectorByKey(id: string): string

Obtains all properties of the component with the specified ID, excluding child component information.

This API is intended for application testing only. Due to performance concerns, its use is not recommended.