HarmonyOS开始玩耍：List组件结合Badge、swipeAction实现微信消息列表侧滑删除效果（十）

夲奋亻Jay
219 阅读5分钟

一、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()
  })
}

五、效果

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

我的博客只写前端博文，点击我去看更多喜欢的前端博文，欢迎大家一起讨论学习！【https://blog.csdn.net/qq_29101285?spm=1011.2266.3001.5343】

avatar
文章
阅读
粉丝