鴻蒙移動應用開發--渲染控制實驗

任務使用“對象數組”、“ForEach渲染”、“Badge角標組件”、“Grid布局”等相關知識,實現生效抽獎卡案例。如圖1所示:

圖1 生肖抽獎卡實例圖?

圖1(a)中有6張生肖卡可以抽獎,每抽中一張,會通過彈層顯示出來(圖(b)),每抽中一張,圖片的右上角數量增加1,若6張卡片均抽中了(每種卡片至少有一張),就可以抽更大的獎,包括華為、蘋果以及小米三種不同的手機,如圖1(c)。也可實現支付寶集五福案例,功能相似即可。

參考資料:68-【階段綜合】-生肖抽卡-Badge角標組件_嗶哩嗶哩_bilibili

實驗過程:

????????首先,定義了一個接口`Images`,用于描述每張生肖卡的數據結構,包含圖片的URL和數量(`count`)。接著,基于這個接口準備了初始數據,即6張生肖卡,每張卡的初始數量為0。

????????在頁面布局方面,使用了`Stack`層疊布局來實現頁面的多層顯示。最底層是一個`Column`布局,其中包含了一個`Grid`布局用于展示生肖卡。通過`ForEach`方法,將每張生肖卡的數據綁定到`GridItem`中,并使用`Badge`組件在每張卡的右上角顯示其數量。此外,還添加了一個“立即抽卡”按鈕,用于觸發抽卡操作。

????????當點擊“立即抽卡”按鈕時,會觸發一系列的動畫效果和邏輯處理。首先,設置遮罩層的透明度、層級和縮放比例,使抽卡頁面顯示出來。然后,通過`Math.random()`方法生成一個隨機數,表示抽中的生肖卡序號。接著,將抽中的生肖卡以放大的形式顯示在抽卡頁面上,并提供一個“開心收下”按鈕。

????????點擊“開心收下”按鈕后,將遮罩層的透明度和層級恢復到初始狀態,并將抽中的生肖卡數量加1。同時,檢查是否所有生肖卡的數量都大于0,如果是,則表示集齊了所有生肖卡,可以進入中獎頁面。在中獎頁面中,會隨機選擇一個獎品(華為、蘋果或小米手機),并顯示相應的圖片和“再來一次”按鈕。點擊“再來一次”按鈕后,將所有生肖卡的數量重置為0,重新開始抽獎過程。

????????在整個實驗過程中,通過合理使用`State`變量來控制頁面的狀態變化,以及利用`ForEach`和`Badge`組件實現了動態的數據綁定和顯示效果。同時,通過`Grid`布局實現了生肖卡的規則排列,使得頁面布局更加美觀和清晰。

源代碼:

// 1.定義接口
interface Images{url:stringcount:number
}// 需求1:遮罩層顯隱 透明度opacity 0-1 層級zInsex 1-99
// 需求2:圖片收縮 縮放scale 0-1
@Entry
@Component
struct Index {// 隨機的生肖卡序號@State randomNum:number=-1// 初始值為-1表示還沒有抽卡// 2.基于接口準備數據@State images:Images[]=[{url:'app.media.bg_00',count:0},{url:'app.media.bg_01',count:0},{url:'app.media.bg_02',count:0},{url:'app.media.bg_03',count:0},{url:'app.media.bg_04',count:0},{url:'app.media.bg_05',count:0}]// 透明度@State transparent:number=0 // 初始為0//層級@State Level:number=0 // 初始為0// 縮放@State zoomx:number=0@State zoomy:number=0// 控制中獎@State isGet:boolean=false// 獎池@State arr:string[]=['pg','hw','xm']@State price:string=''//默認沒有中獎build() {// 層疊布局Stack(){// 初始化頁面Column(){// Grid布局的基礎使用:規則的行列布局中非常常見Grid(){ForEach(this.images,(item:Images,index:number)=>{GridItem(){Badge({count:item.count,position:BadgePosition.RightTop,style:{fontSize:14,badgeSize:20,badgeColor:Color.Red}}){Image($r(item.url)).width(100).height(100)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top:100})Button('立即抽卡').width(200).backgroundColor('#de668d').margin({top:50}).onClick(()=>{this.Level=99this.transparent=1this.zoomx=1this.zoomy=1//計算隨機數this.randomNum = Math.floor(Math.random()*6)})}.zIndex(5) // 初始化層級為5.width('100%').height('100%')// 抽卡時的頁面Column({space:25}){Text('獲得生肖卡片').fontColor('#f5ebcf').fontSize(25).fontWeight(FontWeight.Bold)Image($r(`app.media.img_0${this.randomNum}`)).width(200)// 卡片的播放.scale({x:this.zoomx,y:this.zoomy}).animation({duration:500})Button('開心收下').width(200).height(50).backgroundColor(Color.Transparent)// 透明色.border({width:2,color:'#fff9e0'}).onClick(()=>{this.transparent=0this.Level=0this.zoomx=0this.zoomy=0// 開心收下this.images[this.randomNum]={url:`app.media.img_0${this.randomNum}`,count:this.images[this.randomNum].count+1}// 判斷卡片的數量// 如果卡片中有一個的數量為0,那就是沒集齊let flag:boolean=truefor(let item of this.images){if(item.count==0){flag=falsebreak}}this.isGet=flagif(flag){let randomIndex:number=Math.floor(Math.random()*3)this.price=this.arr[randomIndex]}})}.justifyContent(FlexAlign.Center)// 居中對齊.width('100%').height('100%').backgroundColor('#cc000000').zIndex(this.Level).opacity(this.transparent)// 透明度// 動畫.animation({duration:200})if(this.isGet){// 中獎頁面Column(){Text('恭喜獲得手機一部').fontColor('#f5ebcf').fontSize(25).fontWeight(700)Image($r(`app.media.${this.price}`)).width(300)Button('再來一次').width(200).height(50).backgroundColor(Color.Transparent).border({width:2,color:'#fff9e0'}).onClick(()=>{this.isGet=falsethis.price=''this.images=[j{url:'app.media.img_00',count:0},{url:'app.media.img_01',count:0},{url:'app.media.img_02',count:0},{url:'app.media.img_03',count:0},{url:'app.media.img_04',count:0},{url:'app.media.img_05',count:0}]})}.zIndex(10).width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('#cc000000')}}}
}

