1 常用組件
1、Button
Button是按鈕組件,通常用于響應(yīng)用戶的點擊操作,其類型包括膠囊按鈕、圓形按鈕、普通按鈕。Button當(dāng)做為容器使用時可以通過添加子組件實現(xiàn)包含文字、圖片等元素的按鈕
2 、單選框 Radio
Radio({ value: 'Radio1', group: 'radioGroup' })
.checked(false)
Radio({ value: 'Radio2', group: 'radioGroup' })
.checked(true)
3、切換按鈕(Toggle)
Toggle({ type: ToggleType.Checkbox, isOn: false })
Toggle({ type: ToggleType.Checkbox, isOn: true })
4、進度條(Progress)
Progress({ value: 24, total: 100, type: ProgressType.Linear })
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
.backgroundColor(Color.Black)
.style({ scaleCount: 20, scaleWidth: 5 }) // 設(shè)置環(huán)形有刻度進度條總刻度數(shù)為20,刻度寬度為5vp
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
.backgroundColor(Color.Black)
.style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 }) // 設(shè)置環(huán)形有刻度進度條寬度15,總刻度數(shù)為20,刻度寬度為5vp
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
.backgroundColor(Color.Black)
.style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 }) // 設(shè)置環(huán)形有刻度進度條寬度15,總刻度數(shù)為20,刻度寬度為3vp
5、文本顯示(Text/Span)
Text($r('app.string.module_desc'))
.baselineOffset(0)
.fontSize(30)
.border({ width: 1 })
.padding(10)
.width(300)
Text() {
Span('我是Span1,').fontSize(16).fontColor(Color.Grey)
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
Span('我是Span2').fontColor(Color.Blue).fontSize(16)
.fontStyle(FontStyle.Italic)
.decoration({ type: TextDecorationType.Underline, color: Color.Black })
Span(',我是Span3').fontSize(16).fontColor(Color.Grey)
.decoration({ type: TextDecorationType.Overline, color: Color.Green })
}
.borderWidth(1)
.padding(10)
6、文本輸入 (TextInput/TextArea)
TextArea({text:"我是TextArea我是TextArea我是TextArea我是TextArea"}).width(300)
常用控件 要學(xué)會自己去看控件常用的屬性,控件的二次封裝。