按鈕（Button）

Button是按鈕組件，通常用于響應(yīng)用戶的點(diǎn)擊操作，其類型包括膠囊按鈕、圓形按鈕、普通按鈕。Button當(dāng)做為容器使用時(shí)可以通過添加子組件實(shí)現(xiàn)包含文字、圖片等元素的按鈕。具體用法請(qǐng)參考Button。

• 創(chuàng)建不包含子組件的按鈕。

  Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })

  該接口用于創(chuàng)建不包含子組件的按鈕，其中l(wèi)abel用來設(shè)置按鈕文字，type用于設(shè)置Button類型，stateEffect屬性設(shè)置Button是否開啟點(diǎn)擊效果。

  Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
    .borderRadius(8) 
    .backgroundColor(0x317aff) 
    .width(90)
    .height(40)

  

• 創(chuàng)建包含子組件的按鈕。

  Button(options?: {type?: ButtonType, stateEffect?: boolean})

  該接口用于創(chuàng)建包含子組件的按鈕，只支持包含一個(gè)子組件，子組件可以是基礎(chǔ)組件或者容器組件。

  Button({ type: ButtonType.Normal, stateEffect: true }) {
    Row() {
      Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })
      Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
    }.alignItems(VerticalAlign.Center)
  }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

  

• 膠囊按鈕（默認(rèn)類型）

  此類型按鈕的圓角自動(dòng)設(shè)置為高度的一半，不支持通過borderRadius屬性重新設(shè)置圓角。

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

  

• 圓形按鈕

  此類型按鈕為圓形，不支持通過borderRadius屬性重新設(shè)置圓角。

  Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
    .backgroundColor(0x317aff) 
    .width(90) 
    .height(90)

  

• 普通按鈕

  此類型的按鈕默認(rèn)圓角為0，支持通過borderRadius屬性重新設(shè)置圓角。

  Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
    .borderRadius(8) 
    .backgroundColor(0x317aff) 
    .width(90)
    .height(40)

  

• 設(shè)置文本樣式。

  通過添加文本樣式設(shè)置按鈕文本的展示樣式。

  Button('font style', { type: ButtonType.Normal }) 
    .fontSize(20) 
    .fontColor(Color.Pink) 
    .fontWeight(800)

  

• 設(shè)置背景顏色。

  添加backgroundColor屬性設(shè)置按鈕的背景顏色。

  Button('background color').backgroundColor(0xF55A42)

  

• 用作功能型按鈕。

  為刪除操作創(chuàng)建一個(gè)按鈕。

  Button({ type: ButtonType.Circle, stateEffect: true }) { 
    Image($r('app.media.ic_public_delete_filled')).width(30).height(30) 
  }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)

  

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .onClick(()=>{ 
    console.info('Button onClick') 
  })

• 用于表單的提交。

  在用戶登錄/注冊(cè)頁面，使用按鈕進(jìn)行登錄或注冊(cè)操作。

  // xxx.ets
  @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(() => {
            // 需要執(zhí)行的操作
          })
      }.padding(20)
    }
  }

  

• 懸浮按鈕

  在可以滑動(dòng)的界面，滑動(dòng)時(shí)按鈕始終保持懸浮狀態(tài)。

  // xxx.ets
  @Entry
  @Component
  struct HoverButtonExample {
    private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    build() {
      Stack() {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
            }
          }, item => item)
        }.width('90%')
        Button() {
          Image($r('app.media.ic_public_add'))
            .width(50)
            .height(50)
        }
        .width(60)
        .height(60)
        .position({x: '80%', y: 600})
        .shadow({radius: 10})
        .onClick(() => {
          // 需要執(zhí)行的操作
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(0xDCDCDC)
      .padding({ top: 5 })
    }
  }