HarmonyOS-UIAbitity-Button——【坚果派-红目香薰】

​

摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 

目录

摘要

HarmonyOS-UIAbitity-Button

设置按钮样式

设置按钮点击事件

包含子组件

按钮常用场景

HarmonyOS-UIAbitity-Button

Button组件主要用来响应点击操作，可以包含子组件。

​

编辑

样式源码：

@Entry@Component

struct Index {

build() {

Row() {

Column() {

Text('登录页面').height(120).fontSize(50).fontColor('#3592C4')

TextInput({ placeholder: "请输入账号" })

.height(120)

.fontSize(50)

.borderStyle(BorderStyle.Solid)

.borderWidth(2)

TextInput({ placeholder: "请输入密码" })

.type(InputType.Password)

.height(120)

.fontSize(50)

.borderStyle(BorderStyle.Solid)

.borderWidth(2)

Button('登录', { type: ButtonType.Capsule, stateEffect: true })

.width('90%')

.height(80)

.fontSize(16)

.fontWeight(FontWeight.Medium)

.backgroundColor('#007DFF')

}.width('100%')

}

.width('100%')

.height('100%')

}

}

设置按钮样式

type用于定义按钮样式，示例代码中ButtonType.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。

我们可以设置多种样式的Button，除了Capsule可以以设置Normal和Circle：

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

设置按钮点击事件

可以给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。

​编辑​编辑

import router from '@ohos.router';

let msg: string = "Index 页面过来的数据，过来了代表登录成功，但未进行账号密码验证";

@Entry@Component

struct Index {

build() {

Row() {

Column() {

Text('登录页面').height(120).fontSize(50).fontColor('#3592C4')

TextInput({ placeholder: "请输入账号" })

.height(120)

.fontSize(50)

.borderStyle(BorderStyle.Solid)

.borderWidth(2)

TextInput({ placeholder: "请输入密码" })

.type(InputType.Password)

.height(120)

.fontSize(50)

.borderStyle(BorderStyle.Solid)

.borderWidth(2)

Button('登录', { type: ButtonType.Capsule, stateEffect: true })

.width('90%')

.height(80)

.fontSize(16)

.fontWeight(FontWeight.Medium)

.backgroundColor('#007DFF')

.onClick(() => {

router.pushUrl({

url: "pages/MyETS",

params: {

msg_info: msg

}

})

})

}.width('100%')

}

.width('100%')

.height('100%')

}

}

包含子组件

Button组件可以包含子组件，让您可以开发出更丰富多样的Button。

​

编辑

源码：

@Entry@Component

struct Index {

build() {

Row() {

Column() {

Button({ type: ButtonType.Circle, stateEffect: true }) {

Image($r('app.media.2'))

.width(200)

.height(400)

.borderRadius(90)

}

.width(420)

.height(620)

.backgroundColor(0x317aff)

}.width('100%')

}

.width('100%')

.height('100%')

}

}

 图片设置borderRadius后就会出现倒角的效果，这里的度数需要自己来掌握，一般情况下45就比较合适了，我这个是长图，不是方图，所以我写了个大度数，下面是45的效果：

​

编辑

两种效果还是挺明显的，看个人情况来选择即可。

按钮常用场景

显示文本或图标：在XML布局文件中，您可以使用Button元素来创建一个按钮，并为其分配一个唯一的ID。然后在Java代码中，您可以使用findViewById()方法获取该按钮对象，并使用setText()或setCompoundDrawables()方法设置按钮上的文本或图标。

添加点击事件监听器：要响应用户点击按钮，您需要为按钮添加一个点击事件监听器。您可以使用setOnClickListener()方法将一个OnClickListener接口的实现类对象设置为按钮的点击事件监听器。当用户点击按钮时，该实现类中的onClick()方法将被调用。

自定义样式：您可以使用XML布局文件中的style属性来设置按钮的样式，例如大小、颜色、背景图片等。您还可以使用主题（Theme）和主题资源（Theme.AppCompat或Theme.Material等）来定义自己的样式。

禁用按钮：为了防止用户误操作，您可以使用setEnabled()方法禁用按钮。当按钮被禁用时，用户将无法点击它。

响应长按事件：如果您希望在用户长按按钮时执行某些操作，可以使用setOnLongClickListener()方法添加一个长按事件监听器。当用户长按按钮时，该监听器中的onLongPress()方法将被调用。

添加自定义视图：您可以使用setCompoundDrawablesWithIntrinsicBounds()方法将自定义视图设置为按钮的图标。这允许您在按钮上放置其他自定义视图，例如圆形图片或文本标签。

​