【鸿蒙软件开发】ArkTS常用组件之Button |
您所在的位置:网站首页 › 华为鸿蒙系统状态栏怎么加文字 › 【鸿蒙软件开发】ArkTS常用组件之Button |
文章目录
前言一、创建按钮1.1 Button创建接口介绍1.2 创建正常的按钮,不包括子组件1.3 创建正常的按钮,包括子组件1.4 按钮的不同样式胶囊按钮(默认类型)圆形按钮普通按钮
二、添加事件2.1 .onClick事件添加事件
三、什么时候使用.属性,什么时候用{}3.1 {}什么时候用.属性什么时候用
总结
前言
Button是按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。 一、创建按钮 1.1 Button创建接口介绍Button通过调用接口来创建,接口调用有以下两种形式: 创建不包含子组件的按钮。 Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })该接口用于创建不包含子组件的按钮,其中label用来设置按钮文字,type用于设置Button类型,stateEffect属性设置Button是否开启点击效果。 1.2 创建正常的按钮,不包括子组件我们通过参数1设置上面的字,下一个参数设置type和stateEffect,在他下面使用.属性可以设置其属性 Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) .backgroundColor(0x317aff) .width(90) .height(40)其中: .borderRadius为设置圆角 .backgroundColor(0x317aff) 为设置背景颜色 .width(90) .height(40) 为设置按钮的大小 创建包含子组件的按钮。他没有参数1,即上面的字 Button(options?: {type?: ButtonType, stateEffect?: boolean})示例代码如下: Button({ type: ButtonType.Normal, stateEffect: true }) { Row() { Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 }) Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) }.alignItems(VerticalAlign.Center) }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)Row()为布局,即水平布局 Image为创建图片控件 Text为创建字控件 其中.margin({ left: 12 })为外边距左边12 .fontSize(12)为字体大小 .fontColor(0xffffff)为字体颜色 疑问:为什么他们可以连续地这样写.属性.属性 这样其实和.属性 换行 .属性是一样的,不要误解! .alignItems(VerticalAlign.Center)在后面讲解布局的时候会到来! 1.4 按钮的不同样式设置按钮类型 Button有三种可选类型,分别为Capsule(胶囊类型)、Circle(圆形按钮)和Normal(普通按钮),通过type进行设置。 我们只需要指定type参数即可改变样式 胶囊按钮(默认类型)此类型按钮的圆角自动设置为高度的一半,不支持通过borderRadius属性重新设置圆角。 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(40)此类型按钮为圆形,不支持通过borderRadius属性重新设置圆角。 Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(90)此类型的按钮默认圆角为0,支持通过borderRadius属性重新设置圆角。 Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) .backgroundColor(0x317aff) .width(90) .height(40)Button组件通常用于触发某些操作,可以绑定onClick事件来响应点击操作后的自定义行为。 添加事件只需要像属性一样在后面写.onClick(执行函数)即可 Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .onClick(()=>{ console.info('Button onClick') })当你需要在这个控件下面添加子类的时候,你需要加{} 例如: 那么就是与{}相对的了,只要不是子类的范围就可以使用。 比如属性,事件… 总结本节课主要是讲解了Button的基础使用和Button事件的基础使用,这是非常easy的!!! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |