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})
      }
    }
  }
}
相关推荐
li理2 小时前
鸿蒙Image Kit深度解析:从图片解码到高级特效处理
harmonyos
li理2 小时前
鸿蒙相机开发中篇:自定义 UI 与拍摄控制
harmonyos
duandashuaige3 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
misty youth5 小时前
配置openguass 教程(自存)
数据库·ubuntu·华为·openguass
鸿蒙小白龙7 小时前
OpenHarmony 与 HarmonyOS 的 NAPI 开发实战对比:自上而下与自下而上的差异解析
harmonyos·鸿蒙·鸿蒙系统·open harmony
喵手8 小时前
【参赛心得】从“碰一碰”到“服务流转”:HarmonyOS创新赛金奖作品“智游文博”全流程复盘!
华为·harmonyos·鸿蒙应用开发·1024征文
鸿蒙小白龙9 小时前
OpenHarmony平台大语言模型本地推理:llama深度适配与部署技术详解
人工智能·语言模型·harmonyos·鸿蒙·鸿蒙系统·llama·open harmony
安卓开发者9 小时前
鸿蒙NEXT Wear Engine开发实战:手机侧应用如何调用穿戴设备能力
华为·智能手机·harmonyos
Damon小智9 小时前
仓颉 Markdown 解析库在 HarmonyOS 应用中的实践
华为·typescript·harmonyos·markdown·三方库
ZIM学编程11 小时前
把握鸿蒙生态红利:HarmonyOS 应用开发学习路径与实战课程推荐
学习·华为·harmonyos