import { LengthMetrics, LengthUnit } from '@kit.ArkUI'
import Constants from '../../constants/Constants'
@Entry
@Component
@Preview
// 文本介绍
struct MyTextPage {
build() {
Column() {
// 普通文本加载
Text("这是一段文本")
// 通过引用Resource 资源方式进行文本加载
Text($r('app.string.Home_title'))
// 进行文本的修饰
Text($r('app.string.Home_title'))
.fontSize(16)
.fontColor(Color.Red)//设置文本颜色
.textAlign(TextAlign.Center) //居中对齐
// 一段多个文本样式的拼接
Text() {
Span("这是一段文本")
.fontSize(16)
.fontColor(Color.Yellow)
Span("彩色的文本")
.fontSize(18)
.fontColor(Color.Red)
Span("文本")
.fontSize(16)
.fontColor(Color.Black)
}
// 创建一个Text组件并设置多种字体相关样式
Text('Hello HarmonyOS !!!')
.fontColor(Color.Red)// 设置字体颜色
.fontSize(24)// 设置字体的大小
.fontStyle(FontStyle.Italic)// 设置字体为斜体
.fontWeight(FontWeight.Bold)// 设置字体加粗
.font({
size: 24,
weight: FontWeight.Bold,
family: 'Arial',
style: FontStyle.Italic,
})// 可以直接设置font的,
.fontFamily('Arial')// 设置文本的字体为Arial
.maxFontSize(28)//设置最大的字体
.minFontSize(12)// 设置最小的字体
.padding(10)// 设置内边距
.backgroundColor(Color.Blue)// 设置背景颜色
.border({ width: 2, color: Color.Black })// 设置边框大小&颜色
.margin(10) // 设置外边距
// 这里我们实战一个页面, 隐私政策,用户协议多使用到的
Text() {
Span("欢迎来到德莱联盟")
.fontColor(Color.Black)
.fontSize(16)
Span("<用户协议>")
.fontColor(Color.Red)
.fontSize(16)
.onClick(() => {
console.log("点击了用户协议")
})
Span("与")
.fontColor(Color.Black)
.fontSize(16)
Span("<隐私政策>")
.fontColor(Color.Red)
.fontSize(16)
.onClick(() => {
console.log("点击了隐私政策")
})
Span("知了爱学.The Benefits of Reading Books Regularly Reading escape from reality, allowing us to recharge and reunification skills and enhances ")
.fontColor(Color.Black)
.fontSize(16)
}
.padding(10)
.margin(10)
.lineHeight(30)// 设置行高
.textIndent(20) // 首行缩进
.wordBreak(WordBreak.BREAK_ALL) //单词展示的方式, 可以截取换行,也可以末尾换行展示, 单词的完整性
.lineSpacing(new LengthMetrics(10, LengthUnit.VP)) // 行间距
.letterSpacing(2)// 字母之间的间隔
// 设置文本的装饰效果
Text("知了爱学.The Benefits of Reading Books Regularly Reading escape from reality ")
.textCase(TextCase.UpperCase) // 设置文本大写
.decoration({
type: TextDecorationType.Underline, // 装饰线
color: Color.Green, //颜色
style: TextDecorationStyle.DASHED, //线的虚线
})
.textShadow({
color: Color.Gray, // 阴影的颜色
radius: 5, // 阴影的模糊半径
offsetX: 5, // 阴影偏移
offsetY: 5,
})
.baselineOffset(10) // 基线的偏移量
.fontSize(24)
// 文本的截取展示
Text("知了爱学.The Benefits of Reading Books Regularly Reading escape from reality")
.maxLines(1)
.textOverflow({
overflow: TextOverflow.Ellipsis // 省略号的方式进行展示, 或者直接截断
})
.ellipsisMode(EllipsisMode.CENTER) //
.lineBreakStrategy(LineBreakStrategy.BALANCED) // GREEDY 保证单词的完整性 BALANCED 保证每行一样
}
.width(Constants.FULL_PERCENT)
.height(Constants.FULL_PERCENT)
}
}
自动识别文本内的手机号,url.地址,时间,邮箱.需要真机来测试
@State phoneNumber:string = "18472636677"
@State email: string = "12321312@qq.com"
@State url: string = 'https://www.yjbys.com/lizhi/wenzhang/1108519.html'
@State address: string = '北京市天安门广场'
@State dateTime: string = "2024-10-28 19:00:00"
build() {
Column(){
Text(this.phoneNumber)
.fontSize(20)
.copyOption(CopyOptions.LocalDevice)
.enableDataDetector(true) // 启动数据检测功能, 需要真机展示该效果
.dataDetectorConfig({
types: [TextDataDetectorType.PHONE_NUMBER, TextDataDetectorType.EMAIL, TextDataDetectorType.EMAIL,TextDataDetectorType.ADDRESS,TextDataDetectorType.DATE_TIME],
onDetectResultUpdate:(result: string) => {
console.log(result)
}
})
}
名称 |
参数类型 |
描述 |
textAlign |
TextAlign |
设置文本段落在水平方向的对齐方式 默认值:TextAlign.Start |
textOverflow |
TextOverflow |
设置文本超长时的显示方式。默认值:{overflow: TextOverflow.Clip} |
maxLines |
number |
设置文本段落在水平方向的对齐方式 默认值:TextAlign.Start |
lineHeight |
string / number /[Resource] |
设置文本段落在水平方向的对齐方式 默认值:TextAlign.Start |
decoration |
{ type: TextDecorationType, color?: ResourceColor } |
设置文本装饰样式及其颜色。默认值:{type: TextDecorationType.None,color:Color.Black} |
baselineOffset |
number /string |
设置文本基线的偏移量,默认值0。 |
letterSpacing |
number /string |
设置文本字符间距。 |
minFontSize |
number / string / [Resource] |
设置文本最小显示字号。需配合maxFontSize以及maxline或布局大小限制使用,单独设置不生效。 |
maxFontSize |
number /string |
设置文本最大显示字号。需配合minFontSize以及maxline或布局大小限制使用,单独设置不生效。 |
textCase |
TextCase |
设置文本大小写。默认值:TextCase.Normal |
copyOption |
CopyOptions |
组件支持设置文本是否可复制粘贴。默认值:CopyOptions.None设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice,长按文本,会弹出文本选择菜单,可选中文本并进行复制、全选操作 |