Text是文本組件似袁，通常用于展示用戶視圖洞辣，如顯示文章的文字。具體用法請參考Text昙衅。
創(chuàng)建文本
- string字符串
Text('string文本')
- 引用Resource資源
資源引用類型可以通過$r創(chuàng)建Resource類型對象扬霜，文件位置為/resources/base/element/string.json；/resources/zh_CN/element/string.json 語言包里可重寫上面json文件
Text($r('app.string.module_desc'))
添加子組件
Span只能作為Text和RichEditor組件的子組件顯示文本內(nèi)容而涉≈浚可以在一個Text內(nèi)添加多個Span來顯示一段信息，例如產(chǎn)品說明書啼县、承諾書等材原。
- 創(chuàng)建Span。
Span組件需要寫到Text組件內(nèi)季眷，單獨(dú)寫Span組件不會顯示信息余蟹，Text與Span同時配置文本內(nèi)容時，Span內(nèi)容覆蓋Text內(nèi)容子刮。
Text('不會顯示的文本'){
Span("文本")
}.backgroundColor(Color.Red)
- 設(shè)置文本裝飾線及顏色客叉。
通過decoration設(shè)置文本裝飾線及顏色。
Text(){
Span('span1').decoration({
type: TextDecorationType.LineThrough, // 刪除線
color: Color.Red
})
}
Text(){
Span('span1').decoration({
type: TextDecorationType.Underline, // 下劃線
color: Color.Red
})
}
Text(){
Span('span1').decoration({
type: TextDecorationType.Overline, // 上劃線
color: Color.Red
})
}
- 通過textCase設(shè)置文字一直保持大寫或者小寫狀態(tài)话告。
Text(){
Span("i am SM").textCase(TextCase.LowerCase) // 小寫
}
Text(){
Span("i am SM").textCase(TextCase.UpperCase) // 大寫
}
- 添加事件兼搏。
由于Span組件無尺寸信息，事件僅支持添加點(diǎn)擊事件onClick沙郭。
Text(){
Span('點(diǎn)擊').onClick(()=>{
console.log('點(diǎn)擊');
})
}
自定義文本樣式
- 通過textAlign屬性設(shè)置文本對齊樣式佛呻。
Text('左對齊').textAlign(TextAlign.Start).width(300).backgroundColor(Color.Red)
Text('居中對齊').textAlign(TextAlign.Center).width(300).backgroundColor(Color.Red)
Text('靠右對齊').textAlign(TextAlign.End).width(300).backgroundColor(Color.Red)
- 通過textOverflow屬性控制文本超長處理，textOverflow需配合maxLines一起使用（默認(rèn)情況下文本自動折行）病线。
Text('sdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdf')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)
- 通過lineHeight屬性設(shè)置文本行高吓著。
Text('sdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdfsdafasdfasdfasdfasdfasdfasdfasdfasdfasfdasdf')
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)
.lineHeight(30)
- 通過decoration屬性設(shè)置文本裝飾線樣式及其顏色鲤嫡。
Text('刪除線').decoration({
type: TextDecorationType.LineThrough,
color: Color.Red
})
Text('下劃線').decoration({
type: TextDecorationType.Underline,
color: Color.Red
})
Text('上劃線').decoration({
type: TextDecorationType.Overline,
color: Color.Red
})
- 通過baselineOffset屬性設(shè)置文本基線的偏移量。
Text('This is the text content with baselineOffset 0.')
.baselineOffset(-10)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
.margin(5)
- 通過letterSpacing屬性設(shè)置文本字符間距绑莺。
Text('sadfasdfaasdfas')
.letterSpacing(10)
- 通過copyOption屬性設(shè)置文本是否可復(fù)制粘貼暖眼。
Text('sadfasdfaasdfas')
.letterSpacing(10)
.copyOption(CopyOptions.InApp)
-- 添加事件
Text('sadfasdfaasdfas')
.letterSpacing(10)
.copyOption(CopyOptions.InApp)
.onClick((e)=>{
console.log('被點(diǎn)擊');
})
- 添加邊框
Text('添加邊框')
.border({
width: 2,
color: Color.Red,
style: BorderStyle.Dotted
})
Text('添加左右邊框')
.border({
width: {
left: 1,
right: 2
},
color:{
left: Color.Red,
right: Color.Blue
},
style: {
left: BorderStyle.Dotted,
right: BorderStyle.Solid
}
})
- 設(shè)置圓角
Text('圓角').border({
color: Color.Red,
style: BorderStyle.Solid,
width: 1
}).width(100).textAlign(TextAlign.Center)
.borderRadius(20)
Text('圓角').border({
color: Color.Red,
style: BorderStyle.Solid,
width: 1
}).width(100).textAlign(TextAlign.Center)
.borderRadius({
topLeft: 10,
bottomRight: 10
})
Text("圓形")
.width(100).height(100)
.border({
color: Color.Red,
style: BorderStyle.Solid,
width: 1
}).textAlign(TextAlign.Center)
.borderRadius(50)
- 背景圖
Text('背景圖')
.width(100).height(100)
.backgroundColor(Color.Red)
.backgroundImage($r('app.media.app_icon'), ImageRepeat.NoRepeat)
.backgroundImagePosition({
x: 10,
y: 20
})
// .backgroundImagePosition(Alignment.Center) // 居中
.backgroundImageSize(ImageSize.Contain)
