《鴻蒙應(yīng)用開發(fā)基礎(chǔ)》在線開放課程項目2設(shè)計轉(zhuǎn)盤式抽獎程序主講：本課程團隊UI常用組件-基礎(chǔ)組件目錄ContentsUI常用組件-基礎(chǔ)組件一、按鈕組件Button二、圖片組件Image三、進度條組件Progress七、文本輸入組件TextInput

四、二維碼組件QRCode五、單選框Radio六、資源分類與訪問方法八、拓展一、按鈕組件Button按鈕組件Button，可快速創(chuàng)建不同樣式的按鈕，其接口如下：Button(label?:ResourceStr,options?:{type?:ButtonType,stateEffect?:boolean})【例2-9】Button顯示效果，展示各種各樣的按鈕。實現(xiàn)此布局的思路：利用Button組件，可以展示普通型、膠囊型、圓形等按鈕。一、按鈕組件Button//ButtonExam.ets@Entry@ComponentstructButtonExam{@Statecount:number=-1build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Start,justifyContent:FlexAlign.SpaceBetween}){Text('普通按鈕').fontSize(14)

Flex({alignItems:ItemAlign.Center,justifyContent:FlexAlign.SpaceBetween}){Button('確定',{type:ButtonType.Normal,stateEffect:true}).borderRadius(8).backgroundColor(0xff0000).width(90)Button({type:ButtonType.Normal,stateEffect:true}){Row(){

LoadingProgress().width(20).height(20).margin({left:12}).color(0xFFFFFF)Text('加載中').fontSize(14).fontColor(0xffffff).margin({left:5,right:12})}.alignItems(VerticalAlign.Center)}.borderRadius(8).backgroundColor(0xff0000).width(90).height(40)Button('無效',{type:ButtonType.Normal,stateEffect:false}).opacity(0.4).borderRadius(8).backgroundColor(0xff0000).width(90)}一、按鈕組件ButtonText('膠囊型按鈕').fontSize(14)

Flex({alignItems:ItemAlign.Center,justifyContent:FlexAlign.SpaceBetween}){Button('確定',{type:ButtonType.Capsule,stateEffect:true}).backgroundColor(0x317aff).width(90)}Text('圓形按鈕').fontSize(14)Flex({alignItems:ItemAlign.Center,wrap:FlexWrap.Wrap}){Button({type:ButtonType.Circle,stateEffect:true}){LoadingProgress().width(20).height(20).color(0xFFFFFF)}.width(55).height(55).backgroundColor(0x317aff)}Text('顯示相關(guān)信息').fontSize(14)Text(`${this.count}`).fontSize(30).fontColor('#ff0000').backgroundColor(Color.Orange).borderRadius(10).width('60%').height(80).textAlign(TextAlign.Center).onClick(()=>{this.count++})if(this.count<0){Button('計數(shù)為負數(shù)').fontSize(30).height(50)}elseif(this.count%2===0){Button('計數(shù)是偶數(shù)').fontSize(30).height(50)}else{Button('計數(shù)是奇數(shù)').fontSize(30).height(50)}}.height(600).padding({left:35,right:35,top:35})}}二、圖片組件Image圖片組件Image，常用于在應(yīng)用中顯示圖片，其接口如下：Image(src:string|PixelMap|Resource)【例2-10】Image顯示效果，展示系統(tǒng)自帶的圖片。實現(xiàn)此布局的思路：利用Image組件即可。//ImageExam.ets@Entry@ComponentstructImageExam{build(){Column(){Image($r('app.media.startIcon')).width(100).height(100).margin(15).overlay('系統(tǒng)自帶圖片',{align:Alignment.Bottom,offset:{x:0,y:20}})}.width('100%').padding({left:10,top:10})}}三、進度條組件Progress進度條組件Progress，用于顯示內(nèi)容加載或操作處理等進度。其接口如下：Progress(options:{value:number,total?:number,type?:ProgressType})【例2-11】Progress顯示效果，展示線性進度條。實現(xiàn)此布局的思路：利用Progress組件即可。//ProgressExam.ets@Entry@ComponentstructProgressExam{build(){Column({space:15}){Progress({value:20,type:ProgressType.Linear}).width(200)}.width('100%').margin({top:30})}}四、二維碼組件QRCode二維碼組件QRCode，用于顯示單個二維碼，其接口如下：QRCode(value:string)【例2-12】QRCode顯示效果，展示一個二維碼。實現(xiàn)此布局的思路：利用QRCode組件即可。@Entry@ComponentstructQRCodeExam{build(){Column({space:5}){QRCode(‘’).width(300)}.width('100%').margin({top:25})}}五、單選框Radio單選框Radio，提供相應(yīng)的用戶交互選擇項，其接口如下：Radio(options:{value:string,group:string})【例2-13】Radio顯示效果，展示常用的單選框。實現(xiàn)此布局的思路：利用Radio組件即可。五、單選框Radio//RadioExam.ets@Entry@ComponentstructRadioExam{build(){Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}){Row({space:5}){Radio({value:'Radio1',group:'radioGroup'}).checked(true)Text('選項一')Radio({value:'Radio2',group:'radioGroup'}).checked(false)Text('選項二')Radio({value:'Radio3',group:'radioGroup'}).checked(false)Text('選項三')}}.padding({top:30})}}六、文本組件Text文本組件Text，顯示一段文本，它可以包含Span子組件。其接口如下：Text(content?:string|Resource)【例2-14】Text顯示效果，展示常用的文本框。實現(xiàn)此布局的思路：利用Text組件即可。六、文本組件Text//TextExam.ets@Entry@ComponentstructTextExam{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Start}){Text('重慶紅巖頌').fontSize(60).padding({bottom:20})Text(){Span('歌樂山峰秀，\n渣滓洞深藏。\n英魂昭日月，\n紅巖永流芳。\n烈火燃忠志，\n寒冰鑄鐵鋼。\n丹心傳萬古，\n豪氣貫四方。').fontSize(50).lineHeight(75)}}.width('100%').height('100%')}}七、文本輸入組件TextInput文本輸入組件TextInput，可以輸入普通文本，也可以輸入密碼、電子郵件、電話號碼以及純數(shù)字。其接口如下：TextInput(value?:{placeholder?:ResourceStr,text?:ResourceStr,controller?:TextInputController})【例2-15】TextInput顯示效果，實現(xiàn)用戶登錄頁面。實現(xiàn)此布局的思路：利用TextInput組件，再配合Button組件和Text組件即可。七、文本輸入組件TextInput//TextInputExam.ets@Entry@ComponentstructTextInputExam{build(){Column(){Text('用戶登錄').fontSize(50).fontWeight(700).margin(15)TextInput({placeholder:'請輸入用戶名'}).height(42).margin(15)TextInput({placeholder:'請輸入密碼'}).height(42).margin(15).type(InputType.Password).maxLength(30).showPasswordI