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)





    }
  }
}
相关推荐
HarmonyOS_SDK1 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos
二二孚日2 小时前
自用华为ICT云赛道Big Data第六章知识点-分布式搜索服务ElasticSearch
大数据·华为
塞尔维亚大汉2 小时前
鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统
源码·harmonyos
别说我什么都不会2 小时前
【OpenHarmony】鸿蒙开发之Checksum
harmonyos
Fanmeang3 小时前
OSPF路由过滤
运维·网络·华为·ip·路由·ospf·路由过滤
周胡杰4 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶5 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶5 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
万少7 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
coder_pig20 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos