0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙ArkTS聲明式開發(fā):跨平臺(tái)支持列表【點(diǎn)擊回彈效果】 通用屬性

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-11 16:33 ? 次閱讀

點(diǎn)擊回彈效果

設(shè)置組件點(diǎn)擊時(shí)回彈效果。

說明:
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 10開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

屬性

名稱參數(shù)類型描述
clickEffect[ClickEffect]null

ClickEffect對(duì)象說明

名稱參數(shù)類型必填描述
level[ClickEffectLevel]設(shè)置當(dāng)前組件點(diǎn)擊回彈效果。**說明:**level等于undefined或者null時(shí), ClickEffect采用ClickEffectLevel.LIGHT對(duì)應(yīng)的回彈效果, 縮放比參照scale說明。
scalenumber回彈縮放比例,支持在設(shè)置ClickEffectLevel的基礎(chǔ)上微調(diào)回彈縮放比例。**說明:**level等于ClickEffectLevel.LIGHT時(shí),默認(rèn)值:0.90 level等于ClickEffectLevel.MIDDLE或者ClickEffectLevel.HEAVY時(shí),默認(rèn)值:0.95 level等于undefined或者null時(shí),level為ClickEffectLevel.LIGHT,默認(rèn)值:0.90 scale等于undefined或者null時(shí),scale與當(dāng)前設(shè)置的level對(duì)應(yīng)的默認(rèn)縮放比相同。HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

搜狗高速瀏覽器截圖20240326151450.png

示例

// xxx.ets
@Entry
@Component
struct ToggleExample {
  build() {
    Column({ space: 10 }) {
      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Switch, isOn: false })
          .clickEffect({level:ClickEffectLevel.LIGHT})
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) = > {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Switch, isOn: true })
          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
          .selectedColor('#007DFF')
          .switchPointColor('#FFFFFF')
          .onChange((isOn: boolean) = > {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Checkbox, isOn: false })
          .clickEffect({level:ClickEffectLevel.MIDDLE})
          .size({ width: 20, height: 20 })
          .selectedColor('#007DFF')
          .onChange((isOn: boolean) = > {
            console.info('Component status:' + isOn)
          })

        Toggle({ type: ToggleType.Checkbox, isOn: true })
          .clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5})
          .size({ width: 20, height: 20 })
          .selectedColor('#007DFF')
          .onChange((isOn: boolean) = > {
            console.info('Component status:' + isOn)
          })
      }

      Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Button, isOn: false }) {
          Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .clickEffect({level:ClickEffectLevel.HEAVY})
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) = > {
          console.info('Component status:' + isOn)
        })

        Toggle({ type: ToggleType.Button, isOn: true }) {
          Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5})
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) = > {
          console.info('Component status:' + isOn)
        })
      }
    }.width('100%').padding(24)
  }
}

clickeffect

