鸿蒙移动应用开发项目式教程课件 项目2-数字云图书馆展示页-任务2-4 Button组件的使用

Button组件的使用

创建按钮Button是按钮组件，通常用于响应用户的点击操作。Button作为容器使用时，可以通过添加子组件实现包含文字、图片等元素的按钮。任务导入知识解析学以致用课堂小结课后拓展1.1Button组件

Button组件通过调用接口来创建，接口调用有以下两种形式。

（1）创建不包含子组件的按钮。Button(label?:ResourceStr,options?:{type?:ButtonType,stateEffect?:boolean})

其中，label用于设置按钮文字，type用于设置按钮类型，stateEffect用于设置按钮是否开启点击效果。示例代码如下，效果如图所示。按钮中不包含子组件的效果

创建按钮

（2）创建包含子组件的按钮。任务导入知识解析学以致用课堂小结课后拓展1.1Button组件Button只支持包含一个子组件，子组件可以是基础组件或者容器组件。示例代码如下，效果如图所示。Button(options?:{type?:ButtonType,stateEffect?:boolean})按钮中包含子组件的效果

设置按钮类型Button可设置3种按钮类型，分别为胶囊按钮（Capsule）、圆形按钮（Circle）和普通按钮（Normal），可通过type进行设置。任务导入知识解析学以致用课堂小结课后拓展1.1Button组件

（1）胶囊按钮

胶囊按钮（默认类型）的圆角自动设置为高度的一半，示例代码如下，不支持通过borderRadius属性重新设置圆角。效果如图所示。胶囊按钮

设置按钮类型

（2）圆形按钮。

圆形按钮如图所示，示例代码如下，不支持通过borderRadius属性重新设置圆角。任务导入知识解析学以致用课堂小结课后拓展1.1Button组件圆形按钮

设置按钮类型

（3）普通按钮。

普通按钮默认圆角为0，效果如图所示，示例代码如下，支持通过borderRadius属性重新设置圆角。任务导入知识解析学以致用课堂小结课后拓展1.1Button组件普通按钮

自定义按钮样式

除了能够设置按钮类型外，也可以自定义按钮样式，自定义按钮样式的4种方式。1．设置边框弧度

使用通用属性来自定义按钮样式。通过borderRadius属性设置按钮边框弧度的示例代码如下，效果如图所示。任务导入知识解析学以致用课堂小结课后拓展1.2自定义按钮样式设置边框弧度

自定义按钮样式2．设置文本样式

通过添加文本样式属性设置按钮文本样式的示例代码如下，效果如图所示。任务导入知识解析学以致用课堂小结课后拓展设置文本样式1.2自定义按钮样式

自定义按钮样式3．设置背景颜色

添加backgroundColor属性设置按钮背景颜色的示例代码如下，效果如图所示。任务导入知识解析学以致用课堂小结课后拓展创建功能型按钮4．创建功能型按钮为删除操作创建一个按钮的示例代码如下，效果如图所示。设置背景颜色1.2自定义按钮样式

为按钮添加事件Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为。onClick为点击事件，当组件