Button是按钮组件,通常用于响应用户的点击操作??商砑游谋?、图片子组件。
创建方式
第一种方式
Button("点击事件", {type:ButtonType.Normal, stateEffect: true})
.width(100)
.height(30)
第二种方式
Button() {
Text("子按钮")
}
.width(100)
.height(30)
按钮类型
Button有三种可选类型,分别为胶囊类型(Capsule)、圆形类型(Circle)和普通按钮(Normal),通过type来进行设置。
// 当类型设置为Circle/Capsule时,不支持borderRadius来重新设置圆角
Button({type: ButtonType.Circle/Capsule}) {
Text("子按钮")
}
.width(100)
.height(100)
自定义样式
- 设置边框圆角
Button("点击事件", {type:ButtonType.Normal})
.width(100)
.height(30)
.borderRadius(10)
- 设置文本样式
Button("点击事件", {type:ButtonType.Normal})
.width(100)
.height(30)
.fontWeight(900)// 加粗的样式
- 添加点击事件
Button("点击事件", {type:ButtonType.Normal, stateEffect: true})
.width(100)
.height(30)
.onClick(() => {
hilog.debug(0x0000, 'whzOS', '%{public}s', '点击事件触发')
})
.margin({left: 20})