一. 官方文档

还是老规矩，先上官方文档——》Button

二.基本语法 

该组件有两种方法实现：

方法1： Button(options?: {type?: ButtonType, stateEffect?: boolean})

方法2： Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

接下来我们一起来深入了解一个Button的两种实现方法吧！！！

方法1：

                 Button(options?: {type?: ButtonType, stateEffect?: boolean})

 先来看看它的参数吧：

参数名	参数类型	必填	参数描述
type	ButtonType	否	描述按钮显示样式。 默认值：ButtonType.Capsule
stateEffect	boolean	否	按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。 默认值：true 说明：当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。

这按钮都没有内容的吗？？那它显示什么呢？？？ 

 

加的按钮哪去了？

这种方法实现的按钮我们又称“自定义按钮”，需要在其内部嵌套其他组件来实现。

下面我们再来看看吧————》 

 我们在其内部嵌套一个Image组件就实现啦！！！

Image组件还不熟练的可以去参考篇文章哦！！！

下面我们来看看他的第二种实现方法吧！！！ 

方法2： 

Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

这参数就比较符合逻辑了一个内容参数一个修饰参数。 

参数名	参数类型	必填	参数描述
label	ResourceStr	否	按钮文本内容。
options	{ type?: ButtonType, stateEffect?: boolean }	否	见方法1图标

需要注意一下哦：使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 

 来看一下它的使用吧： 

是不是非常容易上手啊！！！

接着我们再来看一下修饰按钮样式的ButtonType枚举：

名称	描述
Capsule	胶囊型按钮（圆角默认为高度的一半）。
Circle	圆形按钮。
Normal	普通按钮（默认不带圆角）。

说明

• 按钮圆角通过通用属性borderRadius设置（不支持通过border接口设置圆角），且只支持设置一个相同的圆角。
• 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为宽、高中较小值的一半。
• 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。
• 按钮文本通过通用文本样式进行设置。
• 设置颜色渐变需先设置backgroundColor为透明色。

 来看看你喜欢哪个按钮吧：

建议Circle（圆形按钮）不要作为文字按钮，显示效果真的很不好。一般可以作为圆形图标承载按钮。

三.属性

按钮特有的属性只有两个，相信大家看了文档肯定都已经悟了吧那我们在来看看点击事件吧！

名称	参数类型	描述
type	ButtonType	设置Button样式。 默认值：ButtonType.Capsule 从API version 9开始，该接口支持在ArkTS卡片中使用。
stateEffect	boolean	按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。 默认值：true 从API version 9开始，该接口支持在ArkTS卡片中使用。

.stateEffect(true)，添加该属性后就能看到按钮点击效果啦！！！

 onClick

onClick(event: (event?: ClickEvent) => void)

 我们接着上一篇TextInput组件，来将按钮输入框和文本框联动起来吧！！！

每点击按钮一次message的数值就增加10. 

 是不是这就将组件给连接起来啦！！！又学习了一遍事件有没有感觉已经将事件拿下了啊！！！

四.语录 

坚持就是最好的投资，只有坚持不懈，才能让自己的才华得到最好的展现和认可。

 今天的你有没有还在继续坚持啊？？？

加油！！！