鸿蒙HarmonyOS开发：List组件结合Badge、swipeAction实现微信消息列表侧滑删除效果

news2024/9/22 23:33:40

文章目录

      • 一、ListItem的swipeAction属性
      • 二、Badge组件
      • 三、Search组件
      • 四、示例代码
      • 五、效果

一、ListItem的swipeAction属性

名称参数类型描述
swipeAction{
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: SwipeEdgeEffect,
}		用于设置ListItem的划出组件。
- start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。
- end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。
- edgeEffect: 滑动效果。
说明：
start和end对应的@builder函数中顶层必须是单个组件，不能是if/else、ForEach、LazyForEach语句。

二、Badge组件

创建数字标记组件。

Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})

参数：

参数名参数类型必填默认值描述
countnumber是-设置提醒消息数。
说明：
小于等于0时不显示信息标记。
取值范围：[-2147483648,2147483647]，非整数时会舍去小数部分取整数部分，如5.5取5。
positionBadgePosition否BadgePosition.RightTop设置提示点显示位置。
maxCountnumber否99最大消息数，超过最大消息时仅显示maxCount+。
styleBadgeStyle是-Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

三、Search组件

搜索框组件，适用于浏览器的搜索内容输入框等应用场景。

Search(options?: { value?: string, placeholder?: string, icon?: string, controller?: SearchController })

参数：

参数名参数类型必填参数描述
valuestring否设置当前显示的搜索文本内容。
placeholderstring否设置无输入时的提示文本。
iconstring否设置搜索图标路径，默认使用系统搜索图标。
说明：
icon的数据源，支持本地图片和网络图片。
- 支持的图片格式包括png、jpg、bmp、svg、gif和pixelmap。
- 支持Base64字符串。格式data:image/[png
controllerSearchController否设置Search组件控制器。

属性:

名称参数类型描述
searchButtonstring搜索框末尾搜索按钮文本内容，默认无搜索按钮。
placeholderColorResourceColor设置placeholder文本颜色。
placeholderFontFont设置placeholder文本样式。
textFontFont设置搜索框内输入文本样式。
textAlignTextAlign设置文本在搜索框中的对齐方式。
默认值：TextAlign.Start
copyOptionCopyOptions设置输入的文本是否可复制。

事件:

onSubmit(callback: (value: string) => void)

点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。
-value: 当前搜索框中输入的文本内容。

onChange(callback: (value: string) => void)

输入内容发生变化时，触发该回调。
-value: 当前搜索框中输入的文本内容。

onCopy(callback: (value: string) => void)

长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。
-value: 复制的文本内容。

onCut(callback: (value: string) => void)

长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调。
-value: 剪切的文本内容。

onPaste(callback: (value: string) => void)

长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。
-value: 粘贴的文本内容。

四、示例代码

interface SwipeInterface {
  username: string,
  info: string,
  date: string,
  noRead: number,
  icon: ResourceStr,
}

// 全局自定义构建函数
@Builder function msgList(item: SwipeInterface) {
  Row() {
    Badge({
      count: item.noRead,
      position: BadgePosition.RightTop,
      style: {}
    }) {
      Image(item.icon)
        .width(44)
        .height((44))
        .borderRadius(4)
    }

    Column() {
      Text(item.username)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
      Text(item.info)
        .fontSize(14)
        .fontColor("#666666")
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .height(40)
    .margin({
      left: 10
    })
    .alignItems(HorizontalAlign.Start)
    .layoutWeight(1)

    Text(item.date)
      .fontSize(14)
      .fontColor('#cccccc')
      .width(60)
      .textAlign(TextAlign.End)
  }
  .padding(10)
}

@Entry
@Component
struct Message {
  @State list: SwipeInterface[] = [
    {
      username: "安安",
      info: "这孩子不是笨，就是学习方法不对。学习方法都找不对还不是笨啊？",
      date: "10:23",
      noRead: 0,
      icon: $r("app.media.user")
    },
    {
      username: "大明",
      info: "别人扮猪吃老虎，你只能扮猪。",
      date: "10:22",
      noRead: 2,
      icon: $r("app.media.icon")
    },
    {
      username: "大地",
      info: "别人的女朋友都会生气了，而你的女朋友还在充气。",
      date: "昨天",
      noRead: 0,
      icon: $r("app.media.1")
    },
    {
      username: "小贾",
      info: "想变美就多睡觉，睡懵了就觉得自己美了。",
      date: "昨天",
      noRead: 5,
      icon: $r("app.media.3")
    },
    {
      username: "徐姐",
      info: "该失望的事从没辜负过我，每次都认认真真的让我失望。",
      date: "星期三",
      noRead: 0,
      icon: $r("app.media.user")
    },
    {
      username: "钱超",
      info: "请相信我，我所说的每句话，都是废话！",
      date: "星期三",
      noRead: 2,
      icon: $r("app.media.icon")
    },
    {
      username: "沈刚",
      info: "你永远不会知道，你的哪个好友，会成为下一个微商。",
      date: "10-22",
      noRead: 0,
      icon: $r("app.media.1")
    },
    {
      username: "夏静",
      info: "都说累成狗，其实狗没你那么累。",
      date: "10-21",
      noRead: 5,
      icon: $r("app.media.3")
    },
    {
      username: "丁杰",
      info: "每次临时抱佛脚的时候，佛总是给我一脚。",
      date: "10-23",
      noRead: 0,
      icon: $r("app.media.user")
    },
    {
      username: "潘桂英",
      info: "不想结婚生子，是我作为穷人的自觉。",
      date: "10-22",
      noRead: 2,
      icon: $r("app.media.icon")
    },
    {
      username: "唐军",
      info: "人家谈恋爱，靠长相靠浪漫靠烧钱，而你靠对方眼瞎。",
      date: "10-22",
      noRead: 0,
      icon: $r("app.media.1")
    },
    {
      username: "闫磊",
      info: "做事一定要考虑别人的感受，千万不能让他们太开心了。",
      date: "10-21",
      noRead: 5,
      icon: $r("app.media.3")
    },
    {
      username: "史萍",
      info: "你踢球受过最重的伤，是女友到球场给对手喂水！",
      date: "10-23",
      noRead: 0,
      icon: $r("app.media.user")
    },
    {
      username: "赵青",
      info: "别问我有啥，先说你要啥，再说你凭啥。",
      date: "10-22",
      noRead: 2,
      icon: $r("app.media.icon")
    },
    {
      username: "于丽",
      info: "经过多年的打拼，虽然没有什么收获，但你有债呀！",
      date: "10-22",
      noRead: 0,
      icon: $r("app.media.1")
    },
    {
      username: "郑敏",
      info: "女生之间的友谊啊，就像塑料花，虽然假但永不凋零。",
      date: "10-21",
      noRead: 5,
      icon: $r("app.media.3")
    },
  ]
  @State changeValue: string = ''

  getMsglist() {
    return this.list.filter(item => {
      return item.username.includes(this.changeValue) || item.info.includes(this.changeValue)
    })
  }

  //自定义组件内自定义构建函数
  @Builder actionItem(index: number) {
    Row() {
      Text("标记未读")
        .actionItemText(80, '#409EFF', () => {
          this.list[index].noRead = 1
          this.list = [...this.list];
        })
      Text("不显示")
        .actionItemText(70, '#E6A23C', () => {
          this.list.splice(index, 1)
        })
      Text("删除")
        .actionItemText(60, '#F56C6C', () => {
          this.list.splice(index, 1)
        })
    }
    .margin({ left: 10 })
  }

  build() {
    Column() {
      Row() {
        Search({ placeholder: '搜索' })
          .backgroundColor('#ffffff')
          .onChange((value: string) => {
            this.changeValue = value
          })
          .margin(20)
      }.width('100%')

      List() {
        ForEach(this.getMsglist(), (item: SwipeInterface, key) => {
          ListItem() {
            msgList(item)
          }
          .height(60)
          .swipeAction({
            end: this.actionItem(key)
          })
        })
      }
      .divider({
        strokeWidth: 1,
        color: "#eeeeee"
      })
      .backgroundColor("#ffffff")
      .layoutWeight(1)
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#eeeeee")
  }
}

//定义扩展组件样式
@Extend(Text) function actionItemText(width: number = 60, bgColor: ResourceColor = '#F56C6C', callBack: Function = () => {
}) {
  .fontSize(14)
  .fontColor("#ffffff")
  .height(60)
  .width(width)
  .textAlign(TextAlign.Center)
  .backgroundColor(`${bgColor}`)
  .onClick(() => {
    callBack()
  })
}

五、效果

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[数据集][目标检测]纸箱子检测数据集VOC+YOLO格式8375张1类别

[数据集][目标检测]纸箱子检测数据集VOC+YOLO格式8375张1类别

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：8375 标注数量(xml文件个数)：8375 标注数量(txt文件个数)：8375 标注…
阅读更多...
Zynq UltraScale+ RFSoC 配置存储器器件

Zynq UltraScale+ RFSoC 配置存储器器件

Zynq UltraScale RFSoC 配置存储器器件 下表所示闪存器件支持通过 Vivado 软件对 Zynq UltraScale RFSoC 器件执行擦除、空白检查、编程和验证等配置操 作。 本附录中的表格所列赛灵思系列非易失性存储器将不断保持更新 ， 并支持通过 Vivado 软件对其中所列…
阅读更多...
Spring编程使用DDD的小把戏

Spring编程使用DDD的小把戏

场景 现在流行充血领域层，在原本只存储对象的java类中，增加一些方法去替代原本写在service层的crud， 但是例如service这种一般都是托管给spring的，我们使用的ORM也都托管给spring，这样方便在service层调用mybatis的m…
阅读更多...
PostgreSQL扩展之PGroonga：多语言全文搜索

PostgreSQL扩展之PGroonga：多语言全文搜索

简介 PGroonga 是一个 PostgreSQL 扩展，它增加了基于 Groonga 的全文搜索索引方法。虽然原生的 PostgreSQL 支持全文索引，但它仅限于基于字母和数字的语言。PGroonga 提供了更广泛的字符支持，使其成为 PostgreSQL 支持的语言的超集&#xff…
阅读更多...
malloc_consolidate

malloc_consolidate

此文章用于详细介绍malloc_consolidate。 众所周知，fastbin一般是不能合并，但在malloc_consolidate中是个例外。 1.触发机制 首先构造这样的堆块结构 一个0x40的堆块在fastbin中，一个0x110的堆块在unbin中 随后我们尝试分配一个0x300的堆…
阅读更多...
NSSCTF | [SWPUCTF 2021 新生赛]easyupload2.0

NSSCTF | [SWPUCTF 2021 新生赛]easyupload2.0

先传一个普通的一句话木马试一试 GIF89a <?php eval($_POST[shell]);?> 可以看到回显&#xff0c;不允许上传php文件。 使用Burpsuite抓包只修改ContentType后发现也不能绕过&#xff0c;说明服务器使用了黑名单后缀限制&#xff0c;那么我们可以使用其他的后缀代替ph…
阅读更多...
ubuntu CUDA 驱动更新，版本更新，多CUDA版本管理

ubuntu CUDA 驱动更新，版本更新，多CUDA版本管理

1 新版本驱动下载 前面介绍过window CUDA驱动更新&#xff0c;但是对于ubuntu 的驱动更新&#xff0c;没有一键操作。 本人笔记本电脑n年前装的CUDA DRIVER仅支持到cuda10.2&#xff0c;实在无法满足这日新月异的科技更新。 左 旧的驱动版本 右 新下载的硬件支持的驱动版本&…
阅读更多...
使用RN的kitten框架的日历组件的修改

使用RN的kitten框架的日历组件的修改

官方网页地址 下面就是我参考官方封装的时间日期组件&#xff08;主要是功能和使用方法&#xff0c;页面粗略做了下&#xff0c;不好看勿怪&#xff09; import React, {useState} from react; import {StyleSheet, View, TouchableOpacity, SafeAreaView} from react-native; …
阅读更多...
运用MongoDB Atlas释放开发者潜能同时把控成本

运用MongoDB Atlas释放开发者潜能同时把控成本

在当下的商业环境中&#xff0c;不可预测性已经成为常态&#xff0c;工程团队负责人必须在把控不可预测性和优化IT成本的双重挑战下谋求平衡。 咨询公司德勤2024 MarginPLUS调查收集了300多位企业负责人的见解&#xff0c;报告中重点介绍了面对动荡的全球经济环境&#xff0c;…
阅读更多...
kubernetes多master集群架构

kubernetes多master集群架构

一、完成master02节点的初始化操作 master02环境准备&#xff0c;详细过程参考上一期博客环境准备 #添加主机映射 vim /etc/hosts 192.168.88.3 master01 192.168.88.8 master02 192.168.88.4 node01 192.168.88.5 node021、准备master02节点需要的文件 从 master01 节点上拷…
阅读更多...
数学：矩阵范数的定义、常见的矩阵范数

数学：矩阵范数的定义、常见的矩阵范数

1 算子范数【从属范数】 1.1 1-算子范数【列和范数】 &#xff1a;即对A的每列的绝对值求和再求其中的最大值 1.2 ∞-算子范数【行和范数】即对 A 的每行的绝对值求和再求其中的最大值 1.3 2-算子范数【谱范数】 学过奇异值分解就知道谱范数是最大奇异值/ 二次型的最大特…
阅读更多...
大数据Spark教程从入门到精通第四篇：Spark快速上手

大数据Spark教程从入门到精通第四篇：Spark快速上手

一&#xff1a;Spark快速上手 1&#xff1a;创建Maven项目 idea安装scala_idea scala插件-CSDN博客 代表了我们安装scala的maven环境已经准备好了&#xff0c;代码可以正常跑了
阅读更多...
kafka用java收发消息

kafka用java收发消息

用java客户端代码来对kafka收发消息 具体代码如下 package com.cool.interesting.kafka;import org.apache.kafka.clients.consumer.ConsumerConfig; import org.apache.kafka.clients.consumer.ConsumerRecord; import org.apache.kafka.clients.consumer.ConsumerRecords; i…
阅读更多...
2024042001-计算机网络 - 物理层

2024042001-计算机网络 - 物理层

计算机网络 - 物理层 计算机网络 - 物理层 通信方式带通调制 通信方式 根据信息在传输线上的传送方向&#xff0c;分为以下三种通信方式&#xff1a; 单工通信&#xff1a;单向传输半双工通信&#xff1a;双向交替传输全双工通信&#xff1a;双向同时传输 带通调制 模拟信号…
阅读更多...
程序验证之Dafny--证明霍尔逻辑的半自动化利器

程序验证之Dafny--证明霍尔逻辑的半自动化利器

一、What is Dafny?【来自官网介绍 Dafny 】 1)介绍 Dafny 是一种支持验证的编程语言&#xff0c;配备了一个静态程序验证器。 通过将复杂的自动推理与熟悉的编程习语和工具相结合&#xff0c;使开发者能够编写可证明正确的代码&#xff08;相对于 {P}&#xff33;{Q} 这种…
阅读更多...
数据结构（C）：树的概念和二叉树初见

数据结构（C）：树的概念和二叉树初见

目录 &#x1f37a;0.前言 1.树概念及结构 2.认识一棵树 3.树的表示 3.1树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 4.二叉树 4.1特殊的二叉树 4.2二叉树的性质 &#x1f48e;5.结束语 &#x1f37a;0.前言 言C之言&#xff0c;聊C之识&…
阅读更多...
OpenAI 震撼发布：GPT-4o免费，实时语音视频交互开启新纪元

OpenAI 震撼发布：GPT-4o免费，实时语音视频交互开启新纪元

OpenAI 震撼发布&#xff1a;GPT-4o免费&#xff0c;实时语音视频交互开启新纪元 在仅仅问世17个月后&#xff0c;OpenAI 研制出了仿佛科幻片中登场的超级人工智能——GPT-4o&#xff0c;而且所有人都可以完全免费使用&#xff0c;让这个科技界的巨浪让人震撼无比&#xff01;…
阅读更多...
JSP技术

JSP技术

前言&#xff1a;虽然现在Vue盛行&#xff0c;但是对于初学者和一些项目我们还是采用jsp技术来编写前端代码&#xff0c;一些老的项目也需要jsp去维护。就像老师说的法国的银行系统还是采用COBOL这种古老语言。本篇文章主要介绍jsp技术。 目录 一、概述 &#xff08;1&#…
阅读更多...
Rust构造JSON和解析JSON

Rust构造JSON和解析JSON

目录 一、Rust构造JSON和解析JSON 二、知识点 serde_json JSON 一、Rust构造JSON和解析JSON 添加依赖项 cargo add serde-json 代码&#xff1a; use serde_json::{Result, Value};fn main() -> Result<()>{//构造json结构 cpu_loadlet data r#"{"…
阅读更多...
docker安装minio附带图片

docker安装minio附带图片

1.拉镜像 docker pull minio/minio 2.创建挂载点目录 mkdir -p /usr/local/minio/config mkdir -p /usr/local/minio/data 3.创建minio容器 docker run \ -p 19000:9000 \ -p 9090:9090 \ --nethost \ --name minio \ -d --restartalways \ -e "MINIO_ACCESS_KEYmini…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023