【鸿蒙软件开发】ArkTS容器组件之Badge
文章目录
- 前言
- 一、Badge组件
- 1.1 子组件
- 1.2 接口
- 接口1
- 参数
- 接口2
- 参数
- BadgePosition枚举说明
- BadgeStyle对象说明
- 1.3 示例代码
- 总结
前言
Badge组件:可以附加在单个组件上用于信息标记的容器组件。
一、Badge组件
可以附加在单个组件上用于信息标记的容器组件。
说明
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
1.1 子组件
支持单个子组件。
说明
子组件类型:系统组件和自定义组件,支持渲染控制类型(if/else、ForEach和LazyForEach)。
1.2 接口
接口1
接口
方法1: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})
创建数字标记组件。
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数
count
参数类型:
number
必填:
是
默认值:
参数描述:
设置提醒消息数。
说明:
小于等于0时不显示信息标记。
取值范围:[-2147483648,2147483647],非整数时会舍去小数部分取整数部分,如5.5取5。
参数名:
position
参数类型:
BadgePosition
必填:
否
默认值:
BadgePosition.RightTop
参数描述:
设置提示点显示位置。
参数名:
maxCount
参数类型:
number
必填:
否
默认值:
99
参数描述:
最大消息数,超过最大消息时仅显示maxCount+。
参数名:
style
参数类型:
BadgeStyle
必填:
是
默认值:
参数描述:
Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。
接口2
方法2: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
根据字符串创建标记组件。
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数
参数名: value
参数类型: string
必填: 是
默认值: -
参数描述: 提示内容的文本字符串。
参数名: position
参数类型: BadgePosition
必填: 否
默认值: BadgePosition.RightTop
参数描述: 设置提示点显示位置。
参数名: style
参数类型: BadgeStyle
必填: 是
默认值: -
参数描述: Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸。
BadgePosition枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
名称: RightTop
描述: 圆点显示在右上角。
名称: Right
描述: 圆点显示在右侧纵向居中。
名称: Left
描述: 圆点显示在左侧纵向居中。
BadgeStyle对象说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
名称: color
类型: ResourceColor
必填: 否
默认值: Color.White
描述: 文本颜色。
名称: fontSize
类型: number | string
必填: 否
默认值: 10
描述: 文本大小。单位:vp。说明:不支持设置百分比。
名称: badgeSize
类型: number | string
必填: 否
默认值: 16
描述: Badge的大小。不支持百分比形式设置。当设置为非法值时,按照默认值处理。单位:vp。
名称: badgeColor
类型: ResourceColor
必填: 否
默认值: Color.Red
描述: Badge的颜色。
1.3 示例代码
// 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组件的使用,这个组件可以让用户快速得知信息数目,非常方便
相关文章:
【鸿蒙软件开发】ArkTS容器组件之Badge
文章目录 前言一、Badge组件1.1 子组件1.2 接口接口1参数 接口2参数 BadgePosition枚举说明BadgeStyle对象说明 1.3 示例代码 总结 前言 Badge组件:可以附加在单个组件上用于信息标记的容器组件。 一、Badge组件 可以附加在单个组件上用于信息标记的容器组件。 说…...
H5游戏源码分享-命悬一线
H5游戏源码分享-命悬一线 在合适的时机跳下绳子,能安全站到木桩上,就通过。 游戏源码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><meta name&…...
【电路笔记】-交流电阻和阻抗
交流电阻和阻抗 文章目录 交流电阻和阻抗1、概述:电阻率2、交流状态与直流状态近似性3、交流状态与直流状态的差异性3.1 趋肤效应(The Skin Effect)3.2 靠近效应(The Proximity Effect) 4、总结 电阻是一种特性,用于表征当电压差施…...
android开发使用OkHttp自带的WebSocket实现IM功能
一、背景 android app开发经常会有IM需求,很多新手不晓得如何入手,难点在于通讯不中断。其实android发展到今天,很多技术都很完善,有很多类似框架可以实现。例如有:okhttp自带的websocket框架、easysocket等等。本文主…...
前端小技巧: TS实现柯里化函数
实现 curry 函数,把其他函数柯里化 curry 返回一个函数fn执行fn, 中间状态返回函数,如 add(1), 或者 add(1)(2)最后返回执行结果,如 add(1)(2)(3) function curry(fn:Function) {const fnArgsLen fn.length // 传入函数的参数长度let args…...
【算法-数组2】有序数组的平方 和 长度最小的子数组
今天,带来数组相关算法的讲解。文中不足错漏之处望请斧正! 理论基础点这里 有序数组的平方 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序。 示例 1: 输…...
H5游戏源码分享-接苹果游戏拼手速
H5游戏源码分享-接苹果游戏拼手速 看看在20秒内能接多少个苹果 <html> <head><title>我是你的小苹果</title><meta charset"utf-8"/><meta name"viewport" content"initial-scale1, user-scalableno, minimum-scale…...
详解类生到死的来龙去脉
类生命周期和加载过程 一个类在 JVM 里的生命周期有 7 个阶段,分别是加载(Loading)、校验(Verification)、准备(Preparation)、解析(Resolution)、初始化(Ini…...
寻找倒数第K个节点
这篇文章也是凑数的 ... 寻找倒数第K个节点 描述 : 找出单向链表中倒数第 k 个节点。返回该节点的值。 题目 : LeetCode 返回倒数第K个节点 : 面试题 02.02. 返回倒数第 k 个节点 说明 : 给定的 k 保证是有效的。 分析 : 我们给出个例子 : 首先,我们创建两个…...
[ROS系列]ubuntu 20.04 从零配置orbslam3(无坑版)
目录 背景: 结果展示: 一、配置虚拟机 二、 同步网络时间 三、ping网络 四、 安装ros 五、下载源码 六、下载orb_slam3 error1:Pangolin error2: ./HelloPangolin: error while loading shared libraries: libpango_windowing.so: cannot open shared object file…...
网络协议--TCP的保活定时器
23.1 引言 许多TCP/IP的初学者会很惊奇地发现可以没有任何数据流通过一个空闲的TCP连接。也就是说,如果TCP连接的双方都没有向对方发送数据,则在两个TCP模块之间不交换任何信息。例如,没有可以在其他网络协议中发现的轮询。这意味着我们可以…...
leetcode 1353. 最多可以参加的会议数目
给你一个数组 events,其中 events[i] [startDayi, endDayi] ,表示会议 i 开始于 startDayi ,结束于 endDayi 。 你可以在满足 startDayi < d < endDayi 中的任意一天 d 参加会议 i 。注意,一天只能参加一个会议。 请你返回…...
hadoop权威指南第四版
第一部分 HaDOOP基础知识 1.1 面临的问题 存储越来越大,读写跟不上。 并行读多个磁盘。 问题1 磁盘损坏 – 备份数据HDFS 问题2 读取多个磁盘用于分析,数据容易出错 --MR 编程模型 1.2 衍生品 1 在线访问的组件是hbase 。一种使用hdfs底层存储的模型。…...
LeetCode75——Day20
文章目录 一、题目二、题解 一、题目 2215. Find the Difference of Two Arrays Given two 0-indexed integer arrays nums1 and nums2, return a list answer of size 2 where: answer[0] is a list of all distinct integers in nums1 which are not present in nums2. an…...
搭建微信小程序环境及项目结构介绍
一、注册 访问微信公众平台,将鼠标的光标置于账号分类中的小程序上, 点击‘查看详情’ 点击“前往注册” 下方也可以点击注册: 小程序注册页面: 步骤a:进入小程序注册页,根据指引填写信息和提交相应的资料&#x…...
Python通过pyecharts对爬虫房地产数据进行数据可视化分析(一)
一、背景 对Python通过代理使用多线程爬取安居客二手房数据(二)中爬取的房地产数据进行数据分析与可视化展示 我们爬取到的房产数据,主要是武汉二手房的房源信息,主要包括了待售房源的户型、面积、朝向、楼层、建筑年份、小区名称…...
关于测试组件junit切换testng的示例以及切换方式分享
文章目录 概要首先看看junit和testng的区别实践篇摸拟业务逻辑代码简单对象数据层摸拟类业务逻辑层摸拟类后台任务摸拟类 基于springmockjunit基于springmocktestng 示例的差异点junit与testng的主要变动不大,有以下几个点需要注意注解部分在before,after中testng多出按配置执行…...
nginx 内存管理(二)
共享内存 共享内存结构与接口定义nginx共享内存在操作系统上的兼容性设计互斥锁锁的结构体锁的一系列操作(core/ngx_shmtx.c)创建锁 原子操作nginx的上锁操作尝试加锁获取锁释放锁强迫解锁唤醒等待进程 slab共享内存块管理nginx的slab大小规格内存池结构…...
【DevChat】智能编程助手 - 使用评测
写在前面:博主是一只经过实战开发历练后投身培训事业的“小山猪”,昵称取自动画片《狮子王》中的“彭彭”,总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域,如今终有小成…...
Geek challenge 2023 EzHttp
打开链接需要使用post请求提交username和password 查看源码得到提示,爬虫想到robots协议 访问robots.txt 访问得到的路径:/o2takuXXs_username_and_password.txt 拿到用户名和密码: username:admin password:dm1N123456r00t# 进行post传参…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
