鸿蒙ArkUI Button组件的用法（附带实例）

Button 是按钮组件，可快速创建不同样式的按钮。

以下是两个按钮示例：

// 一个基本按钮，设置要显示的文字
Button('01')
// 设置边框的半径、背景色、宽度
Button('02').borderRadius(8).backgroundColor(0x317aff).width(90)

其中，第一个是基本的按钮，设置要显示的文字“01”；第二个按钮则是设置边框的半径、背景色和宽度。两个按钮界面效果如下图所示：


Button 组件支持通过 type 属性来设置按钮的显示样式，包括 Capsule（胶囊型）、Circle（圆形）、Normal（普通）。示例如下：

// 胶囊型按钮（圆角默认为高度的一半）
Button('03', { type: ButtonType.Capsule }).width(90)
// 圆形按钮
Button('04', { type: ButtonType.Circle }).width(90)
// 普通按钮（默认不带圆角）
Button('05', { type: ButtonType.Normal }).width(90)

上述三个按钮的样式设置完成后的界面效果如下图所示：


Button 组件可以包含子组件，示例如下：

// 可以包含单个子组件。文字就用Text组件来显示
Button({ type: ButtonType.Capsule, stateEffect: true }) {
    Row() {
        LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xffffff)
        Text('06').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
    }.alignItems(VerticalAlign.Center).width(90).height(40)
}.backgroundColor(0x317aff)

上述第一个按钮包括了 LoadingProgress 组件。需要注意的是，包含了子组件之后，原本按钮上的文字“06”就不会显示了。如果想显示文字，可以参考第二个按钮的设置方式，增加一个 Text 组件。界面效果如下图所示。