鸿蒙 文字右侧的小红点

鸿蒙 文字右侧的小红点

@Entry
@Component
struct TestPage {
  // 每个页面自己控制条件
  @State showDot1: boolean = true;
  @State showDot2: boolean = false;

  build() {
    Column({ space: 30 }) {

      Stack({ alignContent: Alignment.TopEnd }) {
        Text("消息")
          .fontSize(44)
          .padding(6)
        // .alignSelf(ItemAlign.Start) // 关键：文字靠左，红点才能在右上角
        Badge1({show:true})

      }
      Stack({ alignContent: Alignment.TopEnd }) {
        Text("多擦第三次撒")
          .fontSize(44)
          .padding(6)
        // .alignSelf(ItemAlign.Start) // 关键：文字靠左，红点才能在右上角
        Badge1({show:true})
      }
    }
    .width('100%')
    .padding(30)
  }
}

@Component
export struct Badge1 {
  // 控制是否显示红点
  @Prop show: boolean = false;
  build() {
    if (this.show) {// 你的条件
      Circle()
        .width(15)
        .height(15)
        .fill(Color.Red)
        .margin({ top: 0, right: -5 })
    }
  }
}