往期知识点整理
- 鸿蒙(HarmonyOS)北向开发知识点记录~
- 【鸿蒙性能优化】基于ArkUI的冷启动加载完成时延问题分析思路&案例
- 【鸿蒙性能优化】基于List的滑动过程卡顿率问题分析&案例
- 【鸿蒙性能优化】基于ArkUI启动冷启动过程最大连续丢帧数问题分析思路&案例
- 【鸿蒙性能优化】冷启动响应时延问题分析思路&案例
- 【鸿蒙性能优化】横竖屏切换开发实践
- 【鸿蒙性能优化】基于AOP的代码插桩
- 【鸿蒙性能优化】基于原生能力的设备唯一ID方案
- 【鸿蒙性能优化】基于Camera Kit,获取相机流数据传递给native,进行压缩编码
- 【鸿蒙性能优化】基于measure实现的文本测量
- 持续更新中……
场景描述
场景一:当文本的内容超过指定的行数时显示 …展开,当所有文本展开后,最后面跟着收起。
场景二:搜索框展示历史记录,单个子组件超过固定长度后展示省略号,固定只展示两行,超出的文字被截断,通过点击按钮展示后续文本内容
方案描述
场景一:
当文本的内容超过指定的行数时显示 …展开,当所有文本展开后,最后面跟着收起。
方案
1、文本默认超过两行时,直接截断,在截断文本后添加…展开
2、测量两行文本和全部文本的高度,当全部文本的高度超过两行文本的高度时进行展开的逻辑
3、文本全部展开后,点击收起,所有文本全部收齐变成固定的两行
核心代码
文本收起态(即展开逻辑)
collapseText(): void {
//判断文本是否需要展开
if (!this.needProcess) {
return;
}
let titleSize : SizeOptions = measure.measureTextSize({
textContent: this.rawTitle,
constraintWidth: this.titleWidth,
fontSize: 20
})
//测量最大行数(两行)限制的高度,
let twoLineSize : SizeOptions = measure.measureTextSize({
textContent: this.rawTitle,
constraintWidth: this.titleWidth,
fontSize: 20,
maxLines: this.MAX_LINES
})
//文本未超过限制行数,不进行展开、收起处理
if (Number(titleSize.height) == Number(twoLineSize.height)) {
this.needProcess = false;
return;
}
console.log('test row height:' + titleSize.height)
console.log('test twoLineSize height:' + twoLineSize.height)
//clipTitle被截取的文本,rawtitle只全部的文本
let clipTitle: string = this.rawTitle
//EXPAND_STR将展开这个文本赋值给最后一个span
this.lastSpan = this.EXPAND_STR;
while (Number(titleSize.height) > Number(twoLineSize.height)) {
//判断是否展开
this.expanded = true;
clipTitle = clipTitle.substring(0, clipTitle.length - 1);
titleSize = measure.measureTextSize({
//文本总共被分成三段,展示的则是被截取的文本+省略号+最后的展开或收起的文字
textContent: clipTitle + this.ellipsis + this.lastSpan,
constraintWidth: this.titleWidth,
fontSize: 20
})
console.log("test while clipTitle:" + clipTitle)
console.log("test while clipTitle height:" + titleSize.height)
}
console.log("test clipTitle:" + clipTitle)
this.title = clipTitle + this.ellipsis
this.expanded = false;
}
// 文本展开态(即收起逻辑)
expandText(): void {
console.log('testTag: ' + this.needProcess);
if (this.needProcess) {
//文本已经展开了,就需要将最后一个文本替换成收起的样式
this.lastSpan = this.COLLAPSE_STR;
this.expanded = true;
this.title = this.rawTitle;
}
}
场景二:
搜索框展示历史记录,单个子组件超过固定长度后展示省略号,固定只展示两行,超出的文字被截断,通过点击按钮展示后续文本内容。
方案
1.历史记录固定只展示两行,超出的均被截断
2.单个文本有固定尺寸,超长后会展示省略号
3.通过点击按钮可以展示出所有的历史记录
核心代码
获取屏幕的宽度
//子组件的最大宽度,目前是定死的
const childMaxWidth:number = 325 //为了方便后续计算,这里的宽度数值为px
let displayClass: display.Display | null = null;
let componentWidth:number = 0;
try {
//获取屏幕宽度
displayClass = display.getDefaultDisplaySync();
componentWidth = displayClass.width
console.log('---这是componentWidth',componentWidth)
} catch (exception) {
console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}
// 监听下标和单个文字的改变
IndexChange(){
if(this.AllWidth >= (this.restrictWidth - childMaxWidth) && this.AllWidth <= (this.restrictWidth)){
this.newIndex = this.index
console.log('---这是newIndex',this.newIndex)
}
}
textChange(){
let content:string = this.message
this.textWidth = measure.measureText({
textContent: content,
fontSize: this.fontSizeData
})
if(this.textWidth > childMaxWidth){
this.AllWidth += childMaxWidth
console.log('---这是AllWidth1',this.AllWidth)
}else{
this.AllWidth += this.textWidth
console.log('---这是AllWidth2',this.AllWidth)
console.log('---textWidth',this.textWidth)
}
}
// 对超出的文本进行判断
aboutToAppear(): void {
// this.process();
if(componentWidth != 0){
this.restrictWidth = Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 0.01 )
console.log('---这是restrictWidth',this.restrictWidth)
console.log('---FlexWidth',(this.FlexWidth))
}
for(let i = 0;i < this.AllData.length;i++){
this.message = this.AllData[i]
this.index = i
console.log('---index',this.index)
}
this.SomeData = this.AllData.slice(0,this.newIndex+1)
this.ShowData = this.SomeData
}
总是有很多小伙伴反馈说:鸿蒙开发不知道学习哪些技术?不知道需要重点掌握哪些鸿蒙开发知识点? 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。
针对一些列因素,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线,包含了鸿蒙开发必掌握的核心知识要点,内容有(OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等)技术知识点。
《鸿蒙 (Harmony OS)开发学习手册》(共计892页):https://gitcode.com/HarmonyOS_MN/733GH/overview
如何快速入门?
1.基本概念
2.构建第一个ArkTS应用
3.……
开发基础知识:
1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
基于ArkTS 开发
1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
鸿蒙开发面试真题(含参考答案):https://gitcode.com/HarmonyOS_MN/733GH/overview
OpenHarmony 开发环境搭建
《OpenHarmony源码解析》:https://gitcode.com/HarmonyOS_MN/733GH/overview
- 搭建开发环境
- Windows 开发环境的搭建
- Ubuntu 开发环境搭建
- Linux 与 Windows 之间的文件共享
- ……
- 系统架构分析
- 构建子系统
- 启动流程
- 子系统
- 分布式任务调度子系统
- 分布式通信子系统
- 驱动子系统
- ……