#鸿蒙通关秘籍# 如何在ArkUI中使用Button组件并对其样式进行定制？

import { Button } from '@ohos.ace.ability';
@Entry
@Component
struct MyComponent {
    build() {
        Column() {
            Button('Click me!')
                .width(200)
                .height(50)
                .onClick(() => {
                    console.log('Button clicked');
                })
        }
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

 .linearGradient({
        angle: 90,
        colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
      })
1.
2.
3.
4.

Button({type:ButtonType.Normal})
1.

.shadow({
    color: Color.Black,
    offset: Size(0, 2),
    radius: 5
})
1.
2.
3.
4.
5.

.fontColor(Color.White)
.fontSize(20)
.fontWeight(FontWeight.bold)
1.
2.
3.

import Button from '@ohos.arkui/Button';
1.

<Button id="myButton" text="点击我" />
1.

<Button
  id="myButton"
  text="点击我"
  style="background-color: blue; color: white; width: 200px; height: 100px;"/>
1.
2.
3.
4.

.my-button {
  background-color: blue;
  color: white;
  width: 200px;
  height: 100px;
}
1.
2.
3.
4.
5.
6.

<Button id="myButton" text="点击我" class="my-button" />
1.