UI開發之基礎組件《鴻蒙HarmonyOS應用開發基礎教程》課程組基礎組件之--

組件通用信息《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123組件通用信息任務實施組件框架組件框架01延遲符號容器

基礎組件：文本、按鈕、圖片等

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

畫布組件：畫布、位圖、動畫等組件框架基礎媒體繪制畫布

媒體組件：視頻

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

和組件

的基本概念通過開發者社區論壇檢索，搜集其他開發者給出的鴻蒙應用開發學習建議，并嘗試在論壇中進行提問和答復通過API參考文檔檢索，搜索組件具備哪些通用屬性

和通用事件，以及組件分為哪些類型任務實施1任務實施12任務實施123總結基于ArkTS的聲明式開發范式組件框架

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

-包含哪三方面內容？遇到新知識怎么查？

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

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

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

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

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

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

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

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

-注冊登錄頁面。認真學鴻蒙一起干大事文本類組件之--TextArea《鴻蒙應用開發基礎教程（HarmonyOS）》課程組目錄123TextArea常見用法代碼演示TextArea簡介TextArea簡介01TextArea簡介TextArea常見用法02延遲符號TextArea接口TextArea屬性textAlign(TextAlign)文本對齊方式placeholderColor(ResourceColor)提示語文本顏色placeholderFont(Font)提示語文本樣式copyOption(CopyOptions)文本是否可復制TextArea事件TextArea寬度未設置時，默認撐滿最大寬度。A.對B.錯問題思考代碼演示03延遲符號代碼演示{"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%')總結TextArea概念

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

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

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

代碼演示2

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

.onStart(()=>{

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

//網頁加載結束})總結RichText概念

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

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

.onStart(()=>{//開始滾動時觸發回調}).onBounce(()=>{//完成一次滾動時觸發}).onFinish(()=>{

//滾動全部循環次數完成時觸發回調})總結Marquee概念

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

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

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

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

})總結TextPicker概念

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

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

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

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

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

Text(){

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

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

Text(){

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

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

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

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

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

.fontSize(30).borderRadius(10)

//創建圓形按鈕

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

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

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

-各種形式的按鈕。認真學鴻蒙一起干大事按鈕類組件之--Radio《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123Radio常見用法代碼演示Radio簡介Radio簡介01延遲符號Radio簡介RadioRadio常見用法02延遲符號Radio接口Radio屬性checked(boolean)單選框的選中狀態Radio事件Radio接口中的value參數是單選項內容？A.對B.錯問題思考代碼演示03延遲符號代碼演示1Column(){Text('“衣帶漸寬終不悔，為伊消得人憔悴”，其中的“消得”特指\n').fontSize(30).fontWeight(FontWeight.Bold)Row(){//第一個單選項}Row(){//第二個單選項}}.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('值得')}}總結Radio概念

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

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

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

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

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

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

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

Row(){

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

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

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

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

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

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

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

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

Image(this.url)//第三個子組件Text('錯金銀云紋青銅犀尊')//第四個子組件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('錯金銀云紋青銅犀尊')Image($r('app.media.b')).size({width:'100%',height:200}).objectFit(ImageFit.Auto)代碼演示3//module.json5配置文件"module":{

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

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

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

AnimationStatus)用于描述動畫狀態ImageAnimator事件圖片播放時長單位默認秒。A.對B.錯問題思考代碼演示03延遲符號代碼演示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})總結ImageAnimator概念

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

-旅游景點展示。認真學鴻蒙一起干大事圖片類組件之--

DataPanel《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123DataPanel常見用法代碼演示DataPanel簡介DataPanel簡介01延遲符號DataPanel簡介DataPanelDataPanel常見用法02延遲符號DataPanel接口DataPanelType參數type?:DataPanelType用于描述面板類型DataPanel屬性closeEffect(boolean)關閉旋轉動效DataPanel提供了數據占比文本顯示功能。A.對B.錯問題思考代碼演示03延遲符號代碼演示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)}}}總結DataPanel概念

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

-不同類型的DataPanel。認真學鴻蒙一起干大事圖片類組件之--Gauge《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123Gauge常見用法代碼演示Gauge簡介Gauge簡介01延遲符號Gauge簡介GaugeGauge常見用法02延遲符號Gauge接口Gauge屬性startAngle(number)起始角度位置endAngle(number)終止角度位置colors(Array<ColorStop>)分段顏色設置ColorStop參數ColorStop用于描述漸進色顏色斷點Gauge屬性strokeWidth(Length)環形厚度value(number)當前數據值Gauge提供了分段顏色設置功能。A.對B.錯問題思考代碼演示03延遲符號代碼演示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)}總結Gauge概念

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

-不同類型的Gauge。認真學鴻蒙一起干大事圖片類組件之--QRCode《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123QRCode常見用法代碼演示QRCode簡介QRCode簡介01延遲符號QRCode簡介QRCodeQRCode常見用法02延遲符號QRCode接口QRCode屬性color(ResourceColor)二維碼顏色backgroundColor(ResourceColor)二維碼背景顏色QRCode可以生成條形碼。A.對B.錯問題思考代碼演示03延遲符號代碼演示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)總結QRCode概念

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

