kouwei qing

Posted on Jun 25

Text Height Issues, Long-press Icon Menu, Rounded Gradient Borders, ArkX Queries, Progress Animation Cancellation

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Text Height Issues, Long-press Icon Menu, Rounded Gradient Borders, ArkX Queries, Progress Animation Cancellation

1. When pulling up a UIExtension in a HarmonyOS bindSheet, the TextArea component in UIAbility displays long text. When scrolling the text, the bindSheet page also scrolls. How to allow only text scrolling while keeping the bindSheet page height fixed?

Try not using UIExtension and directly pulling up the page layout with bindSheet. In this case, the TextArea component can scroll to display text, and the bindSheet page maintains its height without being affected.

Why does using UIExtension cause the bug where both the bindSheet page and TextArea text scroll simultaneously?

Pulling Side Code:

import prompt from '@ohos.prompt'
import { Button } from '@ohos.multimodalInput.mouseEvent';
@Entry
@Component
struct Second {
  @State message1: string = '大江东去，浪淘尽，千古风流人物。故垒西边，人道是：三国周郎赤壁。乱石崩云，惊涛裂岸，卷起千堆雪。江山如画，一时多少豪杰。'
  @State visible: Visibility = Visibility.Hidden
  private proxy: UIExtensionProxy | null = null;
  @State isShow: boolean = false
  @Builder myBuilder() {
    Column() {
      UIExtensionComponent({
        bundleName: "com.example.controllablebuildcomponent",
        abilityName: "UIExtensionProvider",
        parameters: {
          "ability.want.params.uiExtensionType": "sys/commonUI"
        }
      })
        .width('98%')
        .height('98%')
        .onResult((data) => {
          console.log("fengsumei: onResult data : " + JSON.stringify(data))
        })
        .onRelease((code) => {
          console.log("release code : " + code)
        })
        .onReceive((data) => {
          console.log("onReceive data : " + JSON.stringify(data))
        })
        .onRemoteReady((proxy) => {
          console.info('onRemoteReady, for test')
          this.proxy = proxy
          this.proxy.off("asyncReceiverRegister");
        })
      // .hitTestBehavior(HitTestMode.None)
    }
    .width('100%')
  }

