按钮
Button 组件也是基础组件之一.和其他基础组件不一样的就是 Button 组件允许添加一个子组件来实现不同的展示样式
子组件
bash
Button() {
Column() {
Image($r("app.media.startIcon")).width(30).height(30)
Text("第一个")
}
}属性
type 类型
Capsule 胶囊类型按钮
Circle 圆形按钮
Normal 普通类型
fontSize 字体大小
fontColor 字体颜色
- Color.Red 此类的
fontWeight 字体粗细
- FontWeight.Bold 此类的
fongStyle 字体样式
- FontStyle.Italic 此类的
stateEffect 按压效果 (布尔值)
- true 或者 false
fontFamily(默认字体)
- HarmonyOS Sans
labelStyle 标签样式
bash
.labelStyle({
overflow: TextOverflow.Ellipsis, // 超出后是否隐藏
maxLines: 3, // 最大行数
minFontSize: 18, // 最小字体
maxFontSize: 28 // 最大字体
})buttonStyle
- 普通按钮 ButtonStyleMode.NORMAL 普通按钮 背景是灰色的
- 强调按钮 背景色是蓝的 ButtonStyleMode.EMPHASIZED
- 文本按钮 纯文本无背景色 ButtonStyleMode.TEXTUAL
bash
.buttonStyle(ButtonStyleMode.EMPHASIZED)controlSize
ControlSize.NORMAL 普通尺寸
ControlSize.SMALL 小尺寸
bash
.controlSize(ControlSize.NORMAL)role
警示按钮 颜色变红色 ButtonRole.ERROR
底色变成蓝色 ButtonRole.NORMAL
js
.role(ButtonRole.ERROR)事件
支持通用事件 比如 onClick
bash
.onClick(()=>{
console.log('点击了按钮')
})示例
基础版本
js
@Entry
@Component
struct Index6 {
build() {
Column() {
Row() {
Button("启动哈哈哈哈哈")/*
* type 类型
* 1. Capsule 胶囊类型按钮
* 2. Circle 圆形按钮
* 3. Normal 普通类型
*/
.type(ButtonType.Circle)
.fontSize(15)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontStyle(FontStyle.Italic)/*
* 是否启动按压效果
*/
.stateEffect(true)
.fontFamily('HarmonyOS Sans')
.labelStyle({
overflow: TextOverflow.Ellipsis,
maxLines: 3,
minFontSize: 18,
maxFontSize: 28
})/*
* 普通按钮 ButtonStyleMode.NORMAL 普通按钮 背景是灰色的
* 强调按钮 背景色是蓝的 ButtonStyleMode.EMPHASIZED
* 文本按钮 纯文本无背景色 ButtonStyleMode.TEXTUAL
*/
.buttonStyle(ButtonStyleMode.EMPHASIZED)/*
* 1. ControlSize.NORMAL 普通尺寸
* 2. ControlSize.SMALL 小尺寸
*/
.controlSize(ControlSize.NORMAL)/*
*
1. 警示按钮， 颜色变成红色
2. ButtonRole.NORMAL 底色变成蓝色
*/
.role(ButtonRole.ERROR)
.padding({
left: 5,
right: 5,
top: 10,
bottom: 10
})
.borderRadius(8)
.width(90)
.onClick(() => {
console.info("点击了")
})
.margin({
left: 20
})
}
}
}
}通过状态判断组件
js
@Entry
@Component
struct Index6 {
@State isLoading: boolean = false;
build() {
Column() {
if (this.isLoading) {
Row() {
Button() {
Column() {
LoadingProgress().width(20).height(20).color(0xFFFFFF)
Text("第一个哈哈哈")
}
} /*
* type 类型
* 1. Capsule 胶囊类型按钮
* 2. Circle 圆形按钮
* 3. Normal 普通类型
*/
.type(ButtonType.Normal)
.fontSize(15)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontStyle(FontStyle.Italic) /*
* 是否启动按压效果
*/
.stateEffect(true)
.fontFamily('HarmonyOS Sans')
.labelStyle({
overflow: TextOverflow.Ellipsis,
maxLines: 3,
minFontSize: 18,
maxFontSize: 28
}) /*
* 普通按钮 ButtonStyleMode.NORMAL 普通按钮 背景是灰色的
* 强调按钮 背景色是蓝的 ButtonStyleMode.EMPHASIZED
* 文本按钮 纯文本无背景色 ButtonStyleMode.TEXTUAL
*/
.buttonStyle(ButtonStyleMode.EMPHASIZED) /*
* 1. ControlSize.NORMAL 普通尺寸
* 2. ControlSize.SMALL 小尺寸
*/
.controlSize(ControlSize.NORMAL) /*
*
1. 警示按钮， 颜色变成红色
2. ButtonRole.NORMAL 底色变成蓝色
*/
.role(ButtonRole.ERROR)
.padding({
left: 5,
right: 5,
top: 10,
bottom: 10
})
.borderRadius(8)
.width(120)
.onClick(() => {
console.info("点击了")
this.isLoading = false;
})
.margin({
left: 20
})
}
} else {
Row() {
Button({ type: ButtonType.Circle, stateEffect: true }) {
LoadingProgress().width(20).height(20).color(0xFFFFFF)
}.width(55).height(55).backgroundColor(0x317aff).onClick(() => {
console.info("点击了")
this.isLoading = true;
})
Button({ type: ButtonType.Circle, stateEffect: true }) {
LoadingProgress().width(20).height(20).color(0xFFFFFF)
}
.width(55)
.height(55)
.margin({ left: 20 })
.backgroundColor(0xF55A42)
.onClick(() => {
console.info("点击了")
this.isLoading = true;
})
}
}
}
}
}