-不同類型的QRCode。認真學鴻蒙一起干大事圖片類組件之--

PatternLock《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123PatternLock常見用法代碼演示PatternLock簡介PatternLock簡介01延遲符號PatternLock簡介PatternLockPatternLock常見用法02延遲符號PatternLock接口PatternLock屬性circleRadius(Length)圓點半徑regularColor(ResourceColor)圓點“未選中”狀態顏色selectedColor(ResourceColor)圓點“選中”狀態顏色sideLength(Length)組件寬高PatternLock屬性activeColor(ResourceColor)圓點在“激活”狀態的填充顏色pathStrokeWidth(number|string)連線寬度autoReset(boolean)組件重置pathColor(ResourceColor)連線顏色PatternLock事件圓點索引值按照先行后列從左到右順序記錄。A.對B.錯問題思考代碼演示03延遲符號代碼演示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="請再次輸入密碼"}else{//判斷兩次輸入的密碼是否相同，相同則提示密碼設置成功，否則提示重新輸入}})

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

總結PatternLock概念

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

-圖案密碼鎖二次驗證及重置。認真學鴻蒙一起干大事時間日期類組件之--

DatePicker《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123DatePicker常見用法代碼演示DatePicker簡介DatePicker簡介01延遲符號DatePicker簡介DatePickerDatePicker常見用法02延遲符號DatePicker接口DatePicker屬性lunar(boolean)是否顯示農歷DatePicker事件DatePickerResult參數DatePickerResult用于描述年月日信息監聽事件中1月份返回數值1。A.對B.錯問題思考代碼演示03延遲符號代碼演示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('切換公歷農歷').onClick(()=>{this.isLunar=!this.isLunar})總結DatePicker概念

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

-公歷農歷切換。認真學鴻蒙一起干大事時間日期類組件之--

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

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

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

總結TimePicker概念

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

–12/24小時切換。認真學鴻蒙一起干大事時間日期類組件之--

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

.onDateChange((value:number)=>{

this.time=value})

代碼演示2Button('顯示系統時間').margin(20).fontSize(20)

.onClick(()=>{

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

.onClick(()=>{

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

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

–系統時間的顯示和停止。認真學鴻蒙一起干大事時間日期類組件之--

TextTimer《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123TextTimer常見用法代碼演示TextTimer簡介TextTimer簡介01延遲符號TextTimer簡介TextTimerTextTimer常見用法02延遲符號TextTimer接口TextTimer屬性format(string)計時信息顯示格式TextTimer事件TextTimer控制器不提供以下哪些功能？A.開始B.暫停C.重置D.取消問題思考代碼演示03延遲符號代碼演示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()})

總結TextTimer概念

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

–秒表計時。認真學鴻蒙一起干大事進度條類組件之--

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

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

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

-不同類型的Progress。認真學鴻蒙一起干大事進度條類組件之--Rating《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123Rating常見用法代碼演示Rating簡介Rating簡介01延遲符號Rating簡介RatingRating常見用法02延遲符號Rating接口Rating屬性stepSize(number)評級步長starStyle({backgroundUri:string,foregroundUri:string,secondaryUri?:string})星級樣式stars(number)評分總數Rating事件Rating可以禁止用戶進行評級操作。A.對B.錯問題思考代碼演示03延遲符號代碼演示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對應未選中的星級圖標，foregroundUri對應選中的星級圖標，注意images目錄需要和pages同級*/.starStyle({backgroundUri:'/images/back.png',foregroundUri:'/images/fore.png'})總結Rating概念

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

-不同樣式的Rating

。認真學鴻蒙一起干大事進度條類組件之--Slider《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123Slider常見用法代碼演示Slider簡介Slider簡介01延遲符號Slider簡介SliderSlider常見用法02延遲符號Slider接口Slider接口Slider屬性trackColor(ResourceColor)滑軌背景顏色selectedColor(ResourceColor)滑軌已滑動部分顏色blockColor(ResourceColor)滑塊顏色Slider屬性showTips(boolean)是否顯示百分比氣泡提示trackThickness(Length)滑軌粗細showSteps(boolean)是否顯示步長刻度值Slider事件您見過哪些形式的Slider？問題思考代碼演示03延遲符號代碼演示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)總結Slider概念

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

-不同樣式的Slider

。認真學鴻蒙一起干大事菜單類組件之--Menu《鴻蒙HarmonyOS應用開發基礎教程》課程組目錄123Menu常見用法代碼演示Menu簡介Menu簡介01延遲符號Menu簡介MenuMenu常見用法02延遲符號Menu接口MenuItemOptionsMenu屬性fontSize(Length)統一設置所有文本的尺寸MenuItem事件彈出Menu支持哪些觸發方式？A.單擊B.長按C.鼠標右鍵問題思考代碼演示03延遲符號代碼演示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:"發送郵件"}).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)總結Menu概念

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

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