首页 > 编程笔记 > 通用技能 阅读:5

鸿蒙Text组件的用法(附带实例)

Text 组件用于显示一段文本,可以包含 Span 等子组件。

下表罗列了 Text 组件的属性:

属性名称 属性描述
textAlign 设置文本段落在水平方向的对齐方式。
textOverflow 设置文本超长时的显示方式。默认值为 {overflow: TextOverflow.Clip}。
maxLines 设置文本的最大行数。
lineHeight 设置文本的行高。设置值不大于 0 时,不限制文本行高,自适应字体大小。
decoration 设置文本装饰线样式及其颜色。
baselineOffset 设置文本基线的偏移量,默认值为 0。
letterSpacing 设置文本字符间距。
minFontSize 设置文本最小显示字号。
maxFontSize 设置文本最大显示字号。
textCase 设置字母的大小写。
copyOption 组件支持设置文本是否可复制粘贴。
draggable 设置选中文本的拖曳效果。
wordBreak 设置断行规则。

Text 组件的示例代码如下:
Column(){
    Text("君不见,黄河之水天上来,奔流到海不复回, Don't you see, the water of the Yellow River comes from the sky and flows to the sea without coming back ")
    .textAlign(TextAlign.Center)
    /*
    * TextAlign.Start            // 水平对齐首部
    * TextAlign.Center           // 水平居中对齐
    * TextAlign.End              // 水平对齐尾部
    * TextAlign.JUSTIFY          // 双端对齐
    */
    .textOverflow({
        overflow:TextOverflow.Ellipsis
    })
    /*
    * overflow:TextOverflow.None          // 文本超长时,按最大行截断显示。此时采用默认属性
    * overflow:TextOverflow.Clip          // 文本超长时,按最大行截断显示
    * overflow:TextOverflow.Ellipsis      // 文本超长时,显示不长的文本用省略号代替
    * overflow:TextOverflow.MARQUEE       // 文本超长时,以跑马灯的方式显示
    */
    .maxLines(2)                       // 设置文本的最大行数
    .lineHeight(35)                    // 设置文本的行高
    .decoration({
        type:TextDecorationType.Underline,
        color:Color.Green
    })
    /*
    * type: 样式
    * TextDecorationType.Underline    // 文字用下画线修饰
    * TextDecorationType.LineThrough  // 穿过文本的修饰线
    * TextDecorationType.Overline     // 文字用上画线修饰
    * TextDecorationType.None         // 不使用文本装饰线
    */
    .letterSpacing(5)                  // 设置文本字符间距
    .textCase(TextCase.UpperCase)      // 设置字母大小写
    /*
    * 设置字母大小写
    * TextCase.Normal          // 保持字母原有大小写
    * TextCase.LowerCase        // 字母采用全小写
    * TextCase.UpperCase        // 字母采用全大写
    */
    .copyOption(
        CopyOptions.InApp
    )
    /*
    * 组件支持设置文本是否可复制粘贴
    * CopyOptions.None         // 不支持复制
    * CopyOptions.InApp         // 支持应用内复制
    * CopyOptions.LocalDevice   // 支持设备内复制
    * CopyOptions.CROSS_DEVICE  // 支持跨设备复制
    */
    .draggable(true)                   // 设置选中文本的拖曳效果
    .fontSize(30)                      // 设置字体大小
}

Text 组件的示例效果如下图所示:


图 1 Text组件的示例效果

相关文章