ArkUI-按钮
舟率率 12/6/2023 ArkUI
# arkts-common-components-button.md
- 按钮类型:胶囊,圆形,普通
- 按钮背景色
- 自定义样式:按钮边框弧度
- 悬浮按钮:在可以滑动的界面，滑动时按钮始终保持悬浮状态
# 案例一
let MarLeft: Record<string, number> = { 'left': 20 }
@Entry
@Component
struct radialGradientDemo {
build() {
Column() {
// label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果
Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.width(90)
.height(40)
// 胶囊按钮（默认类型）
// 此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。
Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(40)
.margin(20)
// 圆形按钮
// 此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角
Button('Circle', { type: ButtonType.Circle, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(90)
.margin(20)
// 自定义样式
// 使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。
Button('circle border', { type: ButtonType.Normal })
.borderRadius(20)
.height(40)
.margin(20)
// 通过添加文本样式设置按钮文本的展示样式
// 添加backgroundColor属性设置按钮的背景颜色
Button('font style', { type: ButtonType.Normal })
.fontSize(20)
.fontColor(Color.Pink)
.fontWeight(800)
.backgroundColor(0xF55A42)
.margin(20)
// 按钮中添加图片
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r("app.media.image_one"))
.width(30)
.height(30)
}.width(55)
.height(55)
.margin(MarLeft)
.backgroundColor(0xF55A42)
// 添加事件
Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.onClick(() => {
console.info('Button onClick')
})
}
.height("100%")
.width("100%")
.align(Alignment.Center)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# 案例二
// 在用户登录/注册页面，使用按钮进行登录或注册操作
@Entry
@Component
struct ButtonCase2 {
build() {
Column() {
TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
Button('Register').width(300).margin({ top: 20 })
.onClick(() => {
console.log("注册")
})
}.padding(20)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15