Bottom Pop-up, Dialog Not Popping Up, Multi-module Navigation, Input Box Not Displaying Content, Grid Editing Order

[Daily HarmonyOS Next Knowledge] Bottom Pop-up, Dialog Not Popping Up, Multi-module Navigation, Input Box Not Displaying Content, Grid Editing Order

1. How to Achieve Bottom Pop-up Effect in HarmonyOS?

• Occupy the full screen width (the default @CustomDialog does not occupy 100% width and has gaps).
• Align with the bottom of the screen (the default custom pop-up also does not reach the bottom and has gaps from the bottom).

Currently, CustomDialog does not support modifying left-right and bottom margins. You can implement it through a semi-modal transition. Refer to the following code:

@Entry
@Component
struct BindSheetDemo {
  // Control the display/hide of the semi-modal transition
  @State isShowSheet: boolean = false;
  private menuList: string[] = ['不要辣', '少放辣', '多放辣', '不要香菜', '不要香葱', '不要一次性餐具', '需要一次性餐具'];

  // Build the semi-modal display interface with @Builder
  @Builder
  mySheet() {
    Column() {
      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
        ForEach(this.menuList, (item: string) => {
          Text(item)
            .fontSize(16)
            .fontColor(0x333333)
            .backgroundColor(0xf1f1f1)
            .borderRadius(8)
            .margin(10)
            .padding(10)
        })
      }
      .padding({ top: 18 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }

  build() {
    Column() {
      Text('口味与餐具')
        .fontSize(28)
        .padding({ top: 30, bottom: 30 })
      Column() {
        Row() {
          Row()
            .width(10)
            .height(10)
            .backgroundColor('#a8a8a8')
            .margin({ right: 12 })
            .borderRadius(20)

          Column() {
            Text('选择点餐口味和餐具')
              .fontSize(16)
              .fontWeight(FontWeight.Medium)
          }
          .alignItems(HorizontalAlign.Start)

          Blank()

          Row()
            .width(12)
            .height(12)
            .margin({ right: 15 })
            .border({
              width: { top: 2, right: 2 },
              color: 0xcccccc
            })
            .rotate({ angle: 45 })
        }
        .borderRadius(15)
        .shadow({ radius: 100, color: '#ededed' })
        .width('90%')
        .alignItems(VerticalAlign.Center)
        .padding({ left: 15, top: 15, bottom: 15 })
        .backgroundColor(Color.White)

        .bindSheet(this.isShowSheet, this.mySheet(), {
          height: 300,
          dragBar: false,
          onDisappear: () => {
            this.isShowSheet = !this.isShowSheet;
          }
        })
        .onClick(() => {
          this.isShowSheet = !this.isShowSheet;
        })
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xf1f1f1)
  }
}

2. Why Can't a Dialog Created in a HarmonyOS Class Be Displayed?

When creating a dialog in a class, it fails to display. Adding a dialog in a class does not work.

Currently, customDialog does not support being popped up in an encapsulated class. Refer to this link for an alternative solution: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-promptAction.md#promptactionopencustomdialog11

3. How to Navigate Between Multiple Modules in HarmonyOS?

The home page is mainPage with three Tabs referencing modules A, B, and C. The C page checks the login status. If not logged in, there is a login entry. Clicking login should navigate from mainPage to the login page. How to implement this?

For routing navigation between har modules, use named routing.

Refer to the example in the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-routing-V5#%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1

To navigate to pages in a shared package (HAR or HSP) during development, use router.pushNamedRoute.

4. Why Doesn't the Input Box Display Content in HarmonyOS?

In PageA, there is a component B using TextInput. The content does not display on the first entry and only shows after input.

Refer to the following example code for referencing a TextInput custom component:

@Component
struct TextInputComponent {
  @Link text: string
  controller: TextInputController = new TextInputController()

  build() {
    Column({ space: 20 }) {
      TextInput({
        text: this.text,
        placeholder: '请输入手机号',
        controller: this.controller
      })
        .placeholderColor(Color.Gray)
        .placeholderFont({ size: 14, weight: 400 })
        .width(300)
        .type(InputType.Number)
        .borderWidth(0)
        .backgroundColor(Color.Transparent)
        .fontSize(16)
        .maxLength(11)
        .maxLines(1)
        .padding(5)
        .inputFilter("[0-9]")
        .onChange((value) => {
          this.text = value
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Entry
@Component
struct ParentComponent {
  @State param: string = '13670187134'
  build() {
    Column() {
      TextInputComponent({ text: this.param });
      Divider().height(10)
      Text('输入框的内容:' + this.param)
    }
  }
}

5. When Using the Grid Component in HarmonyOS to Develop Editable Order Functions, How to Set Animation Effects for Other Components When Dragging Items?

When using the Grid component to develop editable order functions, how to set animation effects for other components during item dragging?

For Grid dragging, adding a fade effect is sufficient:

1. Set editMode(true) on the Grid component to enable edit mode, allowing dragging of GridItems.
2. Set the displayed image during dragging in the onItemDragStart callback.
3. Obtain the drag start position and insertion position in onItemDrop, and complete the array position swap logic in the onDrag callback.

@Entry
@Component
struct GridExample {
  @State numbers: String[] = [];
  scroller: Scroller = new Scroller();
  @State text: string = 'drag';

  @Builder pixelMapBuilder() { // Drag process style
    Column() {
      Text(this.text)
        .fontSize(16)
        .backgroundColor(0xF9CF93)
        .width(80)
        .height(80)
        .textAlign(TextAlign.Center)
    }
  }

  aboutToAppear() {
    for (let i = 1; i <= 15; i++) {
      this.numbers.push(i + '');
    }
  }

  changeIndex(index1: number, index2: number) { // Swap array positions
    [this.numbers[index1], this.numbers[index2]] = [this.numbers[index2], this.numbers[index1]];
  }

  build() {
    Column({ space: 5 }) {
      Grid(this.scroller) {
        ForEach(this.numbers, (day: string) => {
          GridItem() {
            Text(day)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width(80)
              .height(80)
              .textAlign(TextAlign.Center)
              .onTouch((event: TouchEvent) => {
                if (event.type === TouchType.Up) {
                  this.text = day;
                }
              })
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first: number) => {
        console.info(first.toString());
      })
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
      .editMode(true) // Set whether the Grid enters edit mode, allowing dragging of internal GridItems
      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { // Triggered when dragging this component for the first time
        return this.pixelMapBuilder(); // Set the image displayed during dragging
      })
      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { // Triggered when stopping dragging within this component
        console.info('tag' + itemIndex + '', insertIndex + '') // itemIndex: drag start position, insertIndex: drag insertion position
        this.changeIndex(itemIndex, insertIndex)
      })
    }.width('100%').margin({ top: 5 })
  }
}