?運行截圖:

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/78255.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/78255.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/78255.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

webpack基礎使用了解(入口、出口、插件、加載器、優化、別名、打包模式、環境變量、代碼分割等)

目錄 1、webpack簡介2、簡單示例3、入口(entry)和輸出(output)4、自動生成html文件5、打包css代碼6、優化(單獨提取css代碼)7、優化(壓縮過程)8、打包less代碼9、打包圖片10、搭建開發環境(webpack-dev-server&#xf…

Java快速上手之實驗4(接口回調)

1.編寫接口程序RunTest.java,通過接口回調實現多態性。解釋【代碼4】和【代碼6】的執行結果為何不同? interface Runable{ void run(); } class Cat implements Runable{ public void run(){ System.out.println("貓急上樹.."…

Volcano 實戰快速入門 (一)

一、技術背景 隨著大型語言模型(LLM)的蓬勃發展,其在 Kubernetes (K8s) 環境下的訓練和推理對資源調度與管理提出了前所未有的挑戰。這些挑戰主要源于 LLM 對計算資源(尤其是 GPU)的巨大需求、分布式任務固有的復雜依…

Qwen2.5簡要全流程以及QA

1 輸入prompt 得到input id input id: [B,L] # batch size , lenth 2 embeding之后得到 input_embeds: [B,L,D] # demensions 3 進入Transformer層 先通過linear層得到shape不變的 QKV 多頭注意力 分割Dimension , kv變成 [B,H,L,head_dim] h是…

爬蟲學習——Item封裝數據與Item Pipeline處理數據

一、Item封裝數據 對于有字段的數據,最好的數據結構維護方法為字典類型(dict),但是由于字典不便于攜帶元數據和傳遞給其他組件使用,故可以使用Item類封裝爬取到的數據。 這里涉及兩個類:Item基類和Field類 兩者的使用關系如下&…

【React】狀態管理 Context API \ MobX \ Redux

Context APIMobXRedux React有自己狀態管理,周邊生態也有很多狀態管理 Context API 直接從react中引入并調用即可,context包含兩個東西: Provider:提供商(翻譯),提供數據;屬性&…

RK3588上編譯opencv 及基于c++實現圖像的讀入

參考博文: https://blog.csdn.net/qq_47432746/article/details/147203889 一、安裝依賴包 sudo apt install build-essential cmake git pkg-config libgtk-3-dev libavcodec-dev libavformat-dev libswscale-dev libv4l-dev libxvidcore-dev libx264-dev libjpe…

MATLAB 訓練CNN模型 yolo v4

學生對小車控制提出了更好的要求,能否加入深度學習模型。 考慮到小車用matlab來做,yolo v5及以上版本都需要在pytorch下訓練,還是用早期版本來演示。 1 yolov4 調用 參考 trainYOLOv4ObjectDetector (mathworks.com) name "tiny-yo…

Windows下使用 VS Code + g++ 開發 Qt GUI 項目的完整指南

🚀 使用 VS Code g 開發 Qt GUI 項目的完整指南(Windows MSYS2) 本指南幫助你在 Windows 下使用 VS Code g CMake Qt6 快速搭建 Qt GUI 項目,適合熟悉 Visual Studio 的開發者向跨平臺 VS Code 工具鏈遷移。 🛠?…

開源漏洞掃描器:OpenVAS

一、OpenVAS介紹 OpenVAS (Open Vulnerability Assessment System) 是一款功能強大的開源漏洞掃描器。它由 Greenbone Networks 開發和維護,是 Greenbone 安全管理器 (GSM) 產品的基礎,同時也有免費的社區版本(Greenbone Community Edition&…

Redis Pipeline 詳解

Redis Pipeline 詳解 Redis 無 Pipeline 耗時情況 : #mermaid-svg-8RIiJyeBO0uIrWjr {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8RIiJyeBO0uIrWjr .error-icon{fill:#552222;}#mermaid-svg-8RIiJyeBO0uIrWjr .…

2025.04.24【3D】3D繪圖入門指南

Nifty graph A contribution by Matt Asher. 3D animation A 3D animated scatterplot made with R and rgl. 文章目錄 Nifty graph3D animation 2025.04.24【3D】| 3D繪圖入門指南什么是3D繪圖?為什么使用3D繪圖?如何在R中進行3D繪圖?安裝…

[特殊字符] 分布式事務中,@GlobalTransactional 與 @Transactional 到底怎么配合用?

在微服務架構中,隨著系統模塊的拆分,單體應用中的本地事務已經無法滿足跨服務的數據一致性需求。此時,我們就需要引入分布式事務解決方案,比如 Seata。在使用 Seata 的過程中,很多人會遇到一個常見的疑問: …

TDengine 集群高可用方案設計(二)

四、TDengine 集群高可用方案設計 4.1 硬件與網絡架構設計 服務器選型:選擇配置高、穩定性強的服務器,如戴爾 PowerEdge R740xd、華為 RH2288H V5 等。以戴爾 PowerEdge R740xd 為例,它配備英特爾至強可擴展處理器,具備高性能計…

從對數變換到深度框架:邏輯回歸與交叉熵的數學原理及PyTorch實戰

目錄 前言 一、連乘變連加二、最小化損失函數2.1交叉熵2.2 二分類交叉熵2.3 多分類交叉熵三、邏輯回歸與二分類3.1 邏輯回歸與二分類算法理論講解3.1.1 散點輸入3.1.2 前向計算3.1.3 Sigmoid函數引入3.1.4 參數初始化3.1.5 損失函數3.1.6 開始迭代3.1.7 梯度下降顯示四、基于框…

高企復審獎補!2025年合肥市高新技術企業重新認定獎勵補貼政策及申報條件

一、合肥市高新技術企業重新認定獎勵補貼政策 (一)高新區高新技術企業重新認定復審補貼獎勵 重新認定為國家高新技術企業的給予5萬元一次性獎勵。 (二)經開區高新技術企業重新認定復審補貼獎勵 對重新認定的企業,給…

Spring Boot 中配置線程池時優化 `ThreadPoolTaskExecutor` 的配置總結

在 Spring Boot 中配置線程池時,可以通過以下方式進一步優化 ThreadPoolTaskExecutor 的配置,提升性能、靈活性和可靠性: 優化點 1:合理設置線程池參數 關鍵參數調整 Bean(name "taskExecutor") public Executor tas…

opencv 圖像的旋轉

圖像的旋轉 1 單點旋轉2. 圖片旋轉(cv2.getRotationMatrix2D)3. 插值方法3.1 最近鄰插值(cv2.INTER_NEAREST)3.2 雙線性插值(cv2.INTER_LINEAR)3.3 像素區域插值(cv2.INTER_AREA)3.4 雙三次插值(cv2.INTER_CUBIC&#…

如何在 Odoo 18 中配置自動化動作

如何在 Odoo 18 中配置自動化動作 Odoo是一款多功能的業務管理平臺,旨在幫助各種規模的企業更高效地處理日常運營。憑借其涵蓋銷售、庫存、客戶關系管理(CRM)、會計和人力資源等領域的多樣化模塊,Odoo 簡化了業務流程&#xff0c…

每日兩道leetcode

345. 反轉字符串中的元音字母 - 力扣(LeetCode) 題目 給你一個字符串 s ,僅反轉字符串中的所有元音字母,并返回結果字符串。 元音字母包括 a、e、i、o、u,且可能以大小寫兩種形式出現不止一次。 示例 1:…