HarmonyOS鸿蒙Next中UI文字图片省略策略

HarmonyOS鸿蒙Next中UI文字图片省略策略 UI文字图片省略策略

3 回复 
import measure from '@ohos.measure'

@Entry
@Component
struct IR240416122703049 {
@State rawTitle: string = "1月16日，国务院新闻办公室举行新闻发布会，介绍2024年春运形势及工作安排。从2月9日（除夕）00：00到2月17日（正月初八）24：00，免费9天。"
@State title: string = this.rawTitle
@State suffixStr: string | Resource = ""
expanded: Boolean = true
titleWidth: number = 350
needProcess: boolean = true
ellipsis: string = "..."
EXPAND_STR: string | Resource = $r('app.media.startIcon')
COLLAPSE_STR: string | Resource= $r('app.media.background')
MAX_LINES: number = 2;
aboutToAppear(): void {
this.process();
}
process(): void {
if (this.expanded) {
this.collapseText();
} else {
this.expandText();
}
}
//展开文本
expandText(): void {
console.log('testTag: ' + this.needProcess);
if (this.needProcess) {
this.suffixStr = this.COLLAPSE_STR;
this.expanded = true;
this.title = this.rawTitle;
}
}
//收起文本
collapseText(): void {
if (!this.needProcess) {
return;
}
let titleSize : SizeOptions = measure.measureTextSize({
textContent: this.rawTitle,
constraintWidth: this.titleWidth,
fontSize: 30
})
let twoLineSize : SizeOptions = measure.measureTextSize({
textContent: this.rawTitle,
constraintWidth: this.titleWidth,
fontSize: 30,
maxLines: this.MAX_LINES
})
//文本未超过限制行数，不进行展开、收起处理
if ((titleSize.height as number) == (twoLineSize.height as number)) {
this.needProcess = false;
return;
}
console.log('test row height:' + titleSize.height)
console.log('test twoLineSize height:' + twoLineSize.height)
let clipTitle: string = this.rawTitle
this.suffixStr = this.EXPAND_STR;
while ((titleSize.height as number) > (twoLineSize.height as number)) {
this.expanded = true;
// 可以修改其他计算算法提高性能
clipTitle = clipTitle.substring(0, clipTitle.length - 1);
titleSize = measure.measureTextSize({
textContent: clipTitle + this.ellipsis + this.suffixStr,
constraintWidth: this.titleWidth,
fontSize: 30
})
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;
}
build() {
Row() {
Column() {
Text(){
Span(this.title)
if (this.needProcess) {
ImageSpan(this.suffixStr)
.width(30)
}
}
.fontSize(30)
.fontWeight(FontWeight.Bold)
.id("title")
.width(this.titleWidth)
}
.width('100%')
}
.height('100%')
}
}

更多关于HarmonyOS鸿蒙Next中UI文字图片省略策略的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，UI文字图片省略策略主要涉及文本和图片在界面显示时的裁剪和省略处理。系统提供了多种省略模式，以适应不同场景下的显示需求。

对于文本省略，鸿蒙Next支持以下几种常见策略：

  1. 单行省略：当文本内容超出单行显示区域时，系统会在行尾显示省略号（…），表示内容被截断。
  2. 多行省略：对于多行文本，系统可以在指定行数的末尾显示省略号，适用于需要在有限空间内展示多行文本的场景。
  3. 字符省略：系统可以根据字符数进行省略，适用于需要精确控制文本长度的场景。

对于图片省略，鸿蒙Next提供了以下处理方式：

  1. 缩放裁剪：当图片尺寸超出显示区域时，系统会自动缩放图片并裁剪超出部分，确保图片在指定区域内完整显示。
  2. 居中裁剪：系统可以保持图片的宽高比，并将图片居中裁剪，以适应显示区域。
  3. 自适应布局：图片可以根据容器尺寸自动调整大小，避免内容溢出。

这些策略通过鸿蒙Next的UI组件和布局管理器实现，开发者可以通过配置相关属性来控制文本和图片的显示行为，确保界面在不同设备上的一致性和美观性。

在HarmonyOS鸿蒙Next中，UI文字和图片的省略策略主要通过以下方式实现：

  1. 文字省略（Ellipsis）：

    • 使用Text组件时，可以通过设置ellipsis属性来实现文字省略。当文字内容超出容器宽度时，系统会自动在末尾显示省略号（…）。
    • 示例代码：
      <Text
    width="200px"
    height="30px"
    ellipsis="true"
    text="这是一段超长的文字内容，超出部分将被省略。"
/>

  2. 图片省略（ScaleType）：

    • 使用Image组件时，可以通过设置scaleType属性来调整图片的显示方式。常用的scaleType包括centerCrop（居中裁剪）、fitXY（拉伸填充）等，确保图片在容器内完整显示或裁剪显示。
    • 示例代码：
      <Image
    width="200px"
    height="200px"
    scaleType="centerCrop"
    src=""
/>
回到顶部