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·鸿蒙
脑子缺根弦2 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳11 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼15 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
DC_BLOG17 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证
江湖有缘1 天前
基于华为欧拉系统安装FileGator文件管理器
华为
小周学学学1 天前
zabbix以SNMP(V2C)监控网络设备,以华为设备为例
服务器·华为·zabbix