48.HarmonyOS鸿蒙系统 App(ArkUI)常用组件的使用

48.HarmonyOS鸿蒙系统 App(ArkUI)常用组件的使用

按钮触发事件

toast信息提示

单选按钮

复选框

切换按钮，开关按钮

进度条

textbox,textinput,TextArea文本输入框

气泡提示

import prompt from '@ohos.prompt';
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State handlePopup: boolean = false
  build() {
    Column()
    {
      Row(){
        Text('常用组件的使用').fontSize(38).fontColor(Color.White)
      }.backgroundColor(Color.Blue)
      Row(){
        Text('文本组件').fontSize(38).fontColor(Color.White)
          .align(Alignment.Center)
      }.backgroundColor(Color.Blue)
      Row(){
        Button('按钮组件')
          .fontSize(32)
          .fontColor(Color.White)
          .onClick(()=>{
          promptAction.showToast({
            message: "默认Toast提示信息显示"
          })
        })
        Button('按钮组件2')
          .fontSize(32)
          .fontColor(Color.White)
          .onClick(()=>{
            promptAction.showToast({
              message: "参数配置toast显示", // 显示文本
              duration: 3000,              // 显示时长，3秒
              bottom: 500
            })
          })
      }.backgroundColor(Color.Blue)
      Row(){
        Radio({ value: 'Radio1', group: 'radioGroup' })
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            if(isChecked) {
              // 切换
              promptAction.showToast({ message: '单选1' })
            }
          })
        Radio({ value: 'Radio2', group: 'radioGroup' })
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            if(isChecked) {
              // 切换
              promptAction.showToast({ message: '单选2' })
            }
          })
        Radio({ value: 'Radio3', group: 'radioGroup' })
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            if(isChecked) {
              // 切换
              promptAction.showToast({ message: '单选3' })
            }
          })
      }.backgroundColor(Color.Green)
      Row()
      {
        Text('单选按钮')
      }.backgroundColor(Color.Green)
      Row()
      {
        Toggle({ type: ToggleType.Checkbox, isOn: false })
 
        Text('复选框，切换按钮1')
      }
      Row()
      {
        Toggle({ type: ToggleType.Checkbox, isOn: true })
        Text('复选框，切换按钮2')
      }
      Row()
      {
        Toggle({ type: ToggleType.Switch, isOn: false })
        Text('开关按钮1')
        Toggle({ type: ToggleType.Switch, isOn: true })
        Text('开关按钮2')
      }
      Row(){
        Progress({ value: 24, total: 100, type: ProgressType.Linear })
        Text('进度条')
      }
      Row(){
        Text('类别:')
        TextInput({text:'文本输入信息'}).backgroundColor(Color.Yellow)
 
      }
      Row(){
        Text('专业:')
        TextArea({text:'TextArea信息可以自动换行，。。。。。。。。。。。，' +
        '非常方便，非常有用'}).backgroundColor(Color.Orange)
 
      }
      Row(){
        Button('气泡提示')
          .onClick(()=>{
          this.handlePopup = !this.handlePopup
 
        })
          .bindPopup(this.handlePopup, {
          message: '这是气泡提示信息',
        })
       }.backgroundColor(Color.Orange)
 
 
 
 
 
    }
  }
}