Text Component Setting Decorative Line Transparent Color Does Not Take Effect

Read the original article：Text Component Setting Decorative Line Transparent Color Does Not Take Effect

Text Component Setting Decorative Line Transparent Color Does Not Take Effect

Problem Description

When setting the decoration line color of the Text component to transparent (Color.Transparent) to control the visibility of the decoration line, the actual display matches the text color instead, failing to achieve the desired effect.
The problematic code is as follows:

@Entry
@Component
struct Index {
  @State selected: boolean = false

  build() {
    Column() {
      Row() {
        Text('Chinese')
          .fontSize('36fp')
          .fontColor(Color.Orange)
          .decoration({
            type: TextDecorationType.LineThrough,
            color: this.selected ? Color.Red : Color.Transparent,
          })
          .onClick(() => {
            this.selected = !this.selected
          })
          .textAlign(TextAlign.Center)
          .layoutWeight(1)
      }
      .width(200)
      .height(100)
      .justifyContent(FlexAlign.Center)
    }
    .padding({ top: 100 })
    .justifyContent(FlexAlign.Center)
  }
}

Background Knowledge

The Text component is used to display a piece of text. The decoration property can be used to set and adjust the color and style of the text decoration line, which includes five styles: single solid line, double solid line, dotted line, dashed line, and wavy line.

Troubleshooting Process

Since the default value of the color in the decoration property is Color.Transparent, to prevent developers from overlooking the color setting, the current specification defaults to setting the color to Color.Transparent, where the decoration line color follows the text color. Therefore, it is necessary to set the decoration line color value in string format, i.e., the hexadecimal value for transparent color "#00FFFFFF", to achieve a transparent decoration line effect.

Solution

Since the default value of the color attribute in the decoration property is Color.Transparent, to prevent developers from overlooking the setting of the color, the current specification sets the decoration line color to follow the text color when the color is set to Color.Transparent by default. Therefore, it is necessary to set the decoration line color value in string format, specifically the hexadecimal value for transparent color "#00FFFFFF," to achieve a transparent decoration line effect.
Example code is as follows:

Text('Chinese')
          .fontSize('36fp')
          .fontColor(Color.Orange)
          .decoration({
            type: TextDecorationType.LineThrough,
            color: this.selected ? Color.Red : '#00FFFFFF',
          })

Verification Result

This example supports API Version 20 Release and later versions.
This example supports HarmonyOS 6.0.0 Release SDK and later versions.
This example requires DevEco Studio 6.0.0 Release or later for building and running.

Written by Dogan Evci