往期知识点整理
场景描述
场景一:当文本的内容超过指定的行数时显示 …展开,当所有文本展开后,最后面跟着收起。
场景二:搜索框展示历史记录,单个子组件超过固定长度后展示省略号,固定只展示两行,超出的文字被截断,通过点击按钮展示后续文本内容
方案描述
场景一:
当文本的内容超过指定的行数时显示 …展开,当所有文本展开后,最后面跟着收起。
方案
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)全栈开发技术的学习路线,包含了鸿蒙开发必掌握的核心知识要点,内容有(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等)鸿蒙(HarmonyOS NEXT)技术知识点。
《鸿蒙 (Harmony OS)开发学习手册》(共计892页):https://gitcode.com/HarmonyOS_MN/733GH/overview
如何快速入门?
1.基本概念
2.构建第一个ArkTS应用
3.……
鸿蒙开发面试真题(含参考答案):
《OpenHarmony源码解析》:
- 搭建开发环境
- Windows 开发环境的搭建
- Ubuntu 开发环境搭建
- Linux 与 Windows 之间的文件共享
- ……
- 系统架构分析
- 构建子系统
- 启动流程
- 子系统
- 分布式任务调度子系统
- 分布式通信子系统
- 驱动子系统
- ……