Screen Parameters, Semi-Modal Related, Three-Level Linkage, Partial Card Display, Custom Drawing

[Daily HarmonyOS Next Knowledge] Screen Parameters, Semi-Modal Related, Three-Level Linkage, Partial Card Display, Custom Drawing

1. How to obtain screen xdpi and ydpi data in HarmonyOS?

You can use display.getDefaultDisplaySync. Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-display-V5

@ohos.display (Screen Properties): Screen properties provide basic capabilities for managing display devices, including obtaining information about the default display device, obtaining information about all display devices, and monitoring the plugging and unplugging behavior of display devices.

Import module: import { display } from '@kit.ArkUI';

2. How to use semi-modal in HarmonyOS?

1. The transition mode for the login page should be semi-modal, but based on research, it can only be bound via the bindSheet attribute, which requires declaring a builder (a custom build function for a custom component). Treating the login page as a custom build function for another component is unreasonable. Are there other ways to achieve semi-modal?
2. When clicking certain items in a List, a pop-up window is expected to appear in a semi-modal effect. Using bindSheet to implement this may result in two pop-up windows.

Issue 1 Reference demo: https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/multimodaltransion

Issue 2 Using ForEach to bind a semi-modal page to each ListItem, with all semi-modal page display controls using the same field isShow1. This causes multiple semi-modal pages to display when isShow1 changes.

interface arrData {
  itemData: ItemInData[];
}

class ItemInData {
  name: string = "";

  constructor(name: string) {
    this.name = name;
  }
}

@Entry
@Component
struct SheetTransitionExample {
  showItem: ItemInData = new ItemInData("")
  arrData: arrData[] = [
    {
      itemData: [new ItemInData('1组1')]
    },
    {
      itemData: [new ItemInData('2组1'), new ItemInData('2组2'), new ItemInData('2组3')]
    }
  ]
  @State isShow: boolean = false;

  @Builder
  myBuilder(name: string) {
    Column() {
      Button(name)
        .margin(10)
        .fontSize(20)

    }
    .width('100%')

  }

  build() {
    Column() {
      /**
       * TODO: Knowledge point: Bind a semi-modal page to a component via the bindSheet attribute. Since the semi-modal must be bound to a component,
       * a styleless Text component is bound here to display the splash semi-modal.
       */
      Text().bindSheet($$this.isShow, this.myBuilder(this.showItem.name), {
        showClose: false,
        preferType: SheetType.CENTER,
        onWillAppear: () => {
          console.log("BindSheet onWillAppear." + this.showItem.name)
        },
        onWillDisappear: () => {
          console.log("BindSheet onWillDisappear."+ this.showItem.name)
        }
      })

      List({ space: 20 }) {
        ForEach(this.arrData, (item: arrData, groupId: number) => {
          ListItemGroup() {
            ForEach(item.itemData, (project: ItemInData, rowIdOfGroup: number) => {
              ListItem() {
                Button(project.name).backgroundColor(Color.Black)
                  .width("100%")
                  .padding(10)
              }
              .onClick(() => {
                this.isShow = true;
                this.showItem = project;
              })
            }, (item: string) => item)
          }
          .divider({ strokeWidth: 0.5, color: '#CFD6D6' }) // Divider between each row
        })
      }.backgroundColor(Color.Green)
    }
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height('100%')
  }
}

3. How to create a province-city-district selector with three-level linkage in HarmonyOS?

This can be implemented using TextPicker. Reference document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textpicker-V5

Sample code:

@Entry
@Component
struct TextPickerExample {
  private cascade: TextCascadePickerRangeContent[] = [
    {
      text: '辽宁省',
      children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
        { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
    },
    {
      text: '吉林省',
      children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
        { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
    },
    {
      text: '黑龙江省',
      children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
        { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
    }
  ]

  build() {
    Column() {
      TextPicker({ range: this.cascade })
        .onChange((value: string | string[], index: number | number[]) => {
          console.info('TextPicker multi-column linkage: onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index))
        })
    }
  }
}

TextPicker(options?: TextPickerOptions)

Creates a text picker based on the selection range specified by range.

Parameter name	Type	Required	Description
options	TextPickerOptions	No	Parameters for configuring the text picker.

Name	Type	Required	Description
range	`string[] \	string[] []10+ \	Resource \
selected	{% raw %}`number \	number[]10+`	No
value	`string \	string[]10+`	No

4. When the HarmonyOS List component exceeds its size, the last CardView only partially displays?

Adding a fixed-size View in a Column, with the List filling the remaining space. When the List content exceeds one screen, the last CardView cannot be fully displayed.

Replace the Column component with a Flex elastic layout, and other settings (e.g., NavigationBar.height(90vp)) remain fixed.

5. Dynamically setting lineto in HarmonyOS Canvas?

@Entry
@Component
struct CanvasDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State @Watch('draw')content: string = ""

  draw() {
    this.context.clearRect(0, 0, 200, 200) // Clear canvas content
    this.context.fillText(this.content, 50, 50) // Repaint
  }

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('25%')
        .backgroundColor('#F5DC62')
        .onReady(() => {
          // Draw content here.
          this.context.font = '55px sans-serif'
          this.context.fillText(this.content, 50, 50)
        })
      TextInput({
        text:$$this.content
      })
    }
    .borderColor('#31525B')
    .borderWidth(12)
    .width('100%')
    .height('100%')
  }
}