当前位置:网站首页>openharmony容器组件之Badge
openharmony容器组件之Badge
2022-08-09 13:12:00 【lplj717】
Badge:新事件标记组件,在组件上提供事件信息展示能力
Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
count:设置提醒消息数
position:设置提示点显示位置(BadgePosition)
BadgePosition:RightTop(圆点显示在右上角),Right(圆点显示在右侧纵向居中),Left(圆点显示在左侧纵向居中)
maxCount:最大消息数,超过最大消息时仅显示maxCount+
style:Badge组件可设置样式,支持设置文本颜色、尺寸、圆点颜色和尺寸(BadgeStyle)
BadgeStyle:
color 文本颜色
fontSize 文本大小
badgeSize badge的大小
badgeColor badge的颜色
效果如图:
代码:
@Entry
@Component
struct BadgeT {
@State counts: number = 1
@State message: string = 'new'
build() {
Column() {
Flex({ justifyContent: FlexAlign.SpaceAround }) {
//显示消息数量,点击增加消息数量值
Badge({
count: this.counts,
maxCount: 99,
style: { color: 0xffffff, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) {
Button('message').onClick(() => {
this.counts++
}).width(100).height(50).backgroundColor(0x317aa)
}.width(100).height(50)
//显示消息在右侧上角,显示消息内容
Badge({
value: this.message,
style: { color: 0xffffff, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } }) {
Text('message')
.width(80)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xf3f4ED)
}.width(80).height(50)
//显示消息圆点在右侧
Badge({
value: ' ',
position: BadgePosition.Right, style: { badgeSize: 6, badgeColor: Color.Red } }) {
Text("message")
.width(90)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xf3f4ED)
}.width(90).height(50)
}
}
.width('100%')
.height('100%')
.margin({ top: 10 })
}
}
边栏推荐
猜你喜欢
随机推荐
NC15 求二叉树的层序遍历
Draw a histogram with plot_hist_numeric()
NC53 删除链表的倒数第n个节点
tensorflow图片编码处理基础
微信实现扫码支付(native)
RobotFramework 之 库与关键字
【奖励公示】第23期 2022年7月奖励名单公示:社区明星评选 | 新人奖 | 博客同步 | 推荐奖
PO、DO、TO、VO、DO、DTO、DAO、POJO都是什么?
哈希表卡片
pytest 之 重运行机制与测试报告
32位机器和64位机器基本数据类型长度
JS轮播图实现
FFmpeg av_interleaved_write_frame错误
FFmpeg相机花屏花图问题解决方法
NC192 二叉树的后序遍历
Professor Chen Qiang's "Machine Learning and R Application" course Chapter 14 Assignment
面试攻略系列(四)-- 你不知道的大厂面试
什么是布隆过滤器?如何使用?
JZ7 重建二叉树
NC193 二叉树的前序遍历