鸿蒙应用示例:ArkTS UI框架中的文本缩进技巧

在开发基于HarmonyOS的应用程序时,我们可能会遇到需要对文本进行缩进的需求。本文将通过两个具体的例子来展示如何使用ArkTS UI框架实现这种效果。

方案一:利用获取空格宽度实现缩进

此方案通过测量单个空格的宽度来确定文本前需要添加多少个空格以达到所需的缩进效果。以下是具体的实现代码:

js 复制代码
@Entry
@Component
struct Index {
  @State arr_01: Resource[] = []
  @State arr_02: string[] = ['', '', '', '']
  @State spaceWidth: number = 0 // 单个空格的宽度

  build() {
    Scroll() {
      Column({ space: 10 }) {
        Text('方案一:利用获取空格宽度实现缩进')
        Text(' ').onAreaChange((_oldValue, newValue) => {
          this.spaceWidth = parseFloat('' + newValue.width)
          console.info(`单个空格的宽度为:${this.spaceWidth}px`)
          this.arr_01 = [$r("app.media.icon_0"), $r("app.media.icon_1"), $r("app.media.icon_2"), $r("app.media.icon_3")]
        })
        ForEach(this.arr_01, (icon: Resource, index: number) => {
          Row({ space: 10 }) {
            Image($r('app.media.app_icon'))
              .width('40%')
              .height(80)
              .objectFit(ImageFit.Fill)
              .border({ radius: 10 })
            Stack({ alignContent: Alignment.TopStart }) {
              Text(`${this.arr_02[index]}专升本2021华为开发者联盟欢迎您加入开发者大家庭专升本2021华为开发者联盟欢迎您加入开发者大家庭专升本2021华为开发者联盟欢迎您加入开发者大家庭`)
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .maxLines(2)
                .lineHeight(24)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
              Image(icon)
                .height(20)
                .borderRadius(5)
                .onAreaChange((_oldValue, newValue) => {
                  let iconWidth = parseFloat('' + newValue.width)
                  console.info(`缩进开始于索引 ${index}`)
                  console.info(`图标宽度为:${iconWidth}px`)
                  let numSpaces = Math.ceil(iconWidth / this.spaceWidth) + 1
                  console.info(`计算出需要 ${numSpaces} 个空格进行缩进`)
                  this.arr_02[index] = ' '.repeat(numSpaces)
                  console.info(`更新后的缩进字符串为:[${this.arr_02[index]}]`)
                  console.info(`缩进结束于索引 ${index}`)
                })
            }.width('60%')
          }.width('100%')
          .padding({ left: 10, top: 10, right: 20 })
        })
      }
    }.width('100%').height('100%')
  }
}

方案二:利用ContainerSpan实现缩进

此方案使用ContainerSpan来将图像和其他容器嵌入文本流中,从而自然地实现缩进效果。以下是具体的实现代码:

js 复制代码
@Entry
@Component
struct Index {
  @State arr_01: Resource[] = [$r("app.media.icon_0"), $r("app.media.icon_1"), $r("app.media.icon_2"), $r("app.media.icon_3")]

  build() {
    Scroll() {
      Column({ space: 10 }) {
        Text('方案二:利用ContainerSpan实现缩进')
        ForEach(this.arr_01, (icon: Resource, _index: number) => {
          Row({ space: 10 }) {
            Image($r('app.media.app_icon'))
              .width('40%')
              .height(80)
              .objectFit(ImageFit.Fill)
              .border({ radius: 10 })
            Stack({ alignContent: Alignment.TopStart }) {
              Text() {
                ContainerSpan() {
                  ImageSpan(icon)
                    .height(20)
                    .borderRadius(5)
                  Span('专升本2021华为开发者联盟欢迎您加入开发者大家庭专升本2021华为开发者联盟欢迎您加入开发者大家庭专升本2021华为开发者联盟欢迎您加入开发者大家庭')
                    .fontSize(16)
                    .fontWeight(FontWeight.Bold)
                    .lineHeight(24)
                }
              }.maxLines(2)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
            }.width('60%')
          }.width('100%')
          .padding({ left: 10, top: 10, right: 20 })
        })
      }
    }.width('100%').height('100%')
  }
}

结论

以上两种方法都可以实现文本的缩进,但是它们各有优缺点。方案一更加灵活,可以根据实际宽度动态调整缩进;而方案二则更为简洁,适用于不需要频繁变化缩进的情况。开发者应根据具体应用场景选择最适合的方式。

素材

相关推荐
写雨.016 小时前
鸿蒙定位开发服务
华为·harmonyos·鸿蒙
goto_w21 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
别说我什么都不会2 天前
ohos.net.http请求HttpResponse header中set-ccokie值被转成array类型
网络协议·harmonyos
码是生活2 天前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
鸿蒙场景化示例代码技术工程师2 天前
基于Canvas实现选座功能鸿蒙示例代码
华为·harmonyos
小脑斧爱吃鱼鱼2 天前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
鸿蒙布道师2 天前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang1062092 天前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
马剑威(威哥爱编程)2 天前
在HarmonyOS NEXT 开发中,如何指定一个号码,拉起系统拨号页面
华为·harmonyos·arkts
GeniuswongAir2 天前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos