鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程 課件 單元4-UI開發(fā)之基礎(chǔ)組件

UI開發(fā)之基礎(chǔ)組件《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組基礎(chǔ)組件之--

組件通用信息《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123組件通用信息任務(wù)實(shí)施組件框架組件框架01延遲符號(hào)容器

基礎(chǔ)組件：文本、按鈕、圖片等

繪制組件：線形、矩形、圓形等

畫布組件：畫布、位圖、動(dòng)畫等組件框架基礎(chǔ)媒體繪制畫布

媒體組件：視頻

容器組件：布局、列表、導(dǎo)航等組件通用信息02延遲符號(hào)組件通用信息通用屬性通用事件手勢處理通用屬性組件普遍支持的用來設(shè)置組件基本標(biāo)識(shí)和外觀顯示特征的屬性，例如尺寸、位置、背景、邊框、文本樣式等通用事件通常是指那些可以在不同應(yīng)用場景或組件中復(fù)用的、具有通用性的事件，例如用戶點(diǎn)擊按鈕、滑動(dòng)屏幕、輸入文本等操作手勢處理對用戶在設(shè)備屏幕上執(zhí)行的觸控操作進(jìn)行識(shí)別、解析和響應(yīng)的過程，例如單擊手勢、長按手勢、平移手勢、捏合手勢、旋轉(zhuǎn)手勢和滑動(dòng)手勢等屬性010205040306尺寸設(shè)置位置設(shè)置邊框設(shè)置顯隱控制文本樣式設(shè)置背景設(shè)置通用屬性事件010205040306點(diǎn)擊事件觸摸事件拖拽事件組件區(qū)域變化事件鼠標(biāo)事件按鍵事件通用事件手勢010205040306TapGestureLongPressGesturePanGestureSwipeGestureRotationGesturePinchGesture手勢處理問題思考通用屬性是指所有組件都支持的屬性。A.對B.錯(cuò)任務(wù)實(shí)施03延遲符號(hào)任務(wù)實(shí)施321通過指南文檔檢索，查找鴻蒙如何定義UI

和組件

的基本概念通過開發(fā)者社區(qū)論壇檢索，搜集其他開發(fā)者給出的鴻蒙應(yīng)用開發(fā)學(xué)習(xí)建議，并嘗試在論壇中進(jìn)行提問和答復(fù)通過API參考文檔檢索，搜索組件具備哪些通用屬性

和通用事件，以及組件分為哪些類型任務(wù)實(shí)施1任務(wù)實(shí)施12任務(wù)實(shí)施123總結(jié)基于ArkTS的聲明式開發(fā)范式組件框架

-分為哪五大類？組件通用信息

-包含哪三方面內(nèi)容？遇到新知識(shí)怎么查？

-資料檢索途徑有哪些？認(rèn)真學(xué)鴻蒙一起干大事文本類組件之--Text《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Text常見用法代碼演示Text簡介Text簡介01延遲符號(hào)Text簡介TextText常見用法02延遲符號(hào)Text接口ResourceResource是資源引用類型，可以通過$r創(chuàng)建Resource類型對象，語法格式如下：$r('')belonging：系統(tǒng)資源或者應(yīng)用資源，相應(yīng)的取值為'sys'和'app'；type：資源類型，支持'color'、'float'、'string'、'media'等；name：資源名稱，在資源定義時(shí)確定。Text屬性fontSize（Length）文本大小fontColor（ResourceColor）文本顏色fontWeight（number|FontWeight|string）文本粗細(xì)textAlign（TextAlign）文本對齊方式TextAlign參數(shù)textAlign（TextAlign）設(shè)置文本段落在水平方向的對齊方式Length參數(shù)fontSize（Length）設(shè)置字體大小ResourceColor參數(shù)fontColor（ResourceColor）設(shè)置字體顏色RGB三原色顏色值組成：三原色1.#RGB：3位16進(jìn)制整數(shù)2.#RRGGBB3.#AARRGGBB#f00|#00ff00|#ff0000ffFontWeightfontWeight（number|FontWeight|string）設(shè)置文本的字體粗細(xì)問題思考Text接口如何引用string.json文件字符串？{"string":[{"name":"module_desc","value":"moduledescription"}]}$r('app.string.module_desc')代碼演示03延遲符號(hào)代碼演示1Text($r('app.string.text')).width('80%').border({width:2,color:Color.Black}).padding(10).fontSize(30)//文本顏色為紅色.fontColor('#f00')//文本內(nèi)容水平方向居中對齊.textAlign(TextAlign.Center).fontWeight(FontWeight.Bold)代碼演示2{"name":"text","value":"學(xué)而不思則罔\n思而不學(xué)則殆"}注意，工程在base/element、en_US/element和zh_CN/element三個(gè)目錄中均包含string.json文件，需要在上述三個(gè)文件中同步添加字符串內(nèi)容，實(shí)現(xiàn)字符串內(nèi)容的國際化開發(fā)?？偨Y(jié)Text概念