  build() {
    Row() {
      Column() {
        Text(this.message1)
          .fontSize(20)
          .margin(20)
          .copyOption(CopyOptions.InApp)
          .onClick((event?: ClickEvent) => {
            console.log("fengsumei: ClickEvent!")
          })
          .textMenuOptions([{ content: "Creative", action: (selectContent: string) => {
            console.log("selectContent: " + selectContent)
            this.isShow = true
          }}])
          .bindSheet($$this.isShow, this.myBuilder(), {
            showClose: false,
            shouldDismiss: ((sheetDismiss: SheetDismiss) => {
              console.log("bind sheet shouldDismiss")
              sheetDismiss.dismiss()
            }),
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

Problematic Interface Code in the Pulled App:

Tabs({ barPosition: BarPosition.End, controller: this.tabsController, index: this.currentIndex }) {
  TabContent() {
    TextArea({
      text: this.textResult,
      controller: this.textAreaController
    })
      .width('100%')
      .height('100%')
      .fontSize(16)
      .fontColor('#182431')
      .backgroundColor('#FFFFFF')
      .copyOption(CopyOptions.LocalDevice)
      .lineSpacing(LengthMetrics.px(20))
      .letterSpacing(2)
      .onChange((value: string) => {
        this.textResult = value
      })
      .onTouch((event: TouchEvent) => {
        console.debug(TAG, "TextArea Touch!")
        // event.stopPropagation()
      })
      .onContentScroll(() => {
        console.debug(TAG, "TextArea content scroll!")
      })
  }
  .backgroundColor('#FFFFFF')
  .borderRadius(15)
  .margin({ left: 2, right: 2 })

  TabContent() {
    TextArea({
      text: 'this.textResult 222',
      controller: this.textAreaController
    })
      .width('100%')
      .height('100%')
      .fontSize(16)
      .fontColor('#182431')
      .backgroundColor('#FFFFFF')
      .copyOption(CopyOptions.LocalDevice)
      .lineSpacing(LengthMetrics.px(20))
      .letterSpacing(2)
      .onChange((value: string) => {
        // this.textResult = value
      })
  }
  .backgroundColor('#FFFFFF')
  .borderRadius(15)
  .margin({ left: 2, right: 2 })

  TabContent() {
    TextArea({
      text: 'this.textResult 333',
      controller: this.textAreaController
    })
      .width('100%')
      .height('100%')
      .fontSize(16)
      .fontColor('#182431')
      .backgroundColor('#FFFFFF')
      .copyOption(CopyOptions.LocalDevice)
      .lineSpacing(LengthMetrics.px(20))
      .letterSpacing(2)
      .onChange((value: string) => {
        // this.textResult = value
      })
  }
  .backgroundColor('#FFFFFF')
  .borderRadius(15)
  .margin({ left: 2, right: 2 })
}
.vertical(false)
.barHeight(0)
.onChange((index: number) => {
  this.currentIndex = index
  if (index == 0) {
    this.previousSource = $r('app.media.ic_arrow_previous_off')
    this.nextSource = $r('app.media.ic_arrow_next_on')
  } else if (index == this.totalPageNums - 1) {
    this.previousSource = $r('app.media.ic_arrow_previous_on')
    this.nextSource = $r('app.media.ic_arrow_next_off')
  } else {
    this.previousSource = $r('app.media.ic_arrow_previous_on')
    this.nextSource = $r('app.media.ic_arrow_next_on')
  }
})
.scrollable(true)
.width('85%')
.height('85%')
.animationDuration(400)

Solution: Nest a Scroll within bindSheet. In this case, the semi-modal height remains unchanged, and only the content scrolls downward.

2. How to implement an animation effect where a menu pops up from a corner and expands from small to large when long-pressing an app icon in HarmonyOS?

Refer to modal transitions: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-modal-transition-V5#%E4%BD%BF%E7%94%A8bindcontentcover%E6%9E%84%E5%BB%BA%E5%85%A8%E5%B1%8F%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA%E6%95%88%E6%9E%9C

Use bindContentCover to build full-screen modal transition effects.

Define the full-screen modal transition effect with bindContentCover.
Define the modal display interface:

// Build the modal display interface via @Builder
@Builder MyBuilder() {
  Column() {
    Text('my model view')
  }
  // Implement appearance and disappearance transition effects via transition animation (transition should be added to the first component under builder)
  .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
}

Invoke the modal display interface via the modal API and implement corresponding animation effects via transition or shared element animations:

// Modal transition control variable
@State isPresent: boolean = false;

Button('Click to present model view')
  // Bind the modal display interface via the selected modal API. ModalTransition is the built-in ContentCover transition animation type; None here means the system adds no default animation, and the state variable change is controlled via onDisappear
  .bindContentCover(this.isPresent, this.MyBuilder(), {
            modalTransition: ModalTransition.NONE,
            onDisappear: () => {
              if (this.isPresent) {
                this.isPresent = !this.isPresent;
              }
            }
          })
  .onClick(() => {
    // Change the state variable to display the modal interface
    this.isPresent = !this.isPresent;
  })

3. How to set a rounded gradient border in HarmonyOS?

How to set a rounded gradient border?
Why does BorderImage shift downward, and how to adjust it? Using two layers of gradient backgrounds can achieve the effect, but transparency fails.

A rounded gradient border can be implemented using the linear gradient linearGradient. Refer to the demo below:

@Entry
@Component
struct BorderDemo {
  build() {
    Column() {
        Row(){
          Text('This is gradient color.')
            .textAlign(TextAlign.Center)
            .width('96%')
            .height('80%')
            .borderRadius(30)
            .linearGradient({
              direction: GradientDirection.Left, // Gradient direction
              repeating: true, // Whether gradient colors repeat
              colors: [[0xDCDCDC, 0.0],  [0xFFFFFF, 1.0]] // When the proportion of the last element in the array is less than 1, it satisfies the repeated coloring effect
            })
        }
        .width('90%')
        .height(60)
        .borderRadius(30)
        .linearGradient({
          angle: 90,
          colors: [[0x87CEEB, 0.0], [0x2E8B57, 1.0]]
        })
        .opacity(0.6)
        .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}

4. Consultation on the impact of HarmonyOS ArkUI-X cross-platform on host APP package size and memory usage?

What is the impact of using ArkUI-X cross-platform technology on the host APP package size (how much static size does it increase), and how much additional memory does the ArkTs runtime occupy? Are there any official data?

When including only the basic project and packaging only the armv8a architecture so library:
- APK size: Approximately 12-13MB.
- Memory: Approximately 200MB.
When introducing some device capability, network, etc., so libraries in actual projects:
- APK size increases by approximately 30-40MB.
- Memory increases by approximately 80MB+.

5. When modifying the value of a HarmonyOS Progress component, how to cancel the animation?

When modifying the value of a Progress component, there is a default animation. How to cancel it?

Progress({ value: this.progress, type: ProgressType.Linear })

Turn off the smooth progress animation by setting enableSmoothEffect to false. For example:

Progress({ value: this.progressValue, total: 100, type: ProgressType.Linear })
  .width(200)
  .height(50)
  .style({ enableSmoothEffect: false })

Documentation reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-progress-V5

DEV Community