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)





    }
  }
}
相关推荐
熊猫钓鱼>_>1 分钟前
【案例实战】鸿蒙分布式智能办公应用的架构设计与性能优化
分布式·华为·harmonyos
鸿蒙小白龙1 小时前
Openharmony应用开发之Ability异常退出与UIAbility数据备份开发实战
harmonyos·鸿蒙·鸿蒙系统·open harmony
Damon小智1 小时前
RedPlayer 视频播放器在 HarmonyOS 应用中的实践
音视频·harmonyos·鸿蒙·小红书·三方库·redplayer
猫林老师13 小时前
HarmonyOS分布式硬件共享:调用手机摄像头的手表应用
华为·交互·harmonyos
前端世界17 小时前
HarmonyOS应用开发指南:Toast无法显示的完整排查流程与实战案例
华为·harmonyos
安卓开发者20 小时前
鸿蒙NEXT Wear Engine穿戴侧应用开发完全指南
ubuntu·华为·harmonyos
安卓开发者20 小时前
鸿蒙Next振动开发指南:打造沉浸式触觉反馈体验
华为·harmonyos
Devil枫20 小时前
HarmonyOS屏幕方向适配指南
华为·harmonyos
li理1 天前
鸿蒙Image Kit深度解析:从图片解码到高级特效处理
harmonyos
li理1 天前
鸿蒙相机开发中篇:自定义 UI 与拍摄控制
harmonyos