HarmonyOS Development: Information Marking Component

Foreword

this article is based on Api13

information marks are very common, such as the information prompt in the upper right corner of various applications on the desktop of the mobile phone, the message unread prompt in WeChat chat, etc., which can be said to be very common.

messages in micro letter unread:

how should we implement such a common function in actual development?

Of course, there are many ways to implement it, such as using Stack to Stack components, so that the information prompt component is at the top.

Stack() {
        Image($r("app.media.startIcon"))
          .width(50)
          .height(50)
        Text("1")
          .width(20)
          .height(20)
          .backgroundColor(Color.Red)
          .borderRadius(20)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }.alignContent(Alignment.TopEnd)

The effect is as follows:

of course, you can also use a relative layout RelativeContainer.

RelativeContainer() {
        Image($r("app.media.startIcon"))
          .width(50)
          .height(50)
          .alignRules({
            middle: { anchor: "__container__", align: HorizontalAlign.Center },
            center: { anchor: "__container__", align: VerticalAlign.Center }
          })
        Text("1")
          .width(20)
          .height(20)
          .backgroundColor(Color.Red)
          .borderRadius(20)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
          .alignRules({
            right: { anchor: "__container__", align: HorizontalAlign.End }
          })
      }.width(60)
      .height(60)

The implementation of the above methods is the most common multi-component implementation. You need to control the location of the information mark by yourself. In the development of Hongmeng, in addition to the above methods, the information Mark component is also given very intimately. Badge to achieve.

Information Tag Component Badge

the information marker component can be attached to a single component for a container component for information reminders.

The source code supports two types of parameters, one is the BadgeParamWithNumber that creates a tag component based on a number, and the other is the BadgeParamWithString that creates a tag component based on a string.

 (value: BadgeParamWithNumber): BadgeAttribute;
 (value: BadgeParamWithString): BadgeAttribute;

BadgeParamWithNumber and BadgeParamWithString areA subclass of BadgeParam, let's look at the attributes in BadgeParam first. There are two attributes, one is position, the type is BadgePosition/Position, which is mainly to set the display position of the prompt point, and the other is style, the type is BadgeStyle, which is a parameter that must be passed. Mainly, setting the style of the Badge component supports setting text color, size, dot color and size.

There are two properties in BadgeParamWithNumber, one is count, the type is number, is a required parameter, mainly used to set the number of reminder messages; There is also maxCount, the type is number, the main function is to set the maximum number of messages.

There is only one parameter in BadgeParamWithString, value, the type is string, is a required parameter, mainly set the text string of the prompt content.

BadgePosition

name	value	description
RightTop	0	the dot is displayed in the upper right corner.
Right	1	the dot display is centered vertically on the right.
Left	2	the dot display is centered vertically on the left.

BadgeStyle

---

Name	type	required	description
color	ResourceColor	no	the text color.
fontSize	number /string	no	text size.
badgeSize	number/string	no	the size of the Badge.
badgeColor	ResourceColor	no	the color of the Badge.
fontWeight	number/FontWeight/string	no	sets the font weight of the text.
borderColor	ResourceColor	no	slab stroke color.
borderWidth	Length	no	Floor stroke weight.

Implement a simple upper right corner message tag case:

@Entry
@Component
struct DemoPage {
  @State badgeCount: number = 1

  build() {
    Column() {
      Badge({
        count: this.badgeCount,
        style: {},
        position: BadgePosition.RightTop,
      }) {
        Image($r("app.media.startIcon"))
          .width(50)
          .height(50)
      }
      .width(55)

      Button("empty")
        .margin({ top: 10 })
        .onClick(() => {
          this.badgeCount = 0
        })
      Button("add")
        .margin({ top: 10 })
        .onClick(() => {
          this.badgeCount += 1
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

when count is 0, the information prompt in the upper right corner will not be displayed. Of course, you can also use value to mark the contents of the information component.

Related Summary

using Information Tag Components Badge we don't need to pay attention to the position problem, we can control it through the position attribute, and we don't need too many conditional judgments for the display and hiding of information, which can be said to be very simple.