Remove Popup Background Color, Navigation Usage Scenarios, Dialog-Page Relationship

[Daily HarmonyOS Next Knowledge] Remove Popup Background Color, Navigation Usage Scenarios, Dialog-Page Relationship, Custom Struct Shrinking Issue, Code-Hidden Menu

1. How to remove the background color of a HarmonyOS Popup?

Main configuration: shadow:{radius:0}

@Entry
@Component
struct Index {
  @State customPopup: boolean = false
  // Popup builder defines the content
  @Builder
  popupBuilder() {
    Row({ space: 2 }) {
      Text('This is Custom Popup').fontSize(15)
    }.width(200).height(50).padding(5)
  }

  build() {
    Column() {
      Button('CustomPopupOptions')
        .position({ x: 100, y: 200 })
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder, // Popup content
          placement: Placement.Bottom, // Popup position
          popupColor: Color.Transparent, // Background color
          backgroundBlurStyle: BlurStyle.NONE,
          shadow: { radius: 0 },
          // shadow:ShadowStyle.OUTER_DEFAULT_XS,
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
    }
    .backgroundColor(Color.Pink)
    .height('100%')
    .width("100%")
  }
}

2. When should Navigator, Navigation, and Router be used in HarmonyOS?

There are three routing APIs: Navigator, Navigation, and Router. What are their differences and application scenarios?

• Navigator: A routing container component for page navigation, used as part of the page layout.
• Navigation: The root view container for routing, recommended as the root container for Page components. It offers:
  • Built-in联动 of title, content, and back button (no need for custom implementation).
  • Unlimited routing stack size (Router is limited to 32).
  • Access to the routing stack (NavPathStack) for direct manipulation.
  • Full customization of components, animations, and properties (e.g., background, blur).
• Router: Basic routing API with limitations (e.g., fixed page structure, stack size).

Documentation:

• Navigator
• Navigation
• Router

3. What is the relationship between CustomDialog and Page in HarmonyOS?

If a CustomDialog is declared in a Page, can it still be displayed after the Page exits? What is its lifecycle?

Check if the showInSubWindow property is set to true in the dialog. If enabled, the dialog will persist in a separate window even after the Page exits.

Reference:

CustomDialog Documentation

4. Custom struct shrinking issue in HarmonyOS?

Reference code:

Column() {
  Text('Custom struct shrinking issue')
  Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
    SubView({
      title: 'Left',
      desc: this.leftContent,
      color: Color.Green
    })

    SubView({
      title: 'Right',
      desc: this.rightContent,
      color: Color.Red
    })
  }
  .width(200).height(40)
  .borderWidth(1)
}

// Custom struct:
@Component
export struct SubView {
  @State title: string = ''
  @State desc: string = ''
  @State color: Color = Color.White

  build() {
    Row() {
      // Omitted code
    }
    .height('100%')
    .flexShrink(1)
    .backgroundColor(this.color)
    .onClick(() => {
      if (this.desc.length >= 10) {
        this.desc = this.desc.slice(0, 2)
      } else {
        this.desc = `${this.desc} becomes longer`
      }
    })
  }
}

5. How to hide a HarmonyOS menu programmatically?

Hide the entire menu when an item is clicked.

Use bindContextMenu to attach a menu to a component and control visibility via isShown:

class classComponent {
  content: string = '';
  labelInfo: string = '';
}

@Entry
@Component
struct TestMenuPage {
  @State list1: Array<classComponent> = [{ content: 'Copy', labelInfo: "Ctrl+C" }, {
    content: "Paste",
    labelInfo: "Ctrl+V"
  }];
  @State menuIsShow: boolean = false;
  @State menuBackGroundColor: Color = Color.White;
  @State menuIsDelete: boolean = false;

  @Builder
  MyMenu() {
    Menu() {
      ForEach(this.list1, (item: classComponent) => {
        MenuItem({ content: `${item.content}`, labelInfo: `${item.labelInfo}` })
      })
    }.visibility(this.menuIsDelete ? Visibility.None : Visibility.Visible)
  }

  build() {
    Column() {
      Column() {
        Button('Click').onClick(() => {
          this.menuIsShow = !this.menuIsShow;
        })
        Button('Delete Menu').onClick(() => {
          this.list1 = []
          this.menuIsDelete = true
        })
      }
      .width('100%')
      .padding(20)
      .bindMenu(this.MyMenu)
      .bindContextMenu(this.menuIsShow, this.MyMenu(), {
        backgroundColor: this.menuIsDelete ? Color.Transparent : Color.White,
        backgroundColor: Color.White,
        backgroundBlurStyle: BlurStyle.NONE
      })
      .alignItems(HorizontalAlign.Start)
    }.height('100%')
  }
}

Documentation:

bindContextMenu