HarmonyOS學習

一，DevEoc Studio基本內容學習

項目工程目錄

entry 默認的項目入口模塊

ets 界面相關文件（目前都放入pages文件內即可）

resource資源文件，配置文件

index.est默認文件

? ? ? ? ’ @ ‘開頭的一般為裝飾器，修飾功能，來約定后面代碼的功能

? ? ? ? Entry項目入口

? ? ? ? @Component 約定下方代碼為組件

（鴻蒙中，界面中能看到的都是組件）

? ? ? ? @State約定后面的代碼為狀態，數據變視圖，自動更新（數據驅動視圖）

????????bulid（）構建界面，文字等等?

????????系統組件：RelativeContainer? ? ?Text

@Entry
@Component
struct Index {@State message: string = 'Hello HM';build() {RelativeContainer() {Text(this.message).id('HelloWorld').fontSize($r('app.float.page_text_font_size')).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }}).onClick(() => {this.message = 'Welcome';})}.height('100%').width('100%')}
}

二，ArkTs學習

1.變量和類型

使用變量存儲不同類型的數據：狀態信息（布爾類型boolean），文字信息（字符串類型string），數字信息（數字類型number）

any不確定類型（只能在TS中使用，不能在ArkTS中使用）

變量：存儲數據的容器

存儲方式：【? ? let? 變量名：數據類型 = 值? ? ?】

*在日志中輸出小括號中的內容

console.log()

測試：在日志中查看輸出信息

日志并不會自動清空，右鍵清空

//注釋：crtl+/
//聲明變量，保存數據  string字符串類型
let title:string='創意橘子花瓶'
//日志輸出
console.log('商品標題是',title)let count:number=1
console.log('購買數量',count )let isSelect:boolean=true
console.log('訂單選中了嗎？',isSelect)

2.數組

數組：一次性保存多個同類型數據

數組也是容器，用來存儲多個數據

數組：[數據1，數據2，......]

表示方法： let? ?數組名 : 類型[]? =? [數據1，數據2，數據3，.......]

找到對應的數據：數組名[索引]? ? （索引0，1，2，...)

let titles:string[]=['創意','橘子','花瓶']
console.log('數組是',titles)
console.log('產品1',titles[0])

3.對象

對象：可以一次性存多個不同類型的數據

*數組存的是相同類型的數據，對象存的是不同類型的數據

***使用接口來約定對象的結構和類型

【用接口來定義對象中變量的類型，（接口中有什么是哪種類型，對象中也要有對應的內容）】

定義接口【interface 接口名{}】

定義對象【let 對象名：接口名={}】

//定義接口->約定對象的數據類型（接口名Goods）
interface Goods{title:stringprice:number
}//定義對象【 屬性名:屬性值->鍵值對->鍵值對之間用逗號隔開 】（繼承接口，要和接口的數據相對應）
let vase:Goods={title:'創意句子花瓶',price:12.99
}
//查找數據 對象名.屬性名
console.log('商品標題是',vase.title)
console.log('商品價格是',vase.price)
console.log('對象是',vase)//得到[object Object]，隱藏數據的內容

練習

interface People{name:stringage:numberheight:numberlisten:boolean
}let ren:People={name:'王鐵錘',age:20,height:180,listen:true
}
console.log('人名',ren.name)
console.log('年齡',ren.age)
console.log('身高',ren.height)
console.log('成年沒',ren.listen)

4.函數

使用函數封裝代碼，提升代碼復用性（一次定義，多次使用）

*定義函數

function calc(){? ? ? ? ? ? ? ? ? ? ? ? ?function? ?函數名（參數1：類型，參數2：類型，...）{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return 返回值（返回到函數調用的位置）

}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}

*調用函數

calc()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?函數名（）

例子：計算圓的周長

//計算任意半徑圓的周長 2*3.14*半徑
function calc(r:number){console.log('半徑為',r)return 2*3.14*r;
}//真實數據->實參
let c1:number=calc(10)
console.log('圓的周長',c1)let c:number=calc(100)
console.log('圓的周長',c)

