Hiding Navigation Back Button, Canvas Component Swipe Events, Expandable Text, Component Gradients

#harmonyosnext

【Daily HarmonyOS Next Knowledge】Hiding Navigation Back Button, Canvas Component Swipe Events, Expandable Text, Component Gradients, Full-screen Custom Component Reference Issues

1. In HarmonyOS Navigation, the back button of NavDestination cannot be hidden, causing the title to not center.

Back Button Hiding Feature: The hideBackButton property of the NavDestination component defaults to false (showing the back button). To hide the back button, set this property to true.
Title Bar Display Mode: Set the titleMode property of the NavDestination component to NavigationTitleMode.Mini to hide the back button in the title bar.

2. When a Swiper-nested page contains a Canvas in HarmonyOS, how to make the Canvas respond to horizontal swipes but not vertical swipes?

When a Swiper-nested page includes a Canvas, the following method was used to add swipe event listening to the Canvas, but the event was not triggered:

.priorityGesture(GestureGroup(GestureMode.Exclusive,
  SwipeGesture()
    .onAction((event: GestureEvent) => {
      if (event && this.klineQuotaModel) {
      }
    })
))

Working demo: This triggers the onAction event, and swiping within the Canvas area does not scroll the Swiper.

@Component
struct CanvasExample1 {
  // Configures parameters for the CanvasRenderingContext2D object, including whether to enable anti-aliasing (true enables it).
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  // Creates a CanvasRenderingContext2D object for drawing within the Canvas.
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Column() {
      // Invokes the CanvasRenderingContext2D object within the Canvas.
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#F5DC62')
        .onReady(() => {
          // Draw content here.
          this.context.strokeRect(50, 50, 200, 150);
        })
        .priorityGesture(GestureGroup(GestureMode.Exclusive,
          SwipeGesture()
            .onAction((event: GestureEvent) => {
              console.log('Canvas responds, Swiper does not');
            })
        ))
        .hitTestBehavior(HitTestMode.Block)
        .width('80%')
        .height('50%');

      Text('Canvas')
        .width('80%')
        .height('50%');
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Red);
  }
}

@Entry
@Component
struct Index47 {
  private swiperController: SwiperController = new SwiperController();

  build() {
    Swiper(this.swiperController) {
      Text('0')
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .fontSize(30);

      Text('1')
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Green)
        .textAlign(TextAlign.Center)
        .fontSize(30);

      Text('2')
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .fontSize(30);

      CanvasExample1();
    }
    .loop(false);
  }
}

3. Expandable text in HarmonyOS

A scenario requires displaying multi-line text with a maximum of 4 lines. When exceeding 4 lines, an "Expand" button should appear at the end. Clicking "Expand" shows the full text with a "Collapse" button, which reverts to the 4-line limit when clicked. Are there similar components or plugins for this?

Refer to the API document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-measure-V5

This module provides text width and height calculations.

Sample code:

// Scenario: Change styles (e.g., add expand/collapse) when exceeding 4 lines. Calculate total text height.
let textSize: SizeOptions = measure.measureTextSize({ textContent: this.message, fontSize: 24, constraintWidth: 300 });
// Calculate height with limited width and max lines (4 lines).
let textSize2: SizeOptions = measure.measureTextSize({ textContent: this.message, fontSize: 24, maxLines: 4, constraintWidth: 300 });
// If textSize.height > textSize2.height, the text exceeds 4 lines; handle the business logic accordingly.

4. How to add transparency to component gradients in HarmonyOS?

Recommend setting color values as:

.linearGradient({
  // angle: 180,
  direction: GradientDirection.Right,
  colors: [["#00E6E6E6", 0.0], ["#ffE6E6E6", 1]]
})

5. When a full-screen custom component is referenced by another page in HarmonyOS, it disables button functions on the referencing page.

When a full-screen custom component is referenced by another page, button functions on the referencing page become inactive.

Solution: Dynamically change the zIndex of the full-screen custom component. Refer to the code below:

build() {
    // Use Stack to overlay a "pseudo-dialog" over the original page.
    Stack() {
      Column() {
        Button('Bottom Page Button')
          .onClick(() => {
            // showToast('Bottom button clicked')
            console.log('Bottom button clicked', this.visible);
          })
          .backgroundColor(Color.Red)
          .margin({ top: 200 });
      }
      .width('100%')
      .height('100%')
      .zIndex(10)
      .hitTestBehavior(HitTestMode.Transparent);

      Component1({ visible: $visible })
        .zIndex(this.Component1ZIndex);
    }
    .width('100%')
    .height('100%');
  }

DEV Community