RM新时代网站-首页

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

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

                3天內不再提示

                鴻蒙ArkTS聲明式開(kāi)發(fā):跨平臺支持列表【組件內容填充方式】

                jf_46214456 ? 來(lái)源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-15 09:11 ? 次閱讀

                組件內容填充方式

                用于決定在組件的寬高動(dòng)畫(huà)過(guò)程中,如何將動(dòng)畫(huà)最終的組件內容繪制在組件上。

                說(shuō)明:
                開(kāi)發(fā)前請熟悉鴻蒙開(kāi)發(fā)指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]點(diǎn)擊或者復制轉到。
                從API Version 10開(kāi)始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。

                屬性

                名稱(chēng)參數類(lèi)型必填描述
                renderFit[RenderFit]設置寬高動(dòng)畫(huà)過(guò)程中的組件內容填充方式。 當不設置renderFit屬性時(shí),取默認值RenderFit.TOP_LEFT。

                RenderFit枚舉說(shuō)明

                名稱(chēng)描述示意圖
                CENTER保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持中心對齊。![renderfit_center]
                TOP保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持頂部中心對齊。![renderfit_top]
                BOTTOM保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持底部中心對齊。![renderfit_bottom]
                LEFT保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持左側對齊。![renderfit_left]
                RIGHT保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持右側對齊。![renderfit_right]
                TOP_LEFT保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持左上角對齊。![renderfit_top_left]
                TOP_RIGHT保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持右上角對齊。![renderfit_top_right]
                BOTTOM_LEFT保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持左下角對齊。![renderfit_bottom_left]
                BOTTOM_RIGHT保持動(dòng)畫(huà)終態(tài)的內容大小,并且內容始終與組件保持右下角對齊。![renderfit_bottom_right]
                RESIZE_FILL不考慮動(dòng)畫(huà)終態(tài)內容的寬高比,并且內容始終縮放到組件的大小。![renderfit_resize_fill]
                RESIZE_CONTAIN保持動(dòng)畫(huà)終態(tài)內容的寬高比進(jìn)行縮小或放大,使內容完整顯示在組件內,且與組件保持中心對齊。![renderfit_resize_contain]
                RESIZE_CONTAIN_TOP_LEFT保持動(dòng)畫(huà)終態(tài)內容的寬高比進(jìn)行縮小或放大,使內容完整顯示在組件內。當組件寬方向有剩余時(shí),內容與組件保持左側對齊,當組件高方向有剩余時(shí),內容與組件保持頂部對齊。![renderfit_resize_contain_top_left]
                RESIZE_CONTAIN_BOTTOM_RIGHT保持動(dòng)畫(huà)終態(tài)內容的寬高比進(jìn)行縮小或放大,使內容完整顯示在組件內。當組件寬方向有剩余時(shí),內容與組件保持右側對齊,當組件高方向有剩余時(shí),內容與組件保持底部對齊。![renderfit_resize_contain_bottom_right]
                RESIZE_COVER保持動(dòng)畫(huà)終態(tài)內容的寬高比進(jìn)行縮小或放大,使內容兩邊都大于或等于組件兩邊,且與組件保持中心對齊,顯示內容的中間部分。![renderfit_resize_cover]
                RESIZE_COVER_TOP_LEFT保持動(dòng)畫(huà)終態(tài)內容的寬高比進(jìn)行縮小或放大,使內容的兩邊都恰好大于或等于組件兩邊。當內容寬方向有剩余時(shí),內容與組件保持左側對齊,顯示內容的左側部分。當內容高方向有剩余時(shí),內容與組件保持頂部對齊,顯示內容的頂側部分。![renderfit_resize_cover_top_left]
                RESIZE_COVER_BOTTOM_RIGHT保持動(dòng)畫(huà)終態(tài)內容的寬高比進(jìn)行縮小或放大,使內容的兩邊都恰好大于或等于組件兩邊。當內容寬方向有剩余時(shí),內容與組件保持右側對齊,顯示內容的右側部分。當內容高方向有剩余時(shí),內容與組件保持底部對齊,顯示內容的底側部分。![renderfit_resize_cover_bottom_right]HarmonyOSOpenHarmony鴻蒙文檔籽料:mau123789是v直接拿

                新文檔.png

                說(shuō)明:

                • 示意圖中,藍色區域表示內容,橙黃色區域表示節點(diǎn)大小。
                • 不同的內容填充方式在寬高動(dòng)畫(huà)過(guò)程中效果不一致,開(kāi)發(fā)者需要選擇合適的內容填充方式以實(shí)現需要的動(dòng)畫(huà)效果。

                示例

                // xxx.ets
                @Entry
                @Component
                struct RenderFitExample {
                  @State width1: number = 100;
                  @State height1: number = 30;
                  flag: boolean = true;
                  build() {
                    Column() {
                      Text("Hello")
                        .width(this.width1)
                        .height(this.height1)
                        .borderWidth(1)
                        .textAlign(TextAlign.Start)
                        .renderFit(RenderFit.LEFT) // 設置LEFT的renderFit,動(dòng)畫(huà)過(guò)程中,動(dòng)畫(huà)的終態(tài)內容與組件保持左對齊
                        .margin(20)
                
                      Text("Hello")
                        .width(this.width1)
                        .height(this.height1)
                        .textAlign(TextAlign.Center)
                        .borderWidth(1)
                        .renderFit(RenderFit.CENTER) // 設置CENTER的renderFit,動(dòng)畫(huà)過(guò)程中,動(dòng)畫(huà)的終態(tài)內容與組件保持中心對齊
                        .margin(20)
                
                      Button("animate")
                        .onClick(() = > {
                          animateTo({ curve: Curve.Ease }, () = > {
                            if (this.flag) {
                              this.width1 = 150;
                              this.height1 = 50;
                            } else {
                              this.width1 = 100;
                              this.height1 = 30;
                            }
                            this.flag = !this.flag;
                          })
                        })
                    }.width("100%").height("100%").alignItems(HorizontalAlign.Center)
                  }
                }
                

                renderfit

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

                  關(guān)注

                  2

                  文章

                  1420

                  瀏覽量

                  61164
                • 組件
                  +關(guān)注

                  關(guān)注

                  1

                  文章

                  383

                  瀏覽量

                  17658
                • 鴻蒙
                  +關(guān)注

                  關(guān)注

                  55

                  文章

                  1970

                  瀏覽量

                  42223
                收藏 人收藏

                  評論

                  相關(guān)推薦

                  鴻蒙ArkTS的起源和簡(jiǎn)介

                  主流的前端開(kāi)發(fā)方式。同步的,在運行時(shí)方面,通過(guò)渲染引擎的增強(平臺無(wú)關(guān)的自繪制機制、聲明UI后端設計、動(dòng)態(tài)布局/多態(tài)UI組件等),語(yǔ)言編譯
                  發(fā)表于 01-16 16:23

                  鴻蒙入門(mén)實(shí)戰-ArkTS開(kāi)發(fā)

                  聲明UI基本概念 應用界面是由一個(gè)個(gè)頁(yè)面組成,ArkTS是由ArkUI框架提供,用于以聲明開(kāi)發(fā)
                  發(fā)表于 01-16 17:27

                  HUAWEI DevEco Studio 3.1版本發(fā)布,配套ArkTS聲明開(kāi)發(fā)全面升級

                  HarmonyOS應用及服務(wù)的一站集成開(kāi)發(fā)環(huán)境(IDE),DevEco Studio 3.1將配套ArkTS聲明
                  發(fā)表于 11-17 11:52

                  HarmonyOS/OpenHarmony應用開(kāi)發(fā)-ArkTS聲明開(kāi)發(fā)范式

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

                  HarmonyOS/OpenHarmony應用開(kāi)發(fā)-ArkTS語(yǔ)言聲明UI描述

                  ArkTS聲明方式組合和擴展組件來(lái)描述應用程序的UI,同時(shí)還提供了基本的屬性、事件和子組件配置方法,幫助
                  發(fā)表于 06-05 15:26

                  HarmonyOS優(yōu)選主力應用開(kāi)發(fā)語(yǔ)言-ArkTS概述

                  之前,建議開(kāi)發(fā)者具備TS語(yǔ)言開(kāi)發(fā)能力。 當前,ArkTS在TS的基礎上主要擴展了如下能力: 基本語(yǔ)法:ArkTS定義了聲明
                  發(fā)表于 06-09 10:52

                  OpenHarmony 應用開(kāi)發(fā)SDK、API 與基礎工具

                  一、整體說(shuō)明 ArkTS 語(yǔ)言是鴻蒙系統主推的應用開(kāi)發(fā)語(yǔ)言。因此鴻蒙系統提供給開(kāi)發(fā)者的 API 絕大部分也是
                  發(fā)表于 09-19 15:45

                  鴻蒙 OS 應用開(kāi)發(fā)初體驗

                  的操作系統平臺開(kāi)發(fā)框架。HarmonyOS 的目標是實(shí)現設備的無(wú)縫協(xié)同和高性能。 DevEco Studio 對標 Android Studio,開(kāi)發(fā)
                  發(fā)表于 11-02 19:38

                  鴻蒙開(kāi)發(fā)ArkTS基礎知識

                  一、ArkTS簡(jiǎn)介 ArkTS是HarmonyOS優(yōu)選的主力應用開(kāi)發(fā)語(yǔ)言。它在TypeScript(簡(jiǎn)稱(chēng)TS)的基礎上,匹配了鴻蒙的ArkUI框架,擴展了
                  的頭像 發(fā)表于 01-24 16:44 ?917次閱讀
                  <b class='flag-5'>鴻蒙</b><b class='flag-5'>開(kāi)發(fā)</b>之<b class='flag-5'>ArkTS</b>基礎知識

                  鴻蒙ArkTS聲明開(kāi)發(fā):跨平臺支持列表組件快捷鍵事件】

                  開(kāi)發(fā)者可以設置組件的自定義組合鍵,組合鍵的行為與click行為一致,組件在未獲得焦點(diǎn)狀態(tài)下也可以響應自定義組合鍵,每個(gè)組件可以設置多個(gè)組合鍵。
                  的頭像 發(fā)表于 05-28 15:49 ?96次閱讀
                  <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b>式<b class='flag-5'>開(kāi)發(fā)</b>:跨<b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【<b class='flag-5'>組件</b>快捷鍵事件】

                  鴻蒙ArkTS聲明開(kāi)發(fā):跨平臺支持列表組件區域變化事件】

                  組件區域變化事件指組件顯示的尺寸、位置等發(fā)生變化時(shí)觸發(fā)的事件。
                  的頭像 發(fā)表于 05-30 11:41 ?168次閱讀
                  <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b>式<b class='flag-5'>開(kāi)發(fā)</b>:跨<b class='flag-5'>平臺</b><b class='flag-5'>支持</b><b class='flag-5'>列表</b>【<b class='flag-5'>組件</b>區域變化事件】

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

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

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

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

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

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

                  鴻蒙ArkTS聲明開(kāi)發(fā):跨平臺支持列表組件內容模糊】 通用屬性

                  為當前組件提供內容模糊能力。 value: 內容模糊樣式。模糊樣式由模糊半徑、蒙版顏色、蒙版透明度、飽和度、亮度五個(gè)參數組成。 options: 可選參數,內容模糊選項。
                  的頭像 發(fā)表于 06-10 18:32 ?346次閱讀
                  <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>聲明</b>式<b class='flag-5'>開(kāi)發(fā)</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>模糊】 通用屬性
                  RM新时代网站-首页

                                RM新时代 RM新时代app下载 RM新时代官方网站 RM新时代APP平台下载地址 RM新时代登录入口官网

                                              rm官网怎么登录 rm新时代理财官网 RM新时代投资安全吗 RM新时代手机版下载 RM新时代正常可以出正常提 rm新时代是正规平台 新时代RM官方网站下载 新时代app游戏 RM新时代平台靠谱平台入口-百度知道 新时代RM|登录网址