当前位置: 首页 > article >正文

鸿蒙历史搜索功能:tag标签根据文字宽度自动换行 展示更多

一.需求

        历史搜索功能,需要根据文字宽度自动换行,并且只展示3行,文字宽度不固定

二.思路

        1.通过鸿蒙api MeasureText.measureText 先获取文字宽度

        2.通过Row组件的onAreaChange事件监听当前组件高度变化

三.实现

        监听需要展示的数量,是否返回完整的数据和需要截取的数量
        定义需要用到的变量   如果是v1的话@Local换成@State即可
@Local isExpanded: boolean = false // 是否继续计算行高
@Local visibleItemCount: number = 0; // 当前可见的标签数量
@Local arr:string[] = ['123','123','123','123','123','123','123','123']; 
//监听需要展示数量
@Computed
  get displayList() {
    return this.isExpanded
      ? this.arr
      : this.arr.slice(0, this.visibleItemCount);
  }
         标签样式和布局样式
// 标签样式
  @Builder
  tagView(item: string) {
    Column() {
      Text(item)
        .fontSize(14)
        .fontWeight(400)
        .fontColor('#666666')
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
    }
    .onClick(() => {
      
    })
    .height(32)
    .borderRadius(6)
    .backgroundColor('#F6F7F8')
    .margin({ top: 8, right: 8 })
    .padding({
      left: 12,
      right: 12,
      top: 6,
      bottom: 6
    })
  }

// 布局和监听高度判断
 Column({ space: '8vp' }) {
          Flex({
            direction: FlexDirection.Row, // 横向排列
            wrap: FlexWrap.Wrap, // 自动换行
            justifyContent: FlexAlign.Start, // 左对齐
            alignItems: ItemAlign.Center  // 垂直居中对齐
          }) {
            ForEach(this.displayList), (item: string) => {
              this.tagView(item); // ui样式抽成了Builder,换成自己的就行
            }, (item: string, index: number) => JSON.stringify(item) + index);
            // 展示更多按钮
            if (this.isExpanded) {
              this.moreButton();
            }
          }
         .onAreaChange((oldValue: Area, newValue: Area) => {
            if (this.isExpanded) {
              return; // 已经点击“更多”按钮,直接返回,不再进行计算
            }
            const containerWidth = newValue.width; // 当前页面宽度用来存放标签的总宽度
// 最大高度  这里因为我每行高度是固定40,只展示3行所以是120,可以根据自己需求调整
            const MAX_HEIGHT = 120; 
            if (newValue.height >= MAX_HEIGHT) {
              this.showMoreButton = true; // 显示 "更多" 按钮
              const visibleItemsCount = this.calculateVisibleItems2(Number(containerWidth), MAX_HEIGHT);
              this.visibleItemCount = visibleItemsCount; // 更新当前可见标签数量
            } else {
              this.showMoreButton = false; // 隐藏 "更多" 按钮
              this.visibleItemCount = this.arr.length; // 显示所有标签
            }
          });
        }
高度和宽度计算
  //计算显示几个标签 通过行高,最大行数,标签动态宽度
  calculateVisibleItems2(containerWidth: number, maxHeight: number): number {
    const LINE_HEIGHT = 40; // 每行固定高度
    const MAX_LINES = Math.floor(maxHeight / LINE_HEIGHT); // 最大行数
    let currentWidth = 0; // 当前行的宽度累加
    let currentLine = 1; // 当前是第几行
    let visibleCount = 0; // 可见的标签数量
    for (let item of this.vm.searchHistoryList) {
      const itemWidth = this.getTagWidth(item); // 获取标签宽度
      if (currentWidth + itemWidth <= containerWidth) {
        // 标签可以放入当前行
        currentWidth += itemWidth;
      } else {
        // 换行
        currentLine++;
        if (currentLine > MAX_LINES) {
          break; // 超过最大行数,停止计数
        }
        currentWidth = itemWidth; // 新行的第一个标签宽度
      }
      visibleCount++; // 增加可见的标签数量
    }
    return visibleCount;
  }
展示更多按钮

@Builder
  moreButton() {
    Column() {
      Text('展示更多')
    }
    .height(32)
    .width(32)
    .backgroundColor('#F6F7F8')
    .borderRadius(6)
    .margin({ top: 8, right: 8 })
    .padding({
      left: 12,
      right: 12,
      top: 6,
      bottom: 6
    })
    .onClick(() => {
     this.isExpanded = true; // 标记为已展开
     this.visibleItemCount = this.arr.length; // 更新为显示所有标签
    })
  }


http://www.kler.cn/a/449512.html

相关文章:

  • sfnt-pingpong -测试网络性能和延迟的工具
  • Gin-vue-admin(1):环境配置和安装
  • 数据分析思维(五):分析方法——假设检验分析方法
  • 【IMU:视觉惯性SLAM系统】
  • redis数据转移
  • Java操作Xml
  • 使用VSCode Debugger 调试 React项目
  • 项目代码第6讲:UpdownController.cs;理解 工艺/工序 流程、机台信息;前端的“历史 警报/工艺 记录”
  • Python import from xx import xx
  • 2025系统架构师(一考就过):案例题之一:嵌入式架构、大数据架构、ISA
  • 电脑屏幕有条纹怎么办?电脑屏幕出现条纹解决方法
  • 使用Python的Seaborn库进行数据可视化
  • shell脚本定义特殊字符导致执行mysql文件错误的问题
  • 汽车IVI中控开发入门及进阶(47):CarPlay开发
  • 【unity】【游戏开发】Unity项目一运行就蓝屏报Watch Dog Timeout
  • 重温设计模式--命令模式
  • 安卓APP-HTTPS抓包Frida Hook教程
  • 集星云推短视频矩阵系统:重塑短视频营销格局
  • 图匹配经典论文(三)Deep Learning of Graph Matching—CVPR2018图匹配
  • C++中的模板元编程
  • 0基础学前端-----CSS DAY5
  • 004最长回文子串
  • ABAQUS纤维混凝土冲击破坏三维模型
  • 苏黎世联邦理工学院与加州大学伯克利分校推出MaxInfoRL:平衡内在与外在探索的全新强化学习框架
  • C++ 中的多线程与并发编程:从基础到进阶
  • Apache RocketMQ 5.1.3安装部署文档