HarmonyOS 开发基础(五)Button

HarmonyOS 开发基础(五)Button

typescript 复制代码
@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        // Button:ArkUI 的基础组件 按钮组件
        // label 参数:文字型按钮
        Button('我是按钮')
          // width:属性方法,设置组件的宽度
          .width(300)
          // height:属性方法,设置组件的高度
          .height(50)
          // fontSize:属性方法,设置字体大小
          .fontSize(20)
          // type:属性方法,设置按钮类型
          .type(ButtonType.Normal)
          // onClick:组件事件,当点击按钮时触发
          .onClick(() => {
            console.log('我点击了按钮')
          })


        // Row:ArkUI 的基础组件 行组件
        // 将 Button 按钮放到 Row 行中,对 Row 进行位置调动
        Row(){
          // 自定义按钮,在 Button 内嵌其他组件
          Button(){
            // 内嵌 Image 组件
            Image($r('app.media.icon'))
              // width:属性方法,设置组件的宽度
              .width(100)
                // height:属性方法,设置组件的高度
              .height(100)
          }
        }
        // width:属性方法,设置组件的宽度
        .width('100%')
        // justifyContent:属性方法,设置对齐状态
        .justifyContent(FlexAlign.Center)
        // margin:属性方法,设置外边距
        .margin({top: 50})
      }
    }
  }
}
相关推荐
爱笑的眼睛112 小时前
深入探讨HarmonyOS ArkTS中的日期时间处理技巧
华为·harmonyos
CC__xy8 小时前
《解决界面交互痛点:WaterFlow 瀑布流、双层嵌套滚动、键盘避让与跨 Ability 跳转实践》
harmonyos
90后的晨仔10 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
ifeng091811 小时前
HarmonyOS分布式任务调度——跨设备智能任务分配与迁移
分布式·华为·harmonyos
路光.15 小时前
React中Suspense的分包实践
前端·react.js·typescript
鸿蒙小白龙16 小时前
OpenHarmony蓝牙技术全解析:从设备发现到数据传输的完整流程
harmonyos·鸿蒙·鸿蒙系统·open harmony
shenshizhong18 小时前
鸿蒙HDF框架源码分析
前端·源码·harmonyos
宇宙最强的无天佛祖21 小时前
鸿蒙开发中快速获取相册图片的缩略图
harmonyos
冰冷的bin1 天前
【Harmony】鸿蒙相机拍照使用简单示例
数码相机·华为·harmonyos
爱笑的眼睛111 天前
HarmonyOS RemoteWindow远程窗口组件的分布式能力深度解析
华为·harmonyos