沒有參數沒有返回值

//沒有參數沒有返回值的函數
function printInfo(){console.log('函數里面的輸出語句')
}
printInfo();

定義函數->function 函數名（參數列表）{}? ? 形參

調用函數->函數名（數據列表)? ? ? ? ? ? ? ? ? ? ? ?實參

5.箭頭函數

使用箭頭函數封裝代碼，提升代碼復用性

表示形式：? ( ) =>{

? ? ? ? ? ? ? ? ? ? ?}? ?

可以將箭頭函數存到一個函數名中

*定義函數

(函數名sum）

let sum = (num1: number,num2:number)=>{

? ? ? ? return num1+num2

}

*調用函數

sum（1，2）

//計算任意兩個數的和
let sum=(num1:number,num2:number)=>{console.log('參數的數據是',num1,num2)return num1+num2
}
console.log('箭頭函數的返回值是',sum(1,2))
console.log('箭頭函數的返回值是',sum(10,20))

練習：計算圓的周長

let cun=(r:number)=>{return 2*3.14*r
}
console.log('圓的周長是',cun(2))

三，ArkUI

ArkUI（方舟開發框架）：構建鴻蒙應用界面的框架

1.組件基礎

組件：界面構建與顯示的最小單位

*掌握組件寫法，使用組件布局界面

**容器組件：布局

寫法：組件名（）{}

? ? ? ? Colume（）{}????????（內容豎著排）

? ? ? ? Row(){}????????（內容橫著排）

**內容組件：內容

寫法：組件名（）

? ? ? ? Text（'內容'）要求內容都是字符串類型的

*****注意：先布局，再內容? ? ? ? （在bulid（）中寫代碼）

Column換行排列

Row橫向排列

@Entry
@Component
struct Index {build() {// Column(){//   Text('大壯')//   Text('大壯')//   Text('大壯')// }Row(){Text('大壯')Text('大壯')Text('大壯')}}
}

***build唯一的容器組件：用嵌套來解決

2.通用屬性

使用屬性美化組件

寫法：? ?組件

? ? ? ? ? ? ? ? .屬性（值）

屬性名作用屬性值
width寬度數值（默認單位vp）
height高度數值（默認單位vp）
backgroundColor背景色色值（內置顏色或十六進制色值）

@Entry
@Component
struct Index {//build 里面要有唯一的容器和組件build() {Column(){Text('大錘')//給Text組件添加寬高背景色//Color E->Enum 枚舉.backgroundColor(Color.Blue).width(100).height(50)Row(){}//滿屏尺寸為360vp或者100%//.width(360).width('100%').height(100).backgroundColor('#ff6600')}}
}

3，文本屬性

屬性名作用屬性值
fontSize字體大小數值（默認單位fp）
fontColor文字顏色色值（內置顏色或十六進制顏色）
fontWeight字體粗細100~900

@Entry
@Component
struct Index {//build 里面要有唯一的容器和組件build() {Column(){Text('大錘')//this.自定義構建函數名（數據列表1）//this.自定義構建函數名（數據列表2）.fontSize(30).fontColor(Color.Blue).fontWeight(800)}}
}

練習：新聞列表

@Entry
@Component
struct Index {//build 里面要有唯一的容器和組件build() {Column(){Text('在千年').fontSize(18).width(320)Text('新華社').fontSize(12).fontColor('#999999').width(320)Text('擴大開發對象').fontSize(18).width(320)Text('央視新聞').fontSize(12).fontColor('#999999').width(320)}}
}

4，圖像組件

使用圖像組件Image為界面添加圖像資源

Image（圖像資源路徑）

支持本地圖和網絡圖

路徑寫法：本地圖? ? Image（$r('app.media.xx')）

? ? ? ? ? ? ? ? ? 網絡圖? ? Image('https：xxx')

@Entry
@Component
struct Index {//build 里面要有唯一的容器和組件build() {Column(){//添加本地圖片Image($r('app.media.startIcon')).width(200)//添加網絡圖片Image('https://p5.ssl.qhimgs1.com/sdr/400__/t013c8c9997c4ffb6af.jpg').width(200)}}
}

5，內外邊距

使用內，外邊距調整組件及內容的位置

內邊距padding? ?外邊距margin

*希望內容和組件之間有間距用padding

*希望兩個組件之間有間距用margin

***四個方向間距相同? ? ?寫法：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 組件

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.padding(數值)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .margin(數值)

***四個方向間距不同? ? ? ? 寫法：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 組件

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .padding({top:10,botton:20,left:30,right:40})

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .margin({top:10,botton:20,left:30,right:40})

@Entry
@Component
struct Index {//build 里面要有唯一的容器和組件build() {Column(){Button('登錄').width('100%').margin({bottom:20})Button('注冊').width('100%').backgroundColor(Color.Green)}.backgroundColor('#DDDDDD').padding(10).padding({left:10,top:20,right:30,bottom:30})}
}

內邊距：拉開內容與組件邊緣的距離

外邊距：拉開兩個組件的距離

單值：四個方向間距相同

對象：四個方向間距不同

6，邊框屬性border

使用border屬性為組件添加邊框效果：設置邊框，圓角，粗細，等等

寫法：? ? ? ? 組件

? ? ? ? ? ? ? ? ? ? ? ? .border({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? width:粗細

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color:顏色

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style:線條樣式

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? radius:圓角

????????????????????????? })

@Entry
@Component
struct Index {//build 里面要有唯一的容器和組件build() {Column(){Text('+狀態').width(100).height(60).backgroundColor(Color.Brown)//文本水平居中.textAlign(TextAlign.Center).border({width:3,color:Color.Blue,style:BorderStyle.Dotted,radius:10})}.padding(20)}
}

四，界面布局

1.歌曲列表

使用組件及屬性方法布局歌曲列表

***先整體，再布局

***先布局，再內容，后美化

******List容器組件，里面加ListItem

????????寫法：List(){

? ? ? ? ? ? ????????? ? ListItem(){...}

? ? ? ? ? ? ????????? ? ListItem(){...}

????????????????????????}

******scrollBar滾動條? ?BarState滾動條狀態??

設置不顯示滾動條 .scrollBar(BarState.Off)

******擴充組件的安全區expandSafeArea? ? ??擴充到頂部SafeAreaEdge.TOP，底部SafeAreEdge.BOTTOM

組件(){}

.expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])

******.layoutWeight(數字)? ? ? 將外層組件剩余尺寸分成指定份數，當前組件占用對應的份數

******圖片.svg（支持用代碼，用屬性改變圖片顏色）? 用? ?.fillColor('')? ? 改變圖片顏色

import { EditableLeftIconType } from '@kit.ArkUI'@Entry
@Component
struct Index {build() {Column(){Text('猜你喜歡').fontColor('#fff').width('100%').margin({bottom:10})//容器組件List，支持滑動，加ListItemList(){ListItem(){Row(){//圖Image($r('app.media.1')).width(80).height(80).border({radius:8}).margin({right:5,left:5})//字Column(){Text('直到世界鏡頭').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom:15,left:10})Row(){Text('VIP').fontColor('#9A8E28').border({radius:8,color:'#9A8E28',width:1}).padding({left:5,right:5,top:3,bottom:3}).margin({right:8,left:8}).fontSize(10)Text('鳳凰傳奇').fontColor('#696969').fontSize(12)}.width('100%')}.layoutWeight(1)//占用剩余的所有空間//圖標//*圖片.svg（支持用代碼，用屬性改變圖片顏色）用.fillColor('')Image($r('app.media.4')).width(20).margin({right:5})}.width('100%').height(80)//.backgroundColor(Color.Pink).margin({bottom:10})}ListItem(){Row(){//圖Image($r('app.media.1')).width(80).height(80).border({radius:8}).margin({right:5,left:5})//字Column(){Text('直到世界鏡頭').fontColor('#F3F3F3').width('100%').fontWeight(700).margin({bottom:15,left:10})Row(){Text('VIP').fontColor('#9A8E28').border({radius:8,color:'#9A8E28',width:1}).padding({left:5,right:5,top:3,bottom:3}).margin({right:8,left:8}).fontSize(10)Text('鳳凰傳奇').fontColor('#696969').fontSize(12)}.width('100%')}.layoutWeight(1)//占用剩余的所有空間//圖標//*圖片.svg（支持用代碼，用屬性改變圖片顏色）用.fillColor('')Image($r('app.media.4')).width(20).margin({right:5})}.width('100%').height(80)//.backgroundColor(Color.Pink).margin({bottom:10})}}//折疊滾動條：  滾動條scrollBar   滾動條狀態BarState   關閉Off.scrollBar(BarState.Off)}.width('100%').height('100%').backgroundColor('#131313').padding({left:10,right:10})//擴充組件的安全區,擴充到頂部SafeAreaEdge.TOP，底部SafeAreEdge.BOTTOM.expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])}
}

2，if分支語句

根據邏輯條件結果，執行不同語句

????????if(邏輯條件){

? ????????? ? ? 條件成立執行的代碼

????????}else{

????????? ? ? ? 條件不成立執行的代碼

????????}

*if成立時

let age:number=20
if(age>=18){console.log('成年了')
}@Entry
@Component
struct Index {build() {Column() {}}
}

*if不成立，執行else

let age:number=10
if(age>=18){console.log('成年了')
}else{console.log('未成年')
}@Entry
@Component
struct Index {build() {Column() {}}
}

根據邏輯條件結果，執行不同語句

????????if（條件1）{

? ? ????????? ? 條件1成立執行的代碼

????????}else if（條件2）{

? ????????? ? ? 條件2成立執行的代碼

????????}else{

? ? ? ????????? 以上條件都不成立執行的代碼

????????}

let score:number=90
if(score>=80){console.log('A')
}else if (score>=70){console.log('B')
}else if(score>=60){console.log('C')
}else {console.log('D')
}

3.條件表達式

根據邏輯條件結果，執行不同的表達式，得到不同結果

寫法：? ? 條件？條件成立的表達式：條件不成立的表達式

let num1:number=10
let num2:number=20
num1>num2?console.log('num1大'):console.log('num2大')

4.條件渲染

根據邏輯條件結果，渲染不同的UI內容

寫法：

????????if(條件1){

? ? ????????? ? 組件1

????????}else if(條件2){

????????????????組件2

????????}else{

????????????????組件 else

????????}

*** “? ===? ”嚴格等號，判斷數值+類型

let num1:number=1@Entry
@Component
struct Index {build() {Column() {if(num1==1){Text('文本1')}else if(num1==2){Text('文本2')}else{Text('文本else')}}}
}

五，ArkTS核心

1.循環渲染

根據數組數據重復渲染UI內容

寫法：? ? ? ? ?ForEach（數組名字，箭頭函數）

ForEach（數組，（item：類型，index：number）=>{

? ? ? ? ? ? ? ? 組件

})

*item數組中的數據項? ? ? ? index索引

let names:string[]=['Tom','Kit','Dog']@Entry
@Component
struct Index {build() {Column() {ForEach(names,(item:string,index:number)=>{//字符串之間的‘+’，表示拼接Text(item+index)})}.padding(10)}
}

2.狀態管理（V2）

應用的運行時的狀態是參數，當參數改變時，UI渲染刷新

狀態變量：使用裝飾器裝飾，狀態變量數據改變會引起UI的渲染刷新

//V2狀態管理

@ComponentV2

struct Index{

? ? ? ? @Local num:number=1

? ? ? ? ......

}

*注意：

? ? ? ? （1）.狀態必須設置數據類型

? ? ? ? （2）.狀態必須設置初始值??

//.onClick點擊事件

組件

????????.onClick(()=>{

? ? ? ? ? ? ? ? this.num++

? ? ? ? ? ? ? ? this.num--

????????})

@Entry
//進入V2狀態
@ComponentV2
struct Index {//num狀態@Local num:number=0build() {Column() {Row(){Text('-').width(40).height(40).textAlign(TextAlign.Center).border({width:1,radius:{topLeft:3,bottomLeft:3},color:'#999'})//添加點擊事件，修改狀態.onClick(()=>{if(this.num>1){this.num--}})//狀態設置進來,將num的類型轉換為stringText(this.num.toString()).width(40).height(40).textAlign(TextAlign.Center).border({width:{top:1,bottom:1},color:'#999'})Text('+').width(40).height(40).textAlign(TextAlign.Center).border({width:1,radius:{topRight:3,bottomRight:3},color:'#999'})//添加點擊事件，修改狀態.onClick(()=>{this.num++})}.padding(20)}}
}

3.@Builder自定義構建函數

使用@Builder裝飾的函數也稱為“自定義構建函數”

@Builder裝飾的函數作用：封裝UI元素，提升復用性

*定義方法：

@Builder

自定義構建函數名（參數列表）{

? ? ? ? 要復用的組件結構

}

*調用方法

this.自定義構建函數名(數據列表1)

this.自定義構建函數名(數據列表2)

*自定義構建函數可以寫在組件的里面

@Entry
@Component
struct Index {//封裝自定義構建函數    傳入參數@BuildertitleBuilder(title:string){Row(){Text(title).fontColor('#fff').fontWeight(700).layoutWeight(1)Image($r('app.media.1')).width(22)}.width('100%').height(50)}build() {Column() {this.titleBuilder('每日推薦')this.titleBuilder('推薦歌單')}.width('100%').height('100%').expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM]).backgroundColor('#131313').padding({left:10,right:10})}
}

六，歌單交互效果

1.? ForEach循環渲染歌單

數組里面包對象，可以叫做對象數組

interface Music{image:stringname:stringauthor:string
}@Entry
@Component
struct Index {songs:Music[]=[{image:'https://img2.baidu.com/it/u=2614416695,3021245428&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',name:'美美美',author:'xiao田'},{image:'https://img0.baidu.com/it/u=1717687967,3764228590&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',name:'美美美',author:'xiao田'},{image:'https://img2.baidu.com/it/u=579662994,16903855&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',name:'美美美',author:'xiao田'},{image:'https://img0.baidu.com/it/u=2960273897,2797347908&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',name:'美美美',author:'xiao田'},{image:'https://img1.baidu.com/it/u=3259094038,2675463443&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img1.baidu.com/it/u=3745915620,3856927535&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img2.baidu.com/it/u=182231357,1062845046&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img1.baidu.com/it/u=2431701095,4189347457&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img2.baidu.com/it/u=2894005634,1549621335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img2.baidu.com/it/u=2578316366,3430436350&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'}]build() {Column() {Text('猜你喜歡').fontColor('#fff').width('100%').margin({bottom:10})List(){ForEach(this.songs,(item:Music,index:number)=>{ListItem(){Row(){//tuImage(item.image).width(80).border({radius:5}).margin({right:5,top:10,bottom:10})//ziColumn(){Text(item.name).fontColor('#fff').fontSize('14').margin({left:20,bottom:10}).width('100%')Row(){Text('VIP').fontColor('#fff').fontSize(12).margin(10).border({radius:8,width:1,color:'#fff'})Text(item.author).fontColor('#fff').fontSize(12)}.width('100%')}.layoutWeight(1)//fuImage($r('app.media.4')).width(10).margin(5)}}})}.scrollBar(BarState.Off)}.padding(20).width('100%').height('100%').backgroundColor('#131313').expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])}
}

2.播放狀態

層疊組件Stcak（）

interface Music{image:stringname:stringauthor:string
}@Entry
@ComponentV2
struct Index {@Local playIndex:number=-1songs:Music[]=[{image:'https://img2.baidu.com/it/u=2614416695,3021245428&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',name:'美美美',author:'xiao田'},{image:'https://img0.baidu.com/it/u=1717687967,3764228590&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',name:'美美美',author:'xiao田'},{image:'https://img2.baidu.com/it/u=579662994,16903855&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',name:'美美美',author:'xiao田'},{image:'https://img0.baidu.com/it/u=2960273897,2797347908&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',name:'美美美',author:'xiao田'},{image:'https://img1.baidu.com/it/u=3259094038,2675463443&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img1.baidu.com/it/u=3745915620,3856927535&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img2.baidu.com/it/u=182231357,1062845046&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img1.baidu.com/it/u=2431701095,4189347457&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img2.baidu.com/it/u=2894005634,1549621335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'},{image:'https://img2.baidu.com/it/u=2578316366,3430436350&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',name:'美美美',author:'xiao田'}]build() {Column() {Text('猜你喜歡').fontColor('#fff').width('100%').margin({bottom:10})List(){ForEach(this.songs,(item:Music,index:number)=>{ListItem(){Row(){//tuStack(){Image(item.image).width(80).border({radius:5}).margin({right:5,top:10,bottom:10})if(this.playIndex===index){Image($r('app.media.1')).width(10)}}//ziColumn(){Text(item.name).fontColor('#fff').fontSize('14').margin({left:20,bottom:10}).width('100%')Row(){Text('VIP').fontColor('#fff').fontSize(12).margin(10).border({radius:8,width:1,color:'#fff'})Text(item.author).fontColor('#fff').fontSize(12)}.width('100%')}.layoutWeight(1)//fuImage($r('app.media.4')).width(10).margin(5)}.onClick(()=>{this.playIndex=index})}})}.scrollBar(BarState.Off)}.padding(20).width('100%').height('100%').backgroundColor('#131313').expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])}
}

循環渲染數據的思路：

數組數據------>ForEach------>替換數據

控制播放狀態的思路：

播放狀態組件（層疊）--->狀態變量@Local播放索引--->條件渲染，播放狀態組件--->點擊事件修改狀態變量

層疊布局組件：

Stack容器組件

依據：【全網首套鴻蒙5.0零基礎入門到項目實戰開發全套視頻教程，原生鴻蒙正式版項目實戰從ArkTS+AI到V2應用狀態管理，鴻蒙API16應用開發全掌握】https://www.bilibili.com/video/BV1gSZvYzEdZ?p=25&vd_source=9e0031c99b0b852d596960307c0f094d

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

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

相關文章

【大前端】Vue 和 React 主要區別

【大前端】Vue 和 React 主要區別

Vue 與 React 的主要區別 在前端開發領域，Vue 和 React 是兩大最受歡迎的框架/庫。盡管它們都可以幫助我們構建現代化的 Web 應用，但在設計理念、開發方式、生態系統等方面有許多不同。本文將從多個角度對兩者進行對比。 目錄 框架與庫的定位核心理念…
閱讀更多...
高級RAG策略學習（五）——llama_index實現上下文窗口增強檢索RAG

高級RAG策略學習（五）——llama_index實現上下文窗口增強檢索RAG

LlamaIndex上下文窗口實現詳解 概述 本文檔詳細講解基于LlamaIndex框架實現的上下文窗口RAG系統，重點分析關鍵步驟、語法結構和參數配置。 1. 核心導入與環境配置 1.1 必要模塊導入 from llama_index.core import Settings from llama_index.llms.dashscope import …
閱讀更多...
Doris 數據倉庫例子

Doris 數據倉庫例子

基于 Apache Doris 構建數據倉庫的方案和具體例子。Doris 以其高性能、易用性和實時能力，成為構建現代化數據倉庫（特別是 OLAP 場景）的優秀選擇。一、為什么選擇 Doris 構建數據倉庫？Doris（原名 Palo）是一個…
閱讀更多...
WebRTC進階--WebRTC錯誤Failed to unprotect SRTP packet, err=9

WebRTC進階--WebRTC錯誤Failed to unprotect SRTP packet, err=9

文章目錄 原因分析 SRTP Anti-Replay 機制 客戶端源碼 err=9 的定義： 為什么會觸發 replay_fail ? 解決方向 原因分析 SRTP Anti-Replay 機制 SRTP 收包時會用一個 Replay Window（64/128個序列號大小）檢查 seq 是否合理。 如果你構造的恢復包 recover_seq 比當前接收窗口…
閱讀更多...
Web服務與Nginx詳解

Web服務與Nginx詳解

文章目錄前言一、Web 概念1.1 Web 的基本概念1.1.1 特點1.2 B/S 架構模型1.3 Web 請求與響應過程1.4 靜態資源與動態資源1.5 Web 的發展階段1.6 實驗：搭建最小 Web 服務1.6.1 實驗目標1.6.2 實驗步驟1.7 小結二、HTTP 與 HTTPS 協議2.1 HTTP 與 HTTPS 的區別2.2 HTT…
閱讀更多...
CC-Link IE FB 轉 DeviceNet 實現歐姆龍 PLC 與松下機器人在 SMT 生產線錫膏印刷環節的精準定位控制

CC-Link IE FB 轉 DeviceNet 實現歐姆龍 PLC 與松下機器人在 SMT 生產線錫膏印刷環節的精準定位控制

案例背景在電子制造行業，SMT（表面貼裝技術）生產線對設備的精準控制要求極高。某電子制造企業的 SMT 生產線中，錫膏印刷機、SPI（錫膏厚度檢測儀）等前段設備采用了基于 CC-Link IE FB 主站的歐姆龍 NJ 系列 P…
閱讀更多...
IP5326_BZ 支持C同口輸入輸出的移動電源芯片 2.4A的充放電電流 支持4LED指示燈

IP5326_BZ 支持C同口輸入輸出的移動電源芯片 2.4A的充放電電流 支持4LED指示燈

IP5326 是一款集成升壓轉換器、鋰電池充電管理、電池電量指示的多功能電源管理 SOC，為移動電源提供完整的電源解決方案。得益于 IP5326 的高集成度與豐富功能,使其在應用時僅需極少的外圍器件，并有效減小整體方案的尺寸，降低 BOM 成本。IP532…
閱讀更多...
若依基礎學習

若依基礎學習

若依基礎學習 1.修改數據庫密碼以及連接名： RuoYi-Vue-master\ruoyi-admin\src\main\resources\application-druid.yml2.各個文件作用： ruoyi-admin (主啟動)├── ruoyi-framework (框架核心)│ ├── ruoyi-common (通用工具)│ └── ruoyi-sy…
閱讀更多...
靶向肽Dcpep

靶向肽Dcpep

名稱：靶向肽Dcpep三字母序列：NH2-Phe-Tyr-Pro-Ser-Tyr-His-Ser-Thr-Pro-Gln-Arg-Pro-OH單字母序列：NH2-FYPSYHSTPQRP-OH分子式：C69H94N18O19分子量：1479.62備注：僅供科研，不用于人體簡述&#x…
閱讀更多...
華為在國內搞的研發基地有多野？標桿游學帶你解鎖“研發界頂流”

華為在國內搞的研發基地有多野？標桿游學帶你解鎖“研發界頂流”

寶子們！原來華為在國內有這么多“寶藏研發基地”，之前總覺得遙不可及走進深圳坂田總部——1.3平方公里的園區，走進去就像進了“科技版大觀園”，21層研發主樓看著就很有氣勢，天鵝湖邊的路全用科學家名字命名&#xff0c…
閱讀更多...
linux缺頁中斷頻繁怎么定位

linux缺頁中斷頻繁怎么定位

1，怎么看內存是否有缺頁中斷 查看日志: dmesg | grep “do fault” perf record -e page-faults -g -p <PID> 系統級監控： 使用 vmstat 查看全局缺頁中斷（si/so 表示換入/換出頁數） vmstat 1 # 每秒刷新，觀察 si/so 列 iostat顯示磁盤使用情況，舉例iostat -x …
閱讀更多...
06-Hadoop生態系統組件(2)

06-Hadoop生態系統組件(2)

4. 數據查詢組件 4.1 Apache Hive詳解 from typing import Dict, List, Any, Optional, Tuple, Union from dataclasses import dataclass from enum import Enum from datetime import datetime import re import jsonclass HiveTableType(Enum):"""Hive表類型…
閱讀更多...
【自動化實戰】Python操作Excel/WORD/PDF：openpyxl與docx庫詳解

【自動化實戰】Python操作Excel/WORD/PDF：openpyxl與docx庫詳解

在現代辦公環境中&#xff0c;我們經常需要處理各種文檔格式&#xff0c;如Excel表格、Word文檔和PDF文件。手動處理這些文檔不僅耗時&#xff0c;而且容易出錯。Python提供了多個強大的庫來實現文檔處理的自動化&#xff0c;本文將重點介紹如何使用openpyxl和docx庫來操作Exce…
閱讀更多...
構建安全的自動駕駛：軟件測試中的編碼規范與AI驗證

構建安全的自動駕駛：軟件測試中的編碼規范與AI驗證

自動駕駛不再只是未來想象&#xff0c;它正在以驚人的速度走向現實。但這一變革也帶來了軟件開發的全新命題。與傳統車輛不同&#xff0c;自動駕駛依賴復雜的AI模型、傳感系統和車載決策單元&#xff0c;必須應對更多現實環境的不確定性。在強監管、高風險、快節奏的背景下&…
閱讀更多...
2025高教社數學建模國賽C題 - NIPT的時點選擇與胎兒的異常判定（完整參考論文）

2025高教社數學建模國賽C題 - NIPT的時點選擇與胎兒的異常判定（完整參考論文）

基于機器學習與統計模型的NIPT檢測優化與異常判定問題研究 摘要 非侵入性產前檢測（NIPT）作為一種無創安全的胎兒染色體異常篩查技術，在現代產前醫療中發揮著重要作用，其準確性與檢測時機及異常判定的科學性直接影響臨床決策。然而，男胎Y染色體濃度受孕周數、孕婦BMI等多…
閱讀更多...
一種基于注解與AOP的Spring Boot接口限流防刷方案

一種基于注解與AOP的Spring Boot接口限流防刷方案

1. 添加Maven依賴<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupI…
閱讀更多...
代碼隨想錄二刷之“貪心算法”～GO

代碼隨想錄二刷之“貪心算法”～GO

簡單題目 1.455. 分發餅干 - 力扣&#xff08;LeetCode&#xff09; func findContentChildren(g []int, s []int) int {sort.Ints(g)sort.Ints(s)index : 0for i : 0;i<len(s);i{if index < len(g) && g[index] < s[i]{index}}return index }感悟&#xff…
閱讀更多...
Pod自動重啟問題排查：JDK 17 EA版本G1GC Bug導致的應用崩潰

Pod自動重啟問題排查：JDK 17 EA版本G1GC Bug導致的應用崩潰

Pod自動重啟問題排查：JDK 17 EA版本G1GC Bug導致的應用崩潰 問題背景 在生產環境中，我們遇到了一個嚴重的穩定性問題：應用Pod頻繁自動重啟，導致服務不穩定。通過深入分析JVM崩潰日志，最終定位到是JDK 17 EA版本中G1GC的一個已知Bug導致的。 問題現象 1. Pod重啟表現 應…
閱讀更多...
HTML文本格式化標簽

HTML文本格式化標簽

HTML提供了多種標簽用于文本的格式化&#xff0c;這些標簽可以改變文本的外觀&#xff08;如粗細、斜體&#xff09;或賦予文本特定的含義&#xff08;如強調、引用&#xff09;。1. 基本文本樣式標簽&#xff08;1&#xff09;粗體文本使用<b>或<strong>標簽可以使…
閱讀更多...
數據結構之單鏈表和環形鏈表的應用（二）-

數據結構之單鏈表和環形鏈表的應用（二）-

目錄一、相交鏈表二、環形鏈表I三、環形鏈表II總結一、相交鏈表 相交鏈表 首先理解什么是鏈表相交&#xff0c;相交即存在共用的節點&#xff0c;鏈表相交有三種情況&#xff0c; 中間位置相交頭部就開始相交尾部相交 如圖pcurA和pcurB就都有一個next指針指向同一個節點 這…
閱讀更多...
最新文章

Copyright @ 2022~2023