閱讀(1.2k) 書簽贊(0) 我要糾錯

按鈕組件

2024-01-22 17:05 更新

按鈕組件，可快速創(chuàng)建不同樣式的按鈕。

說明

該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

可以包含單個子組件。

接口

方法1： Button(options?: {type?: ButtonType, stateEffect?: boolean})

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
type	ButtonType	否	描述按鈕顯示樣式。默認值：ButtonType.Capsule
stateEffect	boolean	否	按鈕按下時是否開啟按壓態(tài)顯示效果，當設置為false時，按壓效果關閉。默認值：true 說明：當開啟按壓態(tài)顯示效果，開發(fā)者設置狀態(tài)樣式時，會基于狀態(tài)樣式設置完成后的背景色再進行顏色疊加。

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

type

ButtonType

否

描述按鈕顯示樣式。

默認值：ButtonType.Capsule

stateEffect

boolean

否

按鈕按下時是否開啟按壓態(tài)顯示效果，當設置為false時，按壓效果關閉。

默認值：true

說明：當開啟按壓態(tài)顯示效果，開發(fā)者設置狀態(tài)樣式時，會基于狀態(tài)樣式設置完成后的背景色再進行顏色疊加。

方法2： Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

使用文本內(nèi)容創(chuàng)建相應的按鈕組件，此時Button無法包含子組件。

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
label	ResourceStr	否	按鈕文本內(nèi)容。
options	{ type?: ButtonType, stateEffect?: boolean }	否	見方法1參數(shù)說明。

屬性

除支持通用屬性外，還支持以下屬性：

名稱	參數(shù)類型	描述
type	ButtonType	設置Button樣式。默認值：ButtonType.Capsule 從API version 9開始，該接口支持在ArkTS卡片中使用。
stateEffect	boolean	按鈕按下時是否開啟按壓態(tài)顯示效果，當設置為false時，按壓效果關閉。默認值：true 從API version 9開始，該接口支持在ArkTS卡片中使用。

名稱

參數(shù)類型

描述

type

ButtonType

設置Button樣式。

默認值：ButtonType.Capsule

從API version 9開始，該接口支持在ArkTS卡片中使用。

stateEffect

boolean

按鈕按下時是否開啟按壓態(tài)顯示效果，當設置為false時，按壓效果關閉。

默認值：true

從API version 9開始，該接口支持在ArkTS卡片中使用。

事件

支持通用事件。

ButtonType枚舉說明

從API version 9開始，該接口支持在ArkTS卡片中使用。

名稱	描述
Capsule	膠囊型按鈕（圓角默認為高度的一半）。
Circle	圓形按鈕。
Normal	普通按鈕（默認不帶圓角）。

說明

按鈕圓角通過通用屬性borderRadius設置（不支持通過border接口設置圓角），且只支持設置一個相同的圓角。
當按鈕類型為Capsule時，borderRadius設置不生效，按鈕圓角始終為寬、高中較小值的一半。
當按鈕類型為Circle時，borderRadius即為按鈕半徑，若未設置borderRadius按鈕半徑則為寬、高中較小值的一半。
按鈕文本通過通用文本樣式進行設置。
設置顏色漸變需先設置backgroundColor為透明色。

示例

示例1


// xxx.ets
@Entry
@Component
struct ButtonExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Normal button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('OK', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .width(90)
          .onClick(() => {
            console.log('ButtonType.Normal')
          })
        Button({ type: ButtonType.Normal, stateEffect: true }) {
          Row() {
            LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
            Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
          }.alignItems(VerticalAlign.Center)
        }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

        Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4)
          .borderRadius(8).backgroundColor(0x317aff).width(90)
      }

      Text('Capsule button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)
        Button({ type: ButtonType.Capsule, stateEffect: true }) {
          Row() {
            LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
            Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
          }.alignItems(VerticalAlign.Center).width(90).height(40)
        }.backgroundColor(0x317aff)

        Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4)
          .backgroundColor(0x317aff).width(90)
      }

      Text('Circle button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
        Button({ type: ButtonType.Circle, stateEffect: true }) {
          LoadingProgress().width(20).height(20).color(0xFFFFFF)
        }.width(55).height(55).backgroundColor(0x317aff)

        Button({ type: ButtonType.Circle, stateEffect: true }) {
          LoadingProgress().width(20).height(20).color(0xFFFFFF)
        }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
      }
    }.height(400).padding({ left: 35, right: 35, top: 35 })
  }
}

示例2


// xxx.ets
@Entry
@Component
struct SwipeGestureExample {
  @State count: number = 0

  build() {
    Column() {
      Text(`${this.count}`)
        .fontSize(30)
        .onClick(() => {
          this.count++
        })
      if (this.count <= 0) {
        Button('count is negative').fontSize(30).height(50)
      } else if (this.count % 2 === 0) {
        Button('count is even').fontSize(30).height(50)
      } else {
        Button('count is odd').fontSize(30).height(50)
      }
    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
  }
}