鸿蒙Next如何实现文字删除线效果

在鸿蒙Next开发中，如何给Text组件添加文字删除线效果？是否有类似Android的Paint.STRIKE_THRU_TEXT_FLAG这样的属性或API可以直接使用？如果官方没有提供现成的方法，有没有其他可行的实现方案？

2 回复

在鸿蒙Next中，给文字加删除线超简单！用TextDecoration的lineThrough属性，比如：

Text("要删除的文字")
    .textDecoration(TextDecoration.LineThrough)

搞定！一行代码让文字“阵亡”～

更多关于鸿蒙Next如何实现文字删除线效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过以下两种方式实现文字删除线效果：

方法一：使用TextDecoration属性（推荐）

import { Text } from '@kit.ArkUI';

@Entry
@Component
struct StrikethroughExample {
  build() {
    Column() {
      Text('这是带删除线的文字')
        .textDecoration({
          type: TextDecorationType.LineThrough,  // 删除线类型
          color: Color.Red                       // 线条颜色（可选）
        })
        .fontSize(20)
        .fontColor(Color.Black)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

方法二：使用Decoration组件包装

import { Text, Decoration } from '@kit.ArkUI';

@Entry
@Component
struct DecorationExample {
  build() {
    Column() {
      Decoration() {
        Text('这也是带删除线的文字')
          .fontSize(20)
          .fontColor(Color.Black)
      }
      .decoration({
        type: TextDecorationType.LineThrough,
        color: Color.Blue
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

参数说明

  • type: 装饰线类型

    • TextDecorationType.LineThrough - 删除线
    • TextDecorationType.Underline - 下划线
    • TextDecorationType.Overline - 上划线
    • TextDecorationType.None - 无装饰线

  • color: 装饰线颜色（可选参数）

使用建议

  1. 方法一更简洁，适用于单个文本的删除线效果
  2. 方法二适用于需要对多个组件统一应用装饰效果的场景
  3. 可以通过.decoration()方法链式调用设置其他文本样式

这两种方法都能很好地实现文字删除线效果，根据具体场景选择合适的方式即可。

回到顶部