一 文本显示 (Text/Span)
Text是文本组件,通常用于展示用户视图,如显示文章的文字
// 可以直接输入,也可以导入字符串资源
Text('我是一个文本')
Text($r('app.string.module_desc'))
// 3种对齐方式
Text('左对齐')
.width('100%')
Text('居中')
.textAlign(TextAlign.Center)
.width('100%')
Text('右对齐')
.textAlign(TextAlign.End)
.width('100%')
//可以省略
Text('11111111111111111111111111111111111111111111')
.textOverflow({overflow:TextOverflow.Ellipsis})
.maxLines(1)
//可滚动
Text('11111111111111111111111111111111111111111111')
.textOverflow({overflow:TextOverflow.MARQUEE})
.maxLines(1)
// decoration 设置文本装饰器颜色
Text('hello')
.decoration({
type:TextDecorationType.LineThrough,
color:Color.Red
})
Text('hello')
.decoration({
type:TextDecorationType.Underline,
color:Color.Red
})
Text('hello')
.decoration({
type:TextDecorationType.Overline,
color:Color.Red
})
//复制
Text("这是一段可复制文本")
.fontSize(30)
.copyOption(CopyOptions.InApp)
// Span只能作为Text和RichEditor组件的子组件显示文本内容。
// 可以在一个Text内添加多个Span来显示一段信息,例如产品说明书、承诺书等
Text('我是Text') {
Span('我是Span')
}
.padding(10)
.borderWidth(1)
完整代码如下:
@Entry
@Component
struct Main{
build() {
Column(){
// 可以直接输入,也可以导入字符串资源
Text('我是一个文本')
Text($r('app.string.module_desc'))
// 3种对齐方式
Text('左对齐')
.width('100%')
Text('居中')
.textAlign(TextAlign.Center)
.width('100%')
Text('右对齐')
.textAlign(TextAlign.End)
.width('100%')
//可以省略
Text('11111111111111111111111111111111111111111111')
.textOverflow({overflow:TextOverflow.Ellipsis})
.maxLines(1)
//可滚动
Text('11111111111111111111111111111111111111111111')
.textOverflow({overflow:TextOverflow.MARQUEE})
.maxLines(1)
// decoration 设置文本装饰器颜色
Text('hello')
.decoration({
type:TextDecorationType.LineThrough,
color:Color.Red
})
Text('hello')
.decoration({
type:TextDecorationType.Underline,
color:Color.Red
})
Text('hello')
.decoration({
type:TextDecorationType.Overline,
color:Color.Red
})
//复制
Text("这是一段可复制文本")
.fontSize(30)
.copyOption(CopyOptions.InApp)
// Span只能作为Text和RichEditor组件的子组件显示文本内容。
// 可以在一个Text内添加多个Span来显示一段信息,例如产品说明书、承诺书等
Text('我是Text') {
Span('我是Span')
}
.padding(10)
.borderWidth(1)
}
.width('100%')
}
}
二 文本输入 (TextInput/TextArea)
//单行输入框
TextInput({placeholder:'我是提示'})
.width(300)
//多行
TextArea()
.width(300)
//设置默认类型
TextInput().type(InputType.Normal) // 正常
TextInput().type(InputType.Password) //密码