–應(yīng)用場景是什么？Text常見用法-接口和屬性有哪些？代碼演示

-《論語》。認(rèn)真學(xué)鴻蒙一起干大事文本類組件之--TextInput《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123TextInput常見用法代碼演示TextInput簡介TextInput簡介01TextInput簡介TextInput常見用法02延遲符號(hào)TextInput接口ResourceStr參數(shù)Resourcestr用于描述字符串可以使用的類型TextInput屬性textAlign(TextAlign)文本對齊方式type(InputType)輸入類型maxLength(number)最大字符數(shù)copyOption(CopyOptions)文本是否可復(fù)制InputType參數(shù)type

(InputType)設(shè)置輸入框類型CopyOptions參數(shù)copyOption(CopyOptions)設(shè)置輸入的文本是否可復(fù)制TextInput事件InputType枚舉值為Password時(shí)，顯示小眼睛圖標(biāo)并且默認(rèn)會(huì)將文字變成圓點(diǎn)。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1//placeholder設(shè)置無輸入時(shí)的提示文本

TextInput({placeholder:'請輸入用戶名'}).placeholderColor(Color.Gray).placeholderFont({size:30}).border({width:2,color:Color.Black}).caretColor(Color.Black).copyOption(CopyOptions.LocalDevice).margin(20)//輸入內(nèi)容發(fā)生變化時(shí)，觸發(fā)該回調(diào)方法

.onChange((value:string)=>{})代碼演示2

TextInput({placeholder:'請輸入密碼'}).placeholderColor(Color.Gray).placeholderFont({size:30}).border({width:2,color:Color.Black}).caretColor(Color.Black)//設(shè)置輸入內(nèi)容類型.type(InputType.Password).margin(20)總結(jié)TextInput概念

–應(yīng)用場景是什么？TextInput常見用法-接口、屬性和事件有哪些？代碼演示

-注冊登錄頁面。認(rèn)真學(xué)鴻蒙一起干大事文本類組件之--TextArea《鴻蒙應(yīng)用開發(fā)基礎(chǔ)教程（HarmonyOS）》課程組目錄123TextArea常見用法代碼演示TextArea簡介TextArea簡介01TextArea簡介TextArea常見用法02延遲符號(hào)TextArea接口TextArea屬性textAlign(TextAlign)文本對齊方式placeholderColor(ResourceColor)提示語文本顏色placeholderFont(Font)提示語文本樣式copyOption(CopyOptions)文本是否可復(fù)制TextArea事件TextArea寬度未設(shè)置時(shí)，默認(rèn)撐滿最大寬度。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示{"string":[{"name":"module_desc","value":"moduledescription"},

{"name":"text","value":"長亭外\n古道邊\n芳草碧連天"}]}代碼演示2Row(){Column(){

TextInput({placeholder:$r('app.string.text')}).placeholderFont({size:26}).margin(20)

TextArea({placeholder:$r('app.string.text')}).placeholderFont({size:26}).margin(20)}.width('100%')}.height('100%')總結(jié)TextArea概念

–應(yīng)用場景是什么？TextArea常見用法-接口、屬性和事件有哪些？代碼演示

-李叔同《送別》。認(rèn)真學(xué)鴻蒙一起干大事文本類組件之--RichText《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123RichText常見用法代碼演示RichText簡介RichText簡介01RichText簡介RichText常見用法02延遲符號(hào)RichText接口RichText標(biāo)簽RichText標(biāo)簽RichText屬性width(Length)組件寬度height(Length)組件高度size({width?:Length,height?:Length})組件寬高尺寸layoutWeight(number|string)組件權(quán)重RichText事件RichText支持padding，margin通用屬性。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1

@Statetext:string='<h1style="font-size:40px;text-align:center;">憫農(nóng)</h1>'+'<pstyle="font-size:30px;text-align:center;">鋤禾日當(dāng)午，汗滴禾下土。</p>'+'<pstyle="font-size:30px;text-align:center;">誰知盤中餐，粒粒皆辛苦。</p>'

代碼演示2

//text是自定義字符串變量RichText(this.text).align(Alignment.Center)