是否

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 鴻蒙
    +關(guān)注

    關(guān)注

    56

    文章

    2267

    瀏覽量

    42489
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTS聲明開發(fā)范式

    基于ArkTS聲明開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡(jiǎn)、高性能、
    發(fā)表于 01-17 15:09

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表點(diǎn)擊事件】

    組件被點(diǎn)擊時(shí)觸發(fā)的事件。
    的頭像 發(fā)表于 05-26 21:25 ?348次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【<b class='flag-5'>點(diǎn)擊</b>事件】

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【顯隱控制】 通用屬性

    控制當(dāng)前組件顯示或隱藏。注意,即使組件處于隱藏狀態(tài),在頁(yè)面刷新時(shí)仍存在重新創(chuàng)建過程,因此當(dāng)對(duì)性能有嚴(yán)格要求時(shí)建議使用[條件渲染]代替。 默認(rèn)值:Visibility.Visible 從API version 9開始,該接口支持ArkTS卡片中使用。
    的頭像 發(fā)表于 06-03 14:46 ?462次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【顯隱控制】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【禁用控制】 通用屬性

    組件是否可交互,可交互狀態(tài)下響應(yīng)[點(diǎn)擊事件]、[觸摸事件]、[拖拽事件]、[按鍵事件]、[焦點(diǎn)事件]和[鼠標(biāo)事件]。
    的頭像 發(fā)表于 06-03 10:21 ?226次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【禁用控制】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【圖像效果通用屬性

    設(shè)置組件的模糊、陰影、球面效果以及設(shè)置圖片的圖像效果。
    的頭像 發(fā)表于 06-04 16:34 ?450次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【圖像<b class='flag-5'>效果</b>】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【形狀裁剪】 通用屬性

    參數(shù)為相應(yīng)類型的組件,按指定的形狀對(duì)當(dāng)前組件進(jìn)行裁剪;參數(shù)為boolean類型時(shí),設(shè)置是否按照父容器邊緣輪廓進(jìn)行裁剪。 默認(rèn)值:false 從API version 9開始,該接口支持ArkTS卡片中使用。
    的頭像 發(fā)表于 06-04 15:22 ?317次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【形狀裁剪】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【柵格設(shè)置】 通用屬性

    默認(rèn)占用列數(shù),指useSizeType屬性沒有設(shè)置對(duì)應(yīng)尺寸的列數(shù)(span)時(shí),占用的柵格列數(shù)。
    的頭像 發(fā)表于 06-05 09:28 ?259次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【柵格設(shè)置】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【顏色漸變】 通用屬性

    設(shè)置組件的顏色漸變效果
    的頭像 發(fā)表于 06-05 09:17 ?506次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【顏色漸變】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【菜單控制】 通用屬性

    為組件綁定彈出菜單,彈出菜單以垂直列表形式顯示菜單項(xiàng),可通過長(zhǎng)按、點(diǎn)擊或鼠標(biāo)右鍵觸發(fā)。
    的頭像 發(fā)表于 06-06 09:17 ?355次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【菜單控制】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【懸浮態(tài)效果通用屬性

    設(shè)置組件的鼠標(biāo)懸浮態(tài)顯示效果
    的頭像 發(fā)表于 06-06 09:12 ?288次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【懸浮態(tài)<b class='flag-5'>效果</b>】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【組件標(biāo)識(shí)】 通用屬性

    id為組件的唯一標(biāo)識(shí),在整個(gè)應(yīng)用內(nèi)唯一。本模塊提供組件標(biāo)識(shí)相關(guān)接口,可以獲取指定id組件的屬性,也提供向指定id組件發(fā)送事件的功能。
    的頭像 發(fā)表于 06-06 15:51 ?239次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【組件標(biāo)識(shí)】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【多態(tài)樣式】 通用屬性

    設(shè)置組件不同狀態(tài)的樣式。 從API version 9開始,該接口支持ArkTS卡片中使用。
    的頭像 發(fā)表于 06-07 09:48 ?279次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【多態(tài)樣式】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【無障礙屬性通用屬性

    組件可以設(shè)置相應(yīng)的無障礙屬性和事件來更好地使用無障礙能力。
    的頭像 發(fā)表于 06-11 17:30 ?264次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【無障礙<b class='flag-5'>屬性</b>】 <b class='flag-5'>通用</b><b class='flag-5'>屬性</b>

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【觸摸熱區(qū)設(shè)置】觸摸交互控制

    適用于支持通用點(diǎn)擊事件、通用觸摸事件、通用手勢(shì)處理的組件。
    的頭像 發(fā)表于 06-13 10:33 ?308次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【觸摸熱區(qū)設(shè)置】觸摸交互控制

    鴻蒙ArkTS聲明開發(fā)平臺(tái)支持列表【文本通用

    文本通用屬性目前只針對(duì)包含文本元素的組件,設(shè)置文本樣式。
    的頭像 發(fā)表于 06-13 15:09 ?304次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b><b class='flag-5'>式</b><b class='flag-5'>開發(fā)</b>:<b class='flag-5'>跨</b><b class='flag-5'>平臺(tái)</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【文本<b class='flag-5'>通用</b>】