鸿蒙Next开发中如何设置文本下划线

在鸿蒙Next开发中，如何给文本添加下划线样式？我尝试了Text组件的decoration属性，但设置underline后没有生效，请问正确的实现方式是什么？是否需要引入额外的样式库或使用特定的API？

2 回复

在鸿蒙Next中，给文本加下划线？简单！用TextDecoration的UNDERLINE属性就行，比如：

Text({ text: "看我带下划线！" })
  .decoration({ type: TextDecorationType.Underline })

搞定！代码一跑，文字下面就多了一条潇洒的横线，像给文字穿了条超短裙👗～

更多关于鸿蒙Next开发中如何设置文本下划线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next开发中，可以通过以下方式设置文本下划线：

方法一：使用TextDecoration样式属性

在ArkUI中，通过Text组件的decoration属性设置下划线：

Text('带下划线的文本')
  .decoration({
    type: TextDecorationType.Underline,  // 设置下划线
    color: Color.Black                   // 下划线颜色（可选）
  })

方法二：使用通用属性textDecoration

也可以通过通用属性方法设置：

Text('带下划线的文本')
  .textDecoration(TextDecoration.Underline)

完整示例代码

@Entry
@Component
struct UnderlineExample {
  build() {
    Column({ space: 20 }) {
      // 方法一：使用decoration对象
      Text('方法一：带下划线文本')
        .decoration({
          type: TextDecorationType.Underline,
          color: Color.Red
        })
      
      // 方法二：使用通用属性
      Text('方法二：带下划线文本')
        .textDecoration(TextDecoration.Underline)
        .fontColor(Color.Blue)
    }
    .width('100%')
    .padding(20)
  }
}

主要参数说明：

  • TextDecorationType.Underline：添加下划线
  • TextDecorationType.LineThrough：删除线
  • TextDecorationType.Overline：上划线
  • TextDecorationType.None：无装饰（默认值）

注意事项：

  1. 可以同时设置下划线颜色
  2. 该方法适用于ArkUI声明式开发范式
  3. 确保导入相关模块（通常会自动导入）

这是鸿蒙Next中设置文本下划线的标准方法，简单且易于使用。

回到顶部