鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Badge）

可以附加在单个组件上用于信息标记的容器组件。

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

支持单个子组件。

说明：

子组件类型：系统组件和自定义组件，支持渲染控制类型（if/else、ForEach和LazyForEach）。

接口

Badge

Badge(value: BadgeParamWithNumber)

创建数字标记组件。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名参数类型必填参数描述
valueBadgeParamWithNumber是数字标记组件参数。

BadgeParamWithNumber对象说明

参数名参数类型必填参数描述
countnumber是设置提醒消息数。
说明：
小于等于0时不显示信息标记。
取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。
positionBadgePosition|Position10+否设置提示点显示位置。
默认值：BadgePosition.RightTop
说明：
Position作为入参，不支持设置百分比；设置为非法值时，默认（0,0）处理。
maxCountnumber否最大消息数，超过最大消息时仅显示maxCount+。
默认值：99
取值范围：[-2147483648,2147483647]，超出范围时会加上或减去4294967296，使得值仍在范围内，非整数时会舍去小数部分取整数部分，如5.5取5。
styleBadgeStyle是Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

Badge

Badge(value: BadgeParamWithString)

根据字符串创建标记组件。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名参数类型必填参数描述
valueBadgeParamWithString是字符串标记组件参数。

BadgeParamWithString对象说明

参数名参数类型必填默认值参数描述
valuestring是-提示内容的文本字符串。
positionBadgePosition|Position10+否BadgePosition.RightTop设置提示点显示位置。
styleBadgeStyle是-Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

BadgePosition枚举说明

从API version 9开始，该接口支持在ArkTS卡片中使用。

名称枚举值描述
RightTop0圆点显示在右上角。
Right1圆点显示在右侧纵向居中。
Left2圆点显示在左侧纵向居中。

BadgeStyle对象说明

从API version 9开始，该接口支持在ArkTS卡片中使用。

名称类型必填描述
colorResourceColor否文本颜色。
默认值：Color.White
fontSizenumber | string否文本大小。
默认值：10
单位：vp
说明：
不支持设置百分比。
badgeSizenumber | string否Badge的大小。
默认值：16
单位：vp
说明：
不支持设置百分比。当设置为非法值时，按照默认值处理。
badgeColorResourceColor否Badge的颜色。
默认值：Color.Red
fontWeight10+number |FontWeight | string否设置文本的字体粗细。
默认值：FontWeight.Normal
说明：
不支持设置百分比。
borderColor10+ResourceColor否底板描边颜色。
borderWidth10+Length否底板描边粗细。
默认值：1
单位：vp
说明：
不支持设置百分比。

属性

支持通用属性。

事件

支持通用事件。

示例

// xxx.ets
@Entry
@Component
struct BadgeExample {
  @Builder tabBuilder(index: number) {
    Column() {
      if (index === 2) {
        Badge({
          value: '',
          style: { badgeSize: 6, badgeColor: '#FA2A2D' }
        }) {
          Image('/common/public_icon_off.svg')
            .width(24)
            .height(24)
        }
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
      } else {
        Image('/common/public_icon_off.svg')
          .width(24)
          .height(24)
          .margin({ bottom: 4 })
      }
      Text('Tab')
        .fontColor('#182431')
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  @Builder itemBuilder(value: string) {
    Row() {
      Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
      Text(value)
        .width(177)
        .height(21)
        .margin({ left: 15, right: 76 })
        .textAlign(TextAlign.Start)
        .fontColor('#182431')
        .fontWeight(500)
        .fontSize(16)
        .opacity(0.9)
      Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
    }.width('100%').padding({ left: 12, right: 12 }).height(56)
  }

  build() {
    Column() {
      Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
      Tabs() {
        TabContent()
          .tabBar(this.tabBuilder(0))
        TabContent()
          .tabBar(this.tabBuilder(1))
        TabContent()
          .tabBar(this.tabBuilder(2))
        TabContent()
          .tabBar(this.tabBuilder(3))
      }
      .width(360)
      .height(56)
      .backgroundColor('#F1F3F5')

      Column() {
        Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
        List({ space: 12 }) {
          ListItem() {
            Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 })
          }
          .width('100%')
          .height(56)
          .backgroundColor('#FFFFFF')
          .borderRadius(24)
          .align(Alignment.Start)

          ListItem() {
            Badge({
              value: 'New',
              position: BadgePosition.Right,
              style: { badgeSize: 16, badgeColor: '#FA2A2D' }
            }) {
              Text('list2').width(27).height(19).fontSize(14).fontColor('#182431')
            }.width(49.5).height(19)
            .margin({ left: 12 })
          }
          .width('100%')
          .height(56)
          .backgroundColor('#FFFFFF')
          .borderRadius(24)
          .align(Alignment.Start)
        }.width(336)

        Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24)
        List() {
          ListItem() {
            this.itemBuilder('list1')
          }

          ListItem() {
            Row() {
              Image('common/public_icon.svg').width(32).height(32).opacity(0.6)
              Badge({
                count: 1,
                position: BadgePosition.Right,
                style: { badgeSize: 16, badgeColor: '#FA2A2D' }
              }) {
                Text('list2')
                  .width(177)
                  .height(21)
                  .textAlign(TextAlign.Start)
                  .fontColor('#182431')
                  .fontWeight(500)
                  .fontSize(16)
                  .opacity(0.9)
              }.width(240).height(21).margin({ left: 15, right: 11 })

              Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6)
            }.width('100%').padding({ left: 12, right: 12 }).height(56)
          }

          ListItem() {
            this.itemBuilder('list3')
          }

          ListItem() {
            this.itemBuilder('list4')
          }
        }
        .width(336)
        .height(232)
        .backgroundColor('#FFFFFF')
        .borderRadius(24)
        .padding({ top: 4, bottom: 4 })
        .divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 })
      }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 })
    }.width('100%')
  }
}

badge

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/461336.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【JS】parseInt与Math.floor的区别

【JS】parseInt与Math.floor的区别

获取两数区间随机整数的函数如下 function getRandom(min,max){return Math.floor(Math.random() * (max - min) min) }这个函数中，只可以使用Math.random，parseInt会出问题，二者虽然都是取整，但又有一些区别。 parseInt是「向…
阅读更多...
单片机FLASH深度解析和编程实践（上）

单片机FLASH深度解析和编程实践（上）

本篇文章主要针对单片机FLASH编程和FLASH基本原理进行学习分享。以STM32单片机作为实例进行编程实训。 关于FLASH操作的相关寄存器及编程，大家可以参考下一篇文章: 单片机FLASH深度解析和编程实践（下）-CSDN博客 目录 一、STM32编程方式 二、…
阅读更多...
挑战杯 机器视觉人体跌倒检测系统 - opencv python

挑战杯 机器视觉人体跌倒检测系统 - opencv python

0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 机器视觉人体跌倒检测系统 该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！ 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数&…
阅读更多...
Wmware安装Linux（centerOS、Ubuntu版本）

Wmware安装Linux（centerOS、Ubuntu版本）

目录 1、安装wmware 2、center版本 3、ubuntu版本 1、安装wmware 此处不做展开。 2、center版本 需要提前下载的文件： 无图形化界面https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/CentOS-7-x86_64-Minimal-2009.iso 有图形化界面https://mirrors.a…
阅读更多...
实现更高能效的汽车级低边驱动器NRVB140ESFT1G 带温度和电流限制 自保护低压侧驱动器

实现更高能效的汽车级低边驱动器NRVB140ESFT1G 带温度和电流限制 自保护低压侧驱动器

一起去了解关于汽车电子AEC Q101车规认证！！! 是一种针对分立半导体的可靠性测试认证程序，由汽车电子协会发布。这个认证程序主要是为了确保汽车电子产品在各种严苛的条件下能够正常工作和可靠运行。它包括了对分立半导体的可靠性、环境适应性…
阅读更多...
树和二叉树的介绍

树和二叉树的介绍

树 树是一种数据结构，它是由n(n≥0)个有限节点组成一个具有层次关系的集合。把它叫做“树”是因为它看起来像一棵倒挂的树，也就是说它是根朝上，而叶朝下的。 它具有以下的特点： 每个节点有零个或多个子节点；没有父节点…
阅读更多...
nmcli --help（nmcli -h）nmcli文档、nmcli手册

nmcli --help（nmcli -h）nmcli文档、nmcli手册

文章目录 nmcli --helpOPTION解释OBJECT解释1. g[eneral]：查看NetworkManager的状态2. n[etworking]：启用或禁用网络3. r[adio]：查看无线电状态（例如，Wi-Fi）4. c[onnection]：列出所有的网络连接…
阅读更多...
AIGC: 3. AI时代程序员的生存模式思考

AIGC: 3. AI时代程序员的生存模式思考

