HarmonyOS开发：深入探索Button组件的多样化用法 原创

scss@Entry
@Component
struct Index {
  @State message: string = 'Hello';
  private flag: boolean = false;
 
  build() {
    Column() {
      // 普通按钮：通过type: ButtonType.Normal关闭圆角
      Button(this.message, { type: ButtonType.Normal })
.width(90)
.height(50)
.fontSize(14)
.borderRadius(20) // 设置按钮圆角大小
.backgroundColor(Color.Red) // 设置背景颜色
.fontColor(Color.Black) // 设置文字颜色
.margin({ top: 30 })
.onClick(() => {
          if (!this.flag) { // 取反用于反转布尔值的真假
.message
.flag
          } else {
.message
.flag
          }
        });
 
      // 普通按钮：设置背景色和文字颜色
      Button("按钮2")
.width(100)
.height(50)
.backgroundColor(Color.Black)
.fontColor(Color.White)
.margin({ top: 10 });
 
      // 包含子组件的按钮
      Button({ type: ButtonType.Normal })
        Row() {
          Image($r("app.media.app_icon"))
.width(20)
.height(20)
.margin({ left: 50 });
          Text("包含子组件")
.fontSize(14)
.fontColor(Color.Gray)
.margin({ left: 10 });
        }
.alignItems(VerticalAlign.Center) // 设置Row内部组件的垂直对齐
.width(200)
.height(200)
.borderRadius(20)
.backgroundColor(Color.Yellow)
.margin({ top: 40 });
 
      // 胶囊类型的按钮
      Button({ type: ButtonType.Capsule })
.width(100)
.height(50)
.backgroundColor(Color.Blue)
.margin({ top: 10 });
    }
.height('100%')
.width('100%');
  }
}
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.