.onStart(()=>{

//開始加載網(wǎng)頁}).onComplete(()=>{

//網(wǎng)頁加載結(jié)束})總結(jié)RichText概念

–應(yīng)用場景是什么？RichText常見用法-接口、屬性和事件有哪些？代碼演示

-唐·李紳《憫農(nóng)》。認(rèn)真學(xué)鴻蒙一起干大事文本類組件之--Marquee《鴻蒙應(yīng)用開發(fā)基礎(chǔ)教程（HarmonyOS）》課程組目錄123Marquee常見用法代碼演示Marquee簡介Marquee簡介01Marquee簡介Marquee常見用法02延遲符號(hào)Marquee接口Marquee屬性fontColor(ResourceColor)字體顏色fontSize( Length)字體大小fontWeight(number|FontWeight|string)字體粗細(xì)fontFamily(string|Resource)字體列表Marquee事件Marquee可以控制滾動(dòng)速度。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示@Statetext:string='青青園中葵，'Marquee({start:true,step:6,loop:2,fromStart:true,src:this.text}).fontSize(50).fontWeight(FontWeight.Bold)

.onStart(()=>{//開始滾動(dòng)時(shí)觸發(fā)回調(diào)}).onBounce(()=>{//完成一次滾動(dòng)時(shí)觸發(fā)}).onFinish(()=>{

//滾動(dòng)全部循環(huán)次數(shù)完成時(shí)觸發(fā)回調(diào)})總結(jié)Marquee概念

–應(yīng)用場景是什么？Marquee常見用法-接口、屬性和事件有哪些？代碼演示

-漢樂府《長歌行》。認(rèn)真學(xué)鴻蒙一起干大事文本類組件之--TextPicker《鴻蒙應(yīng)用開發(fā)基礎(chǔ)教程（HarmonyOS）》課程組目錄123TextPicker常見用法代碼演示TextPicker簡介TextPicker簡介01TextPicker簡介TextPickerTextPicker常見用法02延遲符號(hào)TextPicker接口TextPicker屬性defaultPickerItemHeight(number|string)設(shè)置Picker各選擇項(xiàng)的高度TextPicker事件TextPicker支持通用屬性中的文本樣式設(shè)置。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示

foods:string[]=['河南胡辣湯','湖北熱干面','潮汕牛肉丸','新疆大盤雞','廣西螺獅粉'];TextPicker({range:this.foods,selected:0,value:'湖北熱干面'})/*通過defaultPickerItemHeight屬性設(shè)置TextPicker各選擇項(xiàng)的高度*/.defaultPickerItemHeight(80)

.onChange((value:string,index:number)=>{//index:當(dāng)前選中項(xiàng)的索引值//value:當(dāng)前選中項(xiàng)的文本

})總結(jié)TextPicker概念

–應(yīng)用場景是什么？TextPicker常見用法-接口、屬性和事件有哪些？代碼演示

-地方特色美食。認(rèn)真學(xué)鴻蒙一起干大事文本類組件之--Span《鴻蒙應(yīng)用開發(fā)基礎(chǔ)教程（HarmonyOS）》課程組目錄123Span常見用法代碼演示Span簡介Span簡介01Span簡介SpanSpan常見用法02延遲符號(hào)Span接口Span屬性letterSpacing(number|string)文本字符間距decoration{type:TextDecorationType,color?:ResourceColor}文本裝飾線textCase( TextCase)文本大小寫TextDecorationType參數(shù)TextDecorationType用于描述裝飾線樣式TextCase參數(shù)TextCase用于設(shè)置文本大小寫Span需要設(shè)置組件的寬高屬性。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1Row(){Column(){ Text(){//第一行文本內(nèi)容}

Text(){//第二行文本內(nèi)容}Text(){//第三行文本內(nèi)容}}.width('100%')}.height('100%')代碼演示2

Text(){//Span沒有單獨(dú)使用，而是嵌入到Text中使用

Span('車次號(hào):').fontSize(40)Span('永不返航').decoration({type:TextDecorationType.LineThrough,color:Color.Red}).fontSize(40)}代碼演示3

Text(){

Span('出發(fā)站:').fontSize(40)

Span('校園一角') .decoration({ type:TextDecorationType.Underline}) .fontSize(40)}代碼演示4

Text(){

Span('到達(dá)站:').fontSize(40)

Span('未來一隅').decoration({type:TextDecorationType.Underline}).fontSize(40)}總結(jié)Span概念

–應(yīng)用場景是什么？Span常見用法-接口和屬性有哪些？代碼演示

-畢業(yè)車次號(hào)。認(rèn)真學(xué)鴻蒙一起干大事按鈕類組件之--Button《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Button常見用法代碼演示Button簡介Button簡介01延遲符號(hào)Button簡介ButtonButton常見用法02延遲符號(hào)Button接口ButtonType參數(shù)Button接口Button屬性type(ButtonType)按鈕樣式stateEffect(boolean)是否開啟按壓態(tài)顯示效果Button事件問題思考按鈕內(nèi)容僅支持文本？A.對B.錯(cuò)代碼演示03延遲符號(hào)代碼演示1//創(chuàng)建膠囊型按鈕，這是API9版本的默認(rèn)按鈕樣式Button('登錄').fontSize(30).onClick(()=>{//按鈕單擊事件處理方法})

Button('登錄').fontSize(30).type(ButtonType.Normal)//創(chuàng)建矩形按鈕.margin(30)代碼演示2//創(chuàng)建圓角矩形按鈕Button('登錄',{type:ButtonType.Normal})

.fontSize(30).borderRadius(10)

//創(chuàng)建圓形按鈕

Button('登錄',{type:ButtonType.Circle})

.borderRadius(40).fontSize(20).margin(30)總結(jié)Button概念

–應(yīng)用場景是什么？Button常見用法-接口、屬性和事件有哪些？代碼演示

-各種形式的按鈕。認(rèn)真學(xué)鴻蒙一起干大事按鈕類組件之--Radio《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Radio常見用法代碼演示Radio簡介Radio簡介01延遲符號(hào)Radio簡介RadioRadio常見用法02延遲符號(hào)Radio接口Radio屬性checked(boolean)單選框的選中狀態(tài)Radio事件Radio接口中的value參數(shù)是單選項(xiàng)內(nèi)容？A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1Column(){Text('“衣帶漸寬終不悔，為伊消得人憔悴”，其中的“消得”特指\n').fontSize(30).fontWeight(FontWeight.Bold)Row(){//第一個(gè)單選項(xiàng)}Row(){//第二個(gè)單選項(xiàng)}}.alignItems(HorizontalAlign.Start)代碼演示2Column(){Text('“衣帶漸寬終不悔，為伊消得人憔悴”，其中的“消得”特指\n')Row(){

Radio({value:'A',group:'宋詞'})

.onChange((isChecked:boolean)=>{})Text('消瘦')}

}代碼演示3Column(){Text('“衣帶漸寬終不悔，為伊消得人憔悴”，其中的“消得”特指\n')

Row(){

Radio({value:'B',group:'宋詞'}).checked(true)

.onChange((isChecked:boolean)=>{})Text('值得')}}總結(jié)Radio概念

–應(yīng)用場景是什么？Radio常見用法-接口、屬性和事件有哪些？代碼演示

-柳永《蝶戀花》。認(rèn)真學(xué)鴻蒙一起干大事按鈕類組件之--Checkbox《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Checkbox常見用法代碼演示Checkbox簡介Checkbox簡介01延遲符號(hào)Checkbox簡介CheckboxCheckbox常見用法02延遲符號(hào)Checkbox接口Checkbox屬性select(boolean)多選框的選中狀態(tài)selectedColor(ResourceColor)多選框選中狀態(tài)顏色Checkbox事件Checkbox可以設(shè)置全選/全不選功能？A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1Column(){Text('以下屬于我國著名醫(yī)學(xué)家的有\(zhòng)n').fontSize(30) .fontWeight(FontWeight.Bold)Row(){//第一個(gè)多選項(xiàng)}Row(){//第二個(gè)多選項(xiàng)}Row(){//第三個(gè)多選項(xiàng)}}.alignItems(HorizontalAlign.Start)代碼演示2Column(){Text('以下屬于我國著名醫(yī)學(xué)家的有\(zhòng)n')Row(){

Checkbox({name:'A',group:'doctor'}) .select(true)

.onChange((value:boolean)=>{})Text('藥圣李時(shí)珍')}

}代碼演示3Column(){Text('以下屬于我國著名醫(yī)學(xué)家的有\(zhòng)n')Row(){

Checkbox({name:'B',group:'doctor'}) .select(true)

.onChange((value:boolean)=>{})Text('藥王孫思邈')}}代碼演示4Column(){Text('以下屬于我國著名醫(yī)學(xué)家的有\(zhòng)n')

Row(){

Checkbox({name:'C',group:'doctor'}) .select(true)

.onChange((value:boolean)=>{})Text('醫(yī)圣張仲景')}}總結(jié)Checkbox概念

–應(yīng)用場景是什么？Checkbox常見用法-接口、屬性和事件有哪些？代碼演示

-我國歷史著名醫(yī)學(xué)家。認(rèn)真學(xué)鴻蒙一起干大事按鈕類組件之--Toggle《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Toggle常見用法代碼演示Toggle簡介Toggle簡介01延遲符號(hào)Toggle簡介ToggleToggle常見用法02延遲符號(hào)Toggle接口ToggleType參數(shù)type:ToggleType用于描述開關(guān)類型Toggle屬性selectedColor(ResourceColor)組件打開狀態(tài)的背景顏色switchPointColor(ResourceColor)圓形滑塊顏色Toggle事件Toggle提供勾選框樣式、狀態(tài)按鈕樣式及開關(guān)樣式。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示Row(){Text('自動(dòng)調(diào)節(jié)')

Toggle({type:ToggleType.Switch,isOn:true}).selectedColor(0xed6f21).switchPointColor(0xe5ffffff).size({width:60,height:40}).margin({left:100})

.onChange((isOn:boolean)=>{})}總結(jié)Toggle概念

–應(yīng)用場景是什么？Toggle常見用法-接口和屬性有哪些？代碼演示

-自動(dòng)調(diào)節(jié)設(shè)置。認(rèn)真學(xué)鴻蒙一起干大事圖片類組件之--Image《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Image常見用法代碼演示Image簡介Image簡介01延遲符號(hào)Image簡介ImageImage常見用法02延遲符號(hào)Image接口Image屬性objectFit(ImageFit)圖片填充效果objectRepeat(ImageRepeat)）圖片重復(fù)樣式alt(string|Resource)加載時(shí)顯示的占位圖ImageFit參數(shù)objectFit(ImageFit)用于描述圖片縮放效果ImageRepeat參數(shù)objectRepeat(ImageRepeat）用于描述圖片的重復(fù)樣式Image事件Image支持動(dòng)態(tài)圖片展示。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1Column(){//第一個(gè)子組件Text('唐三彩')//第二個(gè)子組件

Image(this.url)//第三個(gè)子組件Text('錯(cuò)金銀云紋青銅犀尊')//第四個(gè)子組件Image($r('app.media.b'))}.width('100%').padding(10)代碼演示2Text('唐三彩')Image(this.url).size({width:'100%',height:200}).objectFit(ImageFit.Fill).alt($r('app.media.icon'))Text('錯(cuò)金銀云紋青銅犀尊')Image($r('app.media.b')).size({width:'100%',height:200}).objectFit(ImageFit.Auto)代碼演示3//module.json5配置文件"module":{

"requestPermissions":[{"name":"ohos.permission.INTERNET"}]}總結(jié)Image概念

–應(yīng)用場景是什么？Image常見用法-接口和屬性有哪些？代碼演示

-文物展示。認(rèn)真學(xué)鴻蒙一起干大事圖片類組件之-- ImageAnimator《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123ImageAnimator常見用法代碼演示ImageAnimator簡介ImageAnimator簡介01延遲符號(hào)ImageAnimator簡介ImageAnimatorImageAnimator常見用法02延遲符號(hào)ImageAnimator接口ImageAnimator屬性iterations(number)播放次數(shù)state(AnimationStatus)播放狀態(tài)duration(number)播放總時(shí)長images(Array<ImageFrameInfo>)圖片幀信息集合ImageFrameInfo參數(shù)ImageFrameInfo用于描述圖片幀信息集合AnimationStatus參數(shù)state(

AnimationStatus)用于描述動(dòng)畫狀態(tài)ImageAnimator事件圖片播放時(shí)長單位默認(rèn)秒。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1@Statestate:AnimationStatus=AnimationStatus.Initial

ImageAnimator().images([{src:$r('app.media.a'),duration:3000},{src:$r('app.media.b'),duration:2000},{src:$r('app.media.c'),duration:1000}]).state(this.state).iterations(-1)//-1表示無限次播放.size({width:'100%',height:'80%'})

代碼演示2ImageAnimator().onStart(()=>{//開始播放}).onPause(()=>{//暫停播放})Button('開始播放',{type:ButtonType.Normal}).onClick(()=>{this.state=AnimationStatus.Running})Button('暫停播放',{type:ButtonType.Normal}).onClick(()=>{this.state=AnimationStatus.Paused})總結(jié)ImageAnimator概念

–應(yīng)用場景是什么？ImageAnimator常見用法-接口、屬性和事件有哪些？代碼演示

-旅游景點(diǎn)展示。認(rèn)真學(xué)鴻蒙一起干大事圖片類組件之--

DataPanel《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123DataPanel常見用法代碼演示DataPanel簡介DataPanel簡介01延遲符號(hào)DataPanel簡介DataPanelDataPanel常見用法02延遲符號(hào)DataPanel接口DataPanelType參數(shù)type?:DataPanelType用于描述面板類型DataPanel屬性closeEffect(boolean)關(guān)閉旋轉(zhuǎn)動(dòng)效DataPanel提供了數(shù)據(jù)占比文本顯示功能。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示data:number[]=[20,40,40]build(){Row(){Column(){

DataPanel({values:this.data,max:-1,type:DataPanelType.Line}).size({width:200,height:20})

DataPanel({values:this.data,max:200,type:DataPanelType.Circle}).size({width:200,height:200}).margin(20)}}}總結(jié)DataPanel概念

–應(yīng)用場景是什么？DataPanel常見用法-接口和屬性有哪些？代碼演示

-不同類型的DataPanel。認(rèn)真學(xué)鴻蒙一起干大事圖片類組件之--Gauge《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Gauge常見用法代碼演示Gauge簡介Gauge簡介01延遲符號(hào)Gauge簡介GaugeGauge常見用法02延遲符號(hào)Gauge接口Gauge屬性startAngle(number)起始角度位置endAngle(number)終止角度位置colors(Array<ColorStop>)分段顏色設(shè)置ColorStop參數(shù)ColorStop用于描述漸進(jìn)色顏色斷點(diǎn)Gauge屬性strokeWidth(Length)環(huán)形厚度value(number)當(dāng)前數(shù)據(jù)值Gauge提供了分段顏色設(shè)置功能。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示Column(){

Gauge({value:50,min:0,max:100}).value(25).colors([[Color.Brown,1],[Color.Pink,1],[Color.Green,1],[Color.Orange,1]])

Gauge({value:30}).startAngle(0).endAngle(270).colors([[0x317AF7,1],[0x5BA854,1],[0xE08C3A,1]]).strokeWidth(20)}總結(jié)Gauge概念

–應(yīng)用場景是什么？Gauge常見用法-接口和屬性有哪些？代碼演示

-不同類型的Gauge。認(rèn)真學(xué)鴻蒙一起干大事圖片類組件之--QRCode《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123QRCode常見用法代碼演示QRCode簡介QRCode簡介01延遲符號(hào)QRCode簡介QRCodeQRCode常見用法02延遲符號(hào)QRCode接口QRCode屬性color(ResourceColor)二維碼顏色backgroundColor(ResourceColor)二維碼背景顏色QRCode可以生成條形碼。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示QRCode('普通二維碼').size({width:200,height:200}).margin(20)

QRCode('有顏色二維碼').size({width:200,height:200}).color(Color.Red)QRCode('帶背景顏色二維碼').size({width:200,height:200}).backgroundColor(Color.Blue).margin(20)總結(jié)QRCode概念

–應(yīng)用場景是什么？QRCode常見用法-接口和屬性有哪些？代碼演示

-不同類型的QRCode。認(rèn)真學(xué)鴻蒙一起干大事圖片類組件之--

PatternLock《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123PatternLock常見用法代碼演示PatternLock簡介PatternLock簡介01延遲符號(hào)PatternLock簡介PatternLockPatternLock常見用法02延遲符號(hào)PatternLock接口PatternLock屬性circleRadius(Length)圓點(diǎn)半徑regularColor(ResourceColor)圓點(diǎn)“未選中”狀態(tài)顏色selectedColor(ResourceColor)圓點(diǎn)“選中”狀態(tài)顏色sideLength(Length)組件寬高PatternLock屬性activeColor(ResourceColor)圓點(diǎn)在“激活”狀態(tài)的填充顏色pathStrokeWidth(number|string)連線寬度autoReset(boolean)組件重置pathColor(ResourceColor)連線顏色PatternLock事件圓點(diǎn)索引值按照先行后列從左到右順序記錄。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1@Statepasswords:number[]=[]@Statemessage:string='請輸入密碼'patternLockController:PatternLockController= newPatternLockController()Text(this.message）//PatternLockButton('重置圖案密碼鎖').onClick(()=>{this.patternLockController.reset()this.passwords=[]this.message='請輸入密碼'})

代碼演示2PatternLock(this.patternLockController).sideLength(300).circleRadius(9).regularColor(Color.Black).selectedColor(Color.Orange).activeColor(Color.Red).pathStrokeWidth(18).pathColor(Color.Pink).autoReset(true)代碼演示3PatternLock(this.patternLockController).onPatternComplete((input:Array<number>)=>{//判斷密碼長度是否大于0if(this.passwords.length==0){this.passwords=inputthis.message="請?jiān)俅屋斎朊艽a"}else{//判斷兩次輸入的密碼是否相同，相同則提示密碼設(shè)置成功，否則提示重新輸入}})

代碼演示4else{if(this.passwords.toString()===input.toString()){this.passwords=inputthis.message='密碼輸入成功:'+this.passwords.toString()}else{this.message='兩次輸入密碼不一致'}}

總結(jié)PatternLock概念

–應(yīng)用場景是什么？PatternLock常見用法-接口、屬性和事件有哪些？代碼演示

-圖案密碼鎖二次驗(yàn)證及重置。認(rèn)真學(xué)鴻蒙一起干大事時(shí)間日期類組件之--

DatePicker《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123DatePicker常見用法代碼演示DatePicker簡介DatePicker簡介01延遲符號(hào)DatePicker簡介DatePickerDatePicker常見用法02延遲符號(hào)DatePicker接口DatePicker屬性lunar(boolean)是否顯示農(nóng)歷DatePicker事件DatePickerResult參數(shù)DatePickerResult用于描述年月日信息監(jiān)聽事件中1月份返回?cái)?shù)值1。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1@StateisLunar:boolean=falseprivateselectedDate:Date=newDate()DatePicker({start:newDate('2024-1-1'),end:newDate('2034-12-31'),selected:this.selectedDate}).height('80%').lunar(this.isLunar)

.onChange((value:DatePickerResult)=>{})代碼演示2@StateisLunar:boolean=falseButton('切換公歷農(nóng)歷').onClick(()=>{this.isLunar=!this.isLunar})總結(jié)DatePicker概念

–應(yīng)用場景是什么？DatePicker常見用法-接口、屬性和事件有哪些？代碼演示

-公歷農(nóng)歷切換。認(rèn)真學(xué)鴻蒙一起干大事時(shí)間日期類組件之--

TimePicker《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123TimePicker常見用法代碼演示TimePicker簡介TimePicker簡介01延遲符號(hào)TimePicker簡介TimePickerTimePicker常見用法02延遲符號(hào)TimePicker接口TimePicker屬性useMilitaryTime(boolean)展示時(shí)間是否為24小時(shí)制TimePicker事件TimePicker支持時(shí)、分、秒三種數(shù)據(jù)選擇。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示@StateisMilitaryTime:boolean=falseprivateselectedTime:Date=newDate()TimePicker({selected:this.selectedTime}).useMilitaryTime(this.isMilitaryTime)

.onChange((value:TimePickerResult)=>{})

代碼演示Button('切換12小時(shí)制/24小時(shí)制').onClick(()=>{this.isMilitaryTime=!this.isMilitaryTime})

總結(jié)TimePicker概念

–應(yīng)用場景是什么？TimePicker常見用法-接口、屬性和事件有哪些？代碼演示

–12/24小時(shí)切換。認(rèn)真學(xué)鴻蒙一起干大事時(shí)間日期類組件之--

TextClock《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123TextClock常見用法代碼演示TextClock簡介TextClock簡介01延遲符號(hào)TextClock簡介TextClockTextClock常見用法02延遲符號(hào)TextClock接口TextClock屬性format(string)顯示時(shí)間格式TextClock事件TextClock支持自定義日期間隔符。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1@Statetime:number=0controller:TextClockController=newTextClockController()Text('時(shí)間數(shù)據(jù)：'+this.time)TextClock({timeZoneOffset:-8,controller:this.controller}).fontSize(30).format('yyyy-MM-ddHH:mm:ss')

.onDateChange((value:number)=>{

this.time=value})

代碼演示2Button('顯示系統(tǒng)時(shí)間').margin(20).fontSize(20)

.onClick(()=>{

this.controller.start()})Button('停止時(shí)間顯示').fontSize(20)

.onClick(()=>{

this.controller.stop()})總結(jié)TextClock概念

–應(yīng)用場景是什么？TextClock常見用法-接口、屬性和事件有哪些？代碼演示

–系統(tǒng)時(shí)間的顯示和停止。認(rèn)真學(xué)鴻蒙一起干大事時(shí)間日期類組件之--

TextTimer《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123TextTimer常見用法代碼演示TextTimer簡介TextTimer簡介01延遲符號(hào)TextTimer簡介TextTimerTextTimer常見用法02延遲符號(hào)TextTimer接口TextTimer屬性format(string)計(jì)時(shí)信息顯示格式TextTimer事件TextTimer控制器不提供以下哪些功能？A.開始B.暫停C.重置D.取消問題思考代碼演示03延遲符號(hào)代碼演示textTimerController:TextTimerController=newTextTimerController()TextTimer({controller: this.textTimerController,isCountDown:true,count:60*1000}).fontSize(30).margin(30)

.onTimer((utc:number,elapsedTime:number)=> {})

代碼演示Button("開始")

.onClick(()=>{

this.textTimerController.start()})Button("暫停")

.onClick(()=>{

this.textTimerController.pause()})Button("重置").onClick(()=>{

this.textTimerController.reset()})

總結(jié)TextTimer概念

–應(yīng)用場景是什么？TextTimer常見用法-接口、屬性和事件有哪些？代碼演示

–秒表計(jì)時(shí)。認(rèn)真學(xué)鴻蒙一起干大事進(jìn)度條類組件之--

Progress《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Progress常見用法代碼演示Progress簡介Progress簡介01延遲符號(hào)Progress簡介ProgressProgress常見用法02延遲符號(hào)Progress接口Progress屬性color(ResourceColor)進(jìn)度條前景色backgroundColor(ResourceColor)進(jìn)度條底色style({strokeWidth?:Length,scaleCount?:number,scaleWidth?:Length})進(jìn)度條樣式value(number)當(dāng)前進(jìn)度值用戶可以調(diào)節(jié)Progress進(jìn)度值。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示1Progress({value:50,total:100,type:ProgressType.Linear}).width('80%').color(Color.Green)//創(chuàng)建了環(huán)形無刻度樣式進(jìn)度條Progress({value:50,type: ProgressType.Ring}).width('30%').margin(30)代碼演示2//建了圓形樣式進(jìn)度條Progress({value:50,type:ProgressType.Eclipse}).width('30%')//創(chuàng)建了環(huán)形有刻度樣式進(jìn)度條

Progress({value:50,type:ProgressType.ScaleRing}).width('30%').margin(30)代碼演示3//創(chuàng)建了環(huán)形有刻度樣式進(jìn)度條，同時(shí)通過style屬性細(xì)化了進(jìn)度條樣式Progress({value:60,type:ProgressType.ScaleRing}).width('30%').color(Color.Red).style({strokeWidth:20,scaleCount:10,scaleWidth:3})總結(jié)Progress概念

–應(yīng)用場景是什么？Progress常見用法-接口和屬性有哪些？代碼演示

-不同類型的Progress。認(rèn)真學(xué)鴻蒙一起干大事進(jìn)度條類組件之--Rating《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Rating常見用法代碼演示Rating簡介Rating簡介01延遲符號(hào)Rating簡介RatingRating常見用法02延遲符號(hào)Rating接口Rating屬性stepSize(number)評級步長starStyle({backgroundUri:string,foregroundUri:string,secondaryUri?:string})星級樣式stars(number)評分總數(shù)Rating事件Rating可以禁止用戶進(jìn)行評級操作。A.對B.錯(cuò)問題思考代碼演示03延遲符號(hào)代碼演示Rating({rating:3.5,indicator:false}).size({width:'80%',height:80})Rating({rating:2,indicator:false}).size({width:'80%',height:80}).margin(20).stars(5).stepSize(1)

.onChange((value:number)=>{})代碼演示Rating({rating:2,indicator:false})/*backgroundUri對應(yīng)未選中的星級圖標(biāo)，foregroundUri對應(yīng)選中的星級圖標(biāo)，注意images目錄需要和pages同級*/.starStyle({backgroundUri:'/images/back.png',foregroundUri:'/images/fore.png'})總結(jié)Rating概念

–應(yīng)用場景是什么？Rating常見用法-接口和屬性有哪些？代碼演示

-不同樣式的Rating

。認(rèn)真學(xué)鴻蒙一起干大事進(jìn)度條類組件之--Slider《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Slider常見用法代碼演示Slider簡介Slider簡介01延遲符號(hào)Slider簡介SliderSlider常見用法02延遲符號(hào)Slider接口Slider接口Slider屬性trackColor(ResourceColor)滑軌背景顏色selectedColor(ResourceColor)滑軌已滑動(dòng)部分顏色blockColor(ResourceColor)滑塊顏色Slider屬性showTips(boolean)是否顯示百分比氣泡提示trackThickness(Length)滑軌粗細(xì)showSteps(boolean)是否顯示步長刻度值Slider事件您見過哪些形式的Slider？問題思考代碼演示03延遲符號(hào)代碼演示Slider({value:50}).margin(20)Slider({value:50,style:SliderStyle.InSet}).margin(20)Slider({value:50,style:SliderStyle.OutSet}).blockColor(Color.Red).trackColor(Color.Gray).selectedColor(Color.Orange).margin(20)

.onChange((value:number,mode:SliderChangeMode)=>{})代碼演示Slider({value:50,style:SliderStyle.OutSet,direction:Axis.Vertical,reverse:true})

.showTips(true).blockColor(Color.Black).height(300)總結(jié)Slider概念

–應(yīng)用場景是什么？Slider常見用法-接口和屬性有哪些？代碼演示

-不同樣式的Slider

。認(rèn)真學(xué)鴻蒙一起干大事菜單類組件之--Menu《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Menu常見用法代碼演示Menu簡介Menu簡介01延遲符號(hào)Menu簡介MenuMenu常見用法02延遲符號(hào)Menu接口MenuItemOptionsMenu屬性fontSize(Length)統(tǒng)一設(shè)置所有文本的尺寸MenuItem事件彈出Menu支持哪些觸發(fā)方式？A.單擊B.長按C.鼠標(biāo)右鍵問題思考代碼演示03延遲符號(hào)代碼演示1@BuilderClickMenu(){Menu(){

MenuItem({startIcon:$r("app.media.add"),content:"新建",labelInfo:"Ctrl+N"})

.onChange((selected)=>{})

MenuItem({startIcon:$r("app.media.download_email"),content:"下載",labelInfo:"Ctrl+V"})}.fontSize(24)}代碼演示2Button('單擊顯示菜單').fontSize(20).fontWeight(FontWeight.Bold)

.padding(20)

.bindMenu(this.ClickMenu())代碼演示3@BuilderPressMenu(){

Menu(){

this.ClickMenu()

MenuItemGroup({header:'郵件操作'}){MenuItem({startIcon:this.sendicon,content:"發(fā)送郵件"}).selectIcon(false)

MenuItem({startIcon:this.downloadicon,content:"下載郵件"}).selectIcon(true).selected(true)}}}代碼演示4Button('長按顯示菜單').fontSize(20).fontWeight(FontWeight.Bold).padding(20).margin(30)

.bindContextMenu(this.PressMenu(),ResponseType.LongPress)總結(jié)Menu概念

–應(yīng)用場景是什么？Menu常見用法-接口和屬性有哪些？代碼演示

–不同樣式的Menu。認(rèn)真學(xué)鴻蒙一起干大事菜單類組件之--Select《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Select常見用法代碼演示Select簡介Select簡介01延遲符號(hào)Select簡介SelectSelect常見用法02延遲符號(hào)Select接口Select屬性value(string)按鈕文本內(nèi)容font(Font)按鈕文本樣式fontColor(ResourceColor)按鈕文本顏色selected(number)初始項(xiàng)索引值Select屬性selectedOptionFont(Font)選中項(xiàng)文本樣式selectedOptionFontColor(ResourceColor)選中項(xiàng)文本顏色selectedOptionBgColor(ResourceColor)選中項(xiàng)背景顏色Select屬性optionFont(Font)菜單項(xiàng)文本樣式o