AI跟程序员关系思考 在 3 月 9 日央视的《对话》的开年说节目上，百度创始人、董事长兼 CEO 李彦宏先生表示： 1.基本上以后不会存在“程序员”这种职业了，因为只要会说话，人人都会具备程序员的能力。 2.“未来的编程语言只会剩下…
阅读更多...
Android开发失业50天，面了10家公司，唯二的offer也主动拒了

Android开发失业50天，面了10家公司，唯二的offer也主动拒了

于我看来并没有，最多说“Android 技术的探索”进入了下半场，而整个市场还是乐观的。 以前是 BAT 的天下，而近两年出来越来越多的独角兽：头条、抖音、拼多多、快手、小猿搜题等，这些公司的业务都在移动端上&#xff0c…
阅读更多...
VMware安装Ubuntu 18.04.2

VMware安装Ubuntu 18.04.2

下载Ubuntu映像 下载地址：http://old-releases.ubuntu.com/releases/18.04/ 下载名称： ubuntu-18.04.2-desktop-amd64.iso 清华镜像站：https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 阿里云镜像站：https://mirrors.ali…
阅读更多...
【MySQL】3. 库的操作

【MySQL】3. 库的操作

库的操作 1. 创建数据库 语法： CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [,create_specification] ...]create_specification:[DEFAULT] CHARACTER SET charset_name[DEFAULT] COLLATE collation_name说明： 大写的表示关键字 …
阅读更多...
挑战杯 机器视觉的试卷批改系统 - opencv python 视觉识别

挑战杯 机器视觉的试卷批改系统 - opencv python 视觉识别

文章目录 0 简介1 项目背景2 项目目的3 系统设计3.1 目标对象3.2 系统架构3.3 软件设计方案 4 图像预处理4.1 灰度二值化4.2 形态学处理4.3 算式提取4.4 倾斜校正4.5 字符分割 5 字符识别5.1 支持向量机原理5.2 基于SVM的字符识别5.3 SVM算法实现 6 算法测试7 系统实现8 最后 0…
阅读更多...
前端基础——HTML傻瓜式入门（1）

前端基础——HTML傻瓜式入门（1）

该文章Github地址：https://github.com/AntonyCheng/html-notes 在此介绍一下作者开源的SpringBoot项目初始化模板（Github仓库地址：https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址：https://blog.c…
阅读更多...
day05-SpringBootWeb请求响应

day05-SpringBootWeb请求响应

请求响应： 请求（HttpServletRequest）：获取请求数据响应（HttpServletResponse）：设置响应数据 BS架构：Browser/Server，浏览器/服务器架构模式。客户端只需要浏览器&#xf…
阅读更多...
【C语言】字符(串)函数详解~

【C语言】字符(串)函数详解~

一、前言 这一期的博客，将会着重讲解常见的字符或字符串的相关库函数。C语言中有一组库函数专门用来处理字符类型的数据的，后文则会介绍字符分类函数以及字符转换函数。字符串相关的函数是本篇博客的重点，这也是为什么标题是字符串函数详解。…
阅读更多...
【C++进阶】深度解析AVL树及其简单模拟实现

【C++进阶】深度解析AVL树及其简单模拟实现

AVL树的解析和模拟实现 一，什么是AVL树二，AVL树的特性三，模拟实现1. 基本框架2. 插入（不带旋转）2. AVL树的旋转3. AVL树的验证 四，总结 一，什么是AVL树 之前我们学习了二叉搜索树，但…
阅读更多...
C++实验 面向对象编程

C++实验 面向对象编程

一、实验目的： 掌握类中静态成员的定义方法，初始化方法，使用方法； 掌握类的友元说明方法，理解友元的使用特点 二、实验内容： 1、编写程序，统计某旅馆住宿客人的总数，要求输入客人…
阅读更多...
计算机二级（Python）真题讲解每日一题：《绘制雪花》

计算机二级（Python）真题讲解每日一题：《绘制雪花》

在横线处填写代码，完成如下功能‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬…
阅读更多...
Vue.js 应用实现监控可观测性最佳实践

Vue.js 应用实现监控可观测性最佳实践

前言 Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。 TinyPro 是一套使用 Vue …
阅读更多...
SQL Server错误：15404

SQL Server错误：15404

执行维护计划失败，提示SQL Server Error 15404 无法获取有关... 异常如下图： 原因：数据库用户名与计算机名称不一致 解决办法：1.重名称数据库用户名 将前缀改成计算机名 2.重启SQL Server代理
阅读更多...
最新文章

Copyright @ 2022~2023