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)





    }
  }
}
相关推荐
别说我什么都不会20 分钟前
【OpenHarmony】鸿蒙开发之Jmustache
harmonyos
塞尔维亚大汉24 分钟前
鸿蒙内核源码分析(文件系统篇) | 用图书管理说文件系统
源码·harmonyos
塞尔维亚大汉4 小时前
鸿蒙内核源码分析(忍者ninja篇) | 都忍者了能不快吗
源码·harmonyos
keepDXRcuriosity5 小时前
鸿蒙应用开发课设——鸿蒙青藤社
harmonyos·鸿蒙
kymjs张涛5 小时前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
Georgewu16 小时前
【HarmonyOS】鸿蒙应用开发Text控件常见错误
harmonyos
Georgewu17 小时前
【HarmonyOS】富文本编辑器RichEditor详解
harmonyos
zhanshuo1 天前
鸿蒙应用调试与测试实战全指南:高效定位问题,性能优化必备技巧+实用代码示例
harmonyos
万少1 天前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
网络小白不怕黑1 天前
华为设备 QoS 流分类与流标记深度解析及实验脚本
网络·华为