HarmonyOS ArkUI-eTS常用控制

作者：清風(fēng)彬彬 2022-02-23 15:07:22

系統(tǒng) OpenHarmony

本篇帶給大家ArkUI-eTS常用控制的相關(guān)知識(shí)，希望能夠幫助到你！

??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??

1.顯隱控制

支持版本： eTS API Version 7+
屬性名稱： visibility
作用：控制該屬性所在組件顯示或隱藏
默認(rèn)： Visible(顯示)
其他值： Hidden(隱藏，占用布局空間)、None(隱藏，但不占用布局空間)
使用舉例：

分別使用該屬性三種值定義1、2、3、4四個(gè)按鈕。

第一個(gè)按鈕設(shè)置為顯示，第二個(gè)按鈕設(shè)置為隱藏且占空間，第三個(gè)按鈕設(shè)置為隱藏且不占空間。

最后4號(hào)按鈕用來(lái)判別上一個(gè)按鈕是否占用了布局空間。

@Entry
@Component
struct Sample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('顯式')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Button('1').visibility(Visibility.Visible)

      Text('隱式占位')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Button('2').visibility(Visibility.Hidden)

      Text('隱式不占位')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Button('3').visibility(Visibility.None)

      Button('4').visibility(Visibility.Visible)
    }
    .width('100%')
    .height('100%')
  }
}

如下圖：

2.禁用控制

支持版本： eTS API Version 7+
屬性名稱： enabled
作用：控制該屬性所在組件是否禁用
默認(rèn)： true(組件可用)
其他值： false(組件不可用)
使用舉例：

以按鈕為例，分別設(shè)置按鈕禁用和按鈕可用

@Entry
@Component
struct Sample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('禁用按鈕').enabled(false).opacity(0.4).margin({bottom:10})
      Button('可用按鈕').enabled(true)
    }
    .width('100%')
    .height('100%')
  }
}

如下圖：

3.Z序控制

支持版本： eTS API Version 7+
屬性名稱： zIndex
作用：同一容器中兄弟組件的顯示層級(jí)關(guān)系(疊加關(guān)系)
默認(rèn)： 0(最底層)
其他值： number類型n(放在第n層)
使用舉例：

主要使用堆疊容器Stack(可見(jiàn)文章末拓展內(nèi)容)，向容器中添加相關(guān)組件并使用Z序控制對(duì)內(nèi)容進(jìn)行層級(jí)劃分。

@Entry
@Component
struct Sample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Stack() {
        Text('Z序--2')
          .fontSize(15)
          .size({width: '40%', height: '10%'}).backgroundColor(Color.Yellow)
          .zIndex(2)
        // 默認(rèn)值0
        Text('默認(rèn)0')
          .fontSize(15)
          .size({width: '90%', height: '50%'}).backgroundColor(Color.Green).align(Alignment.TopStart)
        Text('Z序--1')
          .fontSize(15)
          .size({width: '70%', height: '30%'}).backgroundColor(Color.Blue).align(Alignment.TopStart)
          .zIndex(1)
      }
    }
    .width('100%')
    .height('100%')
  }
}

如下圖：

4.Popup控制

支持版本： eTS API Version 7+
屬性名稱： bindPopup
作用：給組件綁定Popup,點(diǎn)擊后出現(xiàn)彈窗
主要參數(shù)： show(彈窗提示是否默認(rèn)顯示，默認(rèn)為false)、popup(配置彈窗提示信息—PopupOption,CustomPopupOption兩個(gè)接口)
PopupOption接口常見(jiàn)屬性：message(彈窗信息內(nèi)容)、placementOnTop(是否在組件上方顯示，默認(rèn)值為false)
CustomPopupOption接口常見(jiàn)屬性：placement(氣泡優(yōu)先顯示位置，自定義位置容納不下時(shí)，會(huì)自動(dòng)調(diào)整位置)、popupColor(提示氣泡的顏色)
使用舉例：

@Entry
@Component
struct Sample {
  @State noHandlePopup: boolean = false
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center}) {
      Button('按鈕')
        .width('50%')
        .margin({top:100})
        .onClick(()=>{
          this.noHandlePopup = !this.noHandlePopup
        })
      .bindPopup(this.noHandlePopup,{
        message:'彈窗一',  //彈窗內(nèi)容
        placement:Placement.Bottom, //彈窗位于按鈕底部
        onStateChange:(e)=>{
          console.info(e.isVisible.toString())
          if(!e.isVisible){
            this.noHandlePopup = false
          }
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}

如下圖：

5.點(diǎn)擊控制

支持版本： eTS API Version 8+
屬性名稱： touchable
作用：設(shè)置當(dāng)前組件是否可以被觸摸
默認(rèn)： true
使用舉例：

@Entry
@Component
struct Sample {
  @State text_touch: string = ''

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Circle()
        .fill(Color.Orange)
        .width(100)
        .height(100)
        .touchable(true)
        .onClick(() => {
          console.info(this.text_touch = '您已經(jīng)點(diǎn)擊過(guò)此圖形')
        })
        .overlay(this.text_touch, { align: Alignment.Bottom, offset: { x: 0, y: 50 } })
    }
    .width('100%')
    .height('100%')
  }
}

如下圖：

6.Stack容器(基于Z序控制拓展組件)

支持版本： eTS API Version 7+
接口： Stack(value:{alignContent?: Alignment})
參數(shù)alignContent：默認(rèn)值Center(子組件在容器內(nèi)的對(duì)齊方式)
使用舉例：

....................
      Stack({ alignContent: Alignment.Bottom }) { //設(shè)置為底部對(duì)齊
        Text('子組件一')
          .fontSize(15)
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Blue)
          .align(Alignment.Top)
        Text('子組件二')
          .fontSize(15)
          .width('70%')
          .height('60%')
          .backgroundColor(Color.Grey)
          .align(Alignment.Top)
      }.width('100%').height(150).margin({ top: 5 })
    }
.................