HarmonyOS应用开发-基础组件，你学废了吗？

按钮（Button）

Button是按钮组件，通常用于响应用户的点击操作。

不同类型的按钮

按钮的类型：

• 胶囊按钮
• 圆形按钮
• 普通按钮

示例代码：

// 普通按钮
Button('文字', { type: ButtonType.Normal })
  // 设置圆角
  .borderRadius(8)
  .width(100)
  .height(40)
  .margin(10)

// 胶囊类型（默认）
Button('文字', { type: ButtonType.Capsule })
  .width(90)
  .height(40)
  .margin(10)

// 原型按钮
Button('文字', { type: ButtonType.Circle })
  .width(90)
  .height(90)
  .margin(10)

自定义按钮

自定义按钮，在按钮中设置图片+文字

// 自定义按钮，在按钮中设置图片+文字
Button({ type: ButtonType.Capsule }) {
  Row() {
    Image($r('app.media.icon')).width(20).height(40).margin({ left: 12 })
    Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
  }.alignItems(VerticalAlign.Center)
}
.borderRadius(8)
.width(90)
.height(40)
.margin(10)
.onClick(() => {
  console.info("点击事件")
})

实现效果：

单选框（Radio）

Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。
使用Radio({ value: ‘Radio1’, group: ‘radioGroup’ })

• value是单选框的名称
• group是单选框的所属群组名称
• checked属性可以设置单选框的状态，状态分别为false和true时，设置为true时表示单选框被选中

Row() {
  Radio({ value: 'Radio1', group: 'radioGroup' })
    .checked(true)
    .onChange((isChecked: boolean) => {
      if (isChecked) {
        //需要执行的操作
        promptAction.showToast({ message: 'Radio1' })
      }
    })
  Text('选项1')
    .fontSize(16)
    .margin({ left: 10 })
}.width('90%')

Row() {
  Radio({ value: 'Radio2', group: 'radioGroup' })
    .onChange((isChecked: boolean) => {
      if (isChecked) {
        //需要执行的操作
        promptAction.showToast({ message: 'Radio2' })
      }
    })
  Text('选项2')
    .fontSize(16)
    .margin({ left: 10 })
}.width('90%')

实现效果：

切换按钮（Toggle）

同Android中的swtich开关。
Toggle可以设置类型、是否选择。ToggleType为开关类型，包括Button、Checkbox和Switch；isOn为切换按钮的状态。

区别：

• 类型为Checkbox和Switch时，不可以包含子组件
• 类型为Button时，可以包含子组件，如包含Text文本等

切换事件，使用onChange设置切换事件

.onChange((isOn: boolean) => {
  if (isOn) {
    promptAction.showToast({ message: '选中' })
  }else {
    promptAction.showToast({ message: '未选中' })
  }
})

代码示例：

Row() {
  Toggle({ type: ToggleType.Button }) {
    Text('选项1')
      .fontColor('#182431')
      .fontSize(12)
  }.width(100)
  .margin({ right: 10 })

  Toggle({ type: ToggleType.Button }) {
    Text('选项2')
      .fontColor('#182431')
      .fontSize(12)
  }.width(100)
  .selectedColor(Color.Red)
}

Row() {
  Text('注册状态：').fontSize(14)
  Toggle({ type: ToggleType.Switch, isOn: false })
    // 点击事件
    .onChange((isOn: boolean) => {
      if (isOn) {
        promptAction.showToast({ message: '选中' })
      }
    })
}

Row() {
  Text('注册状态：').fontSize(14)
  Toggle({ type: ToggleType.Checkbox, isOn: true })
    // 点击事件
    .onChange((isOn: boolean) => {
      if (isOn) {
        promptAction.showToast({ message: '选中' })
      }else {
        promptAction.showToast({ message: '未选中' })
      }
    })

}

实现效果：

进度条（Progress）

Progress(options: {value: number, total?: number, type?: ProgressType})

创建type样式的进度条，其中value用于设置初始进度值，total用于设置进度总长度，type决定Progress样式。
ProgressType类型有：ProgressType.Linear（线性样式）、 ProgressType.Ring（环形无刻度样式）、ProgressType.ScaleRing（环形有刻度样式）、ProgressType.Eclipse（圆形样式）和ProgressType.Capsule（胶囊样式）

代码示例：

Progress({ value: 20, total: 100, type: ProgressType.Capsule })
  .width(200)
  .height(50)

Progress({ value: 10, total: 100, type: ProgressType.ScaleRing })
  .width(100)
  .height(100)
  .backgroundColor(Color.Black)
  .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 })
// 设置环形有刻度进度条宽度15，总刻度数为20，刻度宽度为5vp

// 从左往右，2号环形进度条
Progress({ value: 50, total: 150, type: ProgressType.Ring })
  .width(100)
  .height(100)
  .color(Color.Grey)    // 进度条前景色为灰色
  .style({ strokeWidth: 15})    // 设置strokeWidth进度条宽度为15.0vp

实现效果：

文本显示（Text）

文本显示是最常用，可以设置多个属性的组件。
代码示例：

Text('hello')
  .fontSize(20)
  .width('100%')
  .textAlign(TextAlign.Start)
  .padding(10)
  // 设置文字间距
  .letterSpacing(10)
  // 设置边框
  .border({ width: 1 })

实现效果：

在想不起来哪些属性可以设置时，可在开发工具上输入.，开发工具提示输入。

输入框（TextInput）

输入框的类型可设置为：Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式。
代码示例：

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct SecondPage {
  @State message: string = 'SecondPage'
  @State userName: string = ''
  @State password: string = ''

  build() {
    Row() {
      Column() {

        Text('hello')
          .fontSize(20)
          .width('100%')
          .textAlign(TextAlign.Start)
          .padding(10)
            // 设置文字间距
          .letterSpacing(10)
            // 设置边框
          .border({ width: 1 })

        Divider()

        TextInput({ placeholder: 'input your username' })
          .margin({ top: 20 })
          .onChange((value) => {
            this.userName = value;
          })
        TextInput({ placeholder: 'input your password' })
          .type(InputType.Password)
          .margin({ top: 20 })
          .onChange((value) => {
            this.password = value;
          })

        Button('提交')
          .width('90%')
          .margin({ top: 20 })
          .onClick(() => {
            promptAction.showToast({ message: 'username:' + this.userName + 'password:' + this.password })
          })


      }
      .width('100%')
    }
    .height('100%')
  }
}

实现效果：