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é)會自己去看控件常用的屬性，控件的二次封裝。