鴻蒙HarmonyOS實戰-ArkUI元件（Button）

蜀道山QAQ發表於2024-04-01
鴻蒙UI元件

🚀一、Button

Button（按鈕）是一種常見的使用者介面控制元件，通常用於觸發操作或提交資料。Button 擁有文字標籤和一個可點選的區域，使用者點選該區域即可觸發相應的操作或事件。

Button 的主要功能有：

  • 觸發操作：使用者點選 Button 可以觸發相應的操作，例如提交表單、搜尋、切換頁面等。

  • 提交資料：Button 可以用於提交表單資料，將使用者輸入的資料提交到伺服器進行處理。

  • 執行命令：Button 可以執行系統或應用程式的命令，例如列印、儲存、退出等。

  • 觸發事件：Button 可以觸發自定義事件，透過與其他元件配合使用，可以實現複雜的互動效果。

🔎1.建立按鈕

語法說明：

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

使用：

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('Ok', { type: ButtonType.Normal, stateEffect: true })
        .borderRadius(8)
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)
      Button({ type: ButtonType.Normal, stateEffect: true }) {
        Row() {
          Image($r('app.media.app_icon')).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)
    }
  }
}

image

🔎2.設定按鈕型別

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)
      Button('Circle', { type: ButtonType.Circle, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(90)
      Button('Circle', { type: ButtonType.Normal, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(90)
    }
  }
}

image

注意：不支援透過borderRadius屬性重新設定

🔎3.自定義樣式

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('circle border', { type: ButtonType.Normal })
        .borderRadius(20)
        .height(40)
      Button('font style', { type: ButtonType.Normal })
        .fontSize(20)
        .fontColor(Color.Pink)
        .fontWeight(800)
      Button('background color').backgroundColor(0xF55A42)
      Button({ type: ButtonType.Circle, stateEffect: true }) {
        Image($r('app.media.ic_public_refresh')).width(30).height(30)
      }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
    }
  }
}

image

🔎4.新增事件

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

🔎5.案例

Button按鈕的實際應用場景主要包括以下幾個方面：

點選提交表單

當使用者填寫完表單後，點選Button按鈕來提交表單資料，使得資料能夠被伺服器端處理或者儲存到資料庫中。

跳轉連結

當使用者點選Button按鈕時，跳轉到指定的網頁、應用程式或者其他頁面。

開啟或關閉彈窗

當使用者點選Button按鈕時，開啟或關閉彈窗，可以在彈窗中展示一些資訊、廣告或者提示。

執行某個動作

當使用者點選Button按鈕時，執行某個操作，比如重新整理頁面、播放音樂、暫停影片等。

切換頁面狀態

當使用者點選Button按鈕時，可以切換頁面的狀態，比如開啟或關閉選單、切換語言、切換主題等。

Button按鈕的應用場景非常廣泛，基本上所有需要使用者互動的場景都可以使用Button按鈕來實現。

🦋2.1 頁面跳轉

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct ButtonCase1 {
  build() {
    List({ space: 4 }) {
      ListItem() {
        Button("First").onClick(() => {
          router.pushUrl({ url: 'pages/first_page' })
        })
          .width('100%')
      }
      ListItem() {
        Button("Second").onClick(() => {
          router.pushUrl({ url: 'pages/second_page' })
        })
          .width('100%')
      }
      ListItem() {
        Button("Third").onClick(() => {
          router.pushUrl({ url: 'pages/third_page' })
        })
          .width('100%')
      }
    }
    .listDirection(Axis.Vertical)
    .backgroundColor(0xDCDCDC).padding(20)
  }
}

image

🦋2.2 表單提交

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
  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(() => {
          // 需要執行的操作
        })
    }.padding(20)
  }
}

image

🦋2.3 懸浮按鈕

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
  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_refresh'))
          .width(50)
          .height(50)
      }
      .width(60)
      .height(60)
      .position({x: '80%', y: 600})
      .shadow({radius: 10})
      .onClick(() => {
        // 需要執行的操作
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章