# HarmonyOS_Badge

**Repository Path**: ren3016/harmonyos_badge

## Basic Information

- **Project Name**: HarmonyOS_Badge
- **Description**: 使用 数字 或 字符串 创建Badge组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-05
- **Last Updated**: 2023-12-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: harmony

## README

# HarmonyOS_Badge

#### 介绍
使用 数字 或 字符串 创建Badge组件

#### 开发平台

Win11 + DevEco Stuido

#### 开发步骤

1. 在 DevEco Studio 中 File->New_Create Project，选择 Application->Empty Ability， Next， Compile SDK：3.1.0(API 9)， Model: stage

2. 在 build 中 添加一个Badge：

```
Badge({
  count: 200,
  maxCount: 99,
  position: BadgePosition.RightTop,
  style: { badgeSize: 16, badgeColor: '#FA2A2D' },
}) {
  Text('数字标记')
}
```

3. 修改 entry\src\main\resources\base\element\string.json 文件中的 EntryAbility_label 的 value 为 Badge。 同时修改和 base 同级的 zh_CN、en_US 下的 string.json 文件中的 EntryAbility_label 的 value 为 Badge（APP名称）

4. 使用 USB 链接手机 并打开手机 USB 调试

5. 在 File 中选择 Project Structure -> Signing Configs 选择 Support HarmonyOS 和 Automatically generate signature （需要打开浏览器登录华为帐号并授权）

6. 链接手机成功后， 点击右上角工具栏的真机调试。

7. 手机上自动添加了名为 Badge 的应用

#### 主页代码

```
@Entry
@Component
struct Index {

  build() {
    Column() {
      Column({ space: 8 }) {
        Text('字符串 和 数字 标记组件').fontSize(18).textAlign(TextAlign.Center).height(70).fontWeight(FontWeight.Bold)
      }.margin({ bottom: 30 }).height(70).width('100%').backgroundColor('#eeeeee')

      Row() {
        Column({ space: 10 }) {
          // 字符串标记组件
          Badge({
            value: 'tips',
            position: BadgePosition.RightTop,
            style: { badgeSize: 16, badgeColor: '#FA2A2D' },
          }) {
            Image($r('app.media.icon'))
              .alt('error.jpg')
              .width(60)
              .height(60)
              .objectFit(ImageFit.Cover)
          }.width(60).height(60)

          Text('字符串标记组件').fontSize(14).fontColor('#999999')
        }.layoutWeight(1)

        Column({ space: 10 }) {
          // 数字标记组件
          Row() {
            Badge({
              count: 200,
              maxCount: 99,
              position: BadgePosition.RightTop,
              style: { badgeSize: 16, badgeColor: '#FA2A2D' },
            }) {
              Text('数字标记')
            }.width(80).height(60).margin({ top: 60 })
          }.height(60)

          Text('数字标记组件').fontSize(14).height(40).fontColor('#999999')
        }.layoutWeight(1)
      }.width('80%')
      
    }.width('100%').height('100%')
  }
}
```
#### string.json 配置文件修改
1. entry\src\main\resources\base\element\string.json  （默认配置文件）
2. entry\src\main\resources\zh_CN\element\string.json  （中文配置文件）
3. entry\src\main\resources\en_US\element\string.json  （英文配置文件）
```
{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "数字标记组件 及 字符串标记组件"
    },
    {
      "name": "EntryAbility_label",
      "value": "Badge"
    }
  ]
}
```

#### 相关权限

不涉及

#### 克隆安装

git clone https://gitee.com/ren3016/harmonyos_badge.git

#### 使用说明

打开应用，就可以看到 Badge 效果。

#### 约束与限制
1. 本示例仅支持标准系统上运行，支持设备：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
2. 本示例为Stage模型，支持API Version 9。
3. 本示例需要使用DevEco Studio 3.1 Release版本进行编译运行。

#### 页面效果
![输入图片说明](entry/src/main/resources/rawfile/Sample_image.jpg)