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

UI開發(fā)之容器組件《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組布局類組件之--Row《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Row常見用法代碼演示Row簡介Row簡介01延遲符號Row簡介RowRow常見用法02延遲符號Row接口Row屬性alignItems(VerticalAlign)子組件在垂直方向上的對齊方式j(luò)ustifyContent(FlexAlign)子組件在水平方向上的對齊方式VerticalAlign參數(shù)alignItems(

VerticalAlign)垂直方向?qū)R方式FlexAlign參數(shù)justifyContent(FlexAlign)水平方向?qū)R方式問題思考Row中子組件設(shè)置哪個通用屬性可以實現(xiàn)寬度三等分功能？A.widthB.layoutWeight代碼演示03延遲符號代碼演示1Row({space:5}){Text('籃球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Red}).padding(10)

}.size({width:'100%',height:100}).border({width:2,style:BorderStyle.Dashed}).margin({top:20})代碼演示2Row({space:5}){Text('足球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Green}).padding(10)

}.size({width:'100%',height:100}).border({width:2,style:BorderStyle.Dashed}).margin({top:20})代碼演示3Row({space:5}){Text('排球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Blue}).padding(10)

}.size({width:'100%',height:100}).border({width:2,style:BorderStyle.Dashed}).margin({top:20})總結(jié)Row概念

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

–三大球水平布局展示。認(rèn)真學(xué)鴻蒙一起干大事布局類組件之--Column《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Column常見用法代碼演示Column簡介Column簡介01延遲符號Column簡介ColumnColumn常見用法02延遲符號Column接口Column屬性alignItems(HorizontalAlign)子組件在水平方向上的對齊方式j(luò)ustifyContent(FlexAlign)子組件在垂直方向上的對齊方式HorizontalAlign參數(shù)alignItems(HorizontalAlign)水平方向?qū)R方式問題思考Column設(shè)置哪個屬性可以實現(xiàn)子組件主軸方向均分效果？A.FlexAlign.CenterB.FlexAlign.SpaceEvenly代碼演示03延遲符號代碼演示1Column({space:5}){Text('籃球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Red}).padding(10)

}.size({width:'100%',height:240}).border({width:2,style:BorderStyle.Dashed}).margin({top:20})代碼演示2Column({space:5}){Text('足球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Green}).padding(10)

}.size({width:'100%',height:100}).border({width:2,style:BorderStyle.Dashed}).margin({top:20})代碼演示3Column({space:5}){Text('排球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Blue}).padding(10)

}.size({width:'100%',height:100}).border({width:2,style:BorderStyle.Dashed}).margin({top:20})總結(jié)Column概念

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

–三大球垂直展示。認(rèn)真學(xué)鴻蒙一起干大事布局類組件之--Stack《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Stack常見用法代碼演示Stack簡介Stack簡介01延遲符號Stack簡介StackStack常見用法02延遲符號Stack接口Alignment參數(shù)alignContent(Alignment)子組件對齊方式Stack屬性alignContent(Alignment)子組件在容器內(nèi)的對齊方式思考Stack允許子組件覆蓋其他子組件。A.對B.錯代碼演示03延遲符號代碼演示

Stack(){Text() .size({width:'100%',height:300}) .backgroundColor(0x55333333)Image($r('app.media.play')) .size({width:100,height:100})}.size({width:'100%',height:'100%'}).alignContent(Alignment.Center)總結(jié)Stack概念

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

–視頻暫停頁面。認(rèn)真學(xué)鴻蒙一起干大事布局類組件之-- RelativeContainer《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123RelativeContainer常見用法代碼演示RelativeContainer簡介RelativeContainer簡介01延遲符號RelativeContainer簡介RelativeContainerRelativeContainer常見用法02延遲符號RelativeContainer接口RelativeContainer屬性錨點方向alignRules({

middle:{anchor:'__container__',align:HorizontalAlign.Center},

center:{anchor:'__container__',align:VerticalAlign.Center}})水平方向為left，middle，right，垂直方向為top，center，bottom水平方向?qū)R方式：HorizontalAlign.Start，HorizontalAlign.Center，HorizontalAlign.End。垂直方向?qū)R方式：VerticalAlign.Top，VerticalAlign.Center，VerticalAlign.Bottom。問題思考RelativeContainer中子組件如果不作為錨點則不需要設(shè)置id？A.對B.錯代碼演示03延遲符號代碼演示1

RelativeContainer(){//子組件默認(rèn)相對父布局水平方向左對齊、垂直方向頂部對齊Text('上左').fontSize(30).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).border({width:2}).padding(5).id('top_left')

}代碼演示2Text('上中').fontSize(30).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).border({width:2}).padding(5).id('top_middle')

//相對于父布局水平方向居中.alignRules({middle:{anchor:'__container__',align:HorizontalAlign.Center}})代碼演示3Text('上右').fontSize(30).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).border({width:2}).padding(5).id('top_right')//相對于父布局水平方向右對齊

.alignRules({right:{anchor:'__container__',align:HorizontalAlign.End} })代碼演示4Text('中左').fontSize(30).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).border({width:2}).padding(5).id('middle_left')//相對于父布局垂直方向居中

.alignRules({center:{anchor:'__container__',align:VerticalAlign.Center} })代碼演示5Text('中').textAlign(TextAlign.Center).id('center')//相對于父布局水平方向和垂直方向同時居中

.alignRules({middle:{anchor:'__container__',align:HorizontalAlign.Center},center:{anchor:'__container__',align:VerticalAlign.Center}})代碼演示6Text('中右').id('middle_right')//相對于父布局水平方向右對齊，垂直方向居中

.alignRules({center:{anchor:'__container__',align:VerticalAlign.Center},right:{anchor:"__container__",align:HorizontalAlign.End}})代碼演示7Text('下左').fontSize(30).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).border({width:2}).padding(5).id('bottom_left')//相對于父布局垂直方向底端對齊

.alignRules({bottom:{anchor:'__container__',align:VerticalAlign.Bottom}})代碼演示8Text('下中').id('bottom_middle')//相對于父布局垂直方向底端對齊，水平方向居中

.alignRules({bottom:{anchor:'__container__',align:VerticalAlign.Bottom},middle:{anchor:'__container__',align:HorizontalAlign.Center}})代碼演示9Text('下右').id('bottom_right')//相對于父布局垂直方向底端對齊，水平方向右對齊

.alignRules({bottom:{anchor:'__container__',align:VerticalAlign.Bottom},right:{anchor:'__container__',align:HorizontalAlign.End}})代碼演示10Text('上').id('top')//位于center組件上邊，左對齊

.alignRules({bottom:{anchor:'center',align:VerticalAlign.Top},left:{anchor:'center',align:HorizontalAlign.Start}}).margin({bottom:10})代碼演示11Text('下').id('bottom')//位于center組件下邊，左對齊

.alignRules({top:{anchor:'center',align:VerticalAlign.Bottom},left:{anchor:'center',align:HorizontalAlign.Start}}).margin({top:10})代碼演示12Text('左').id('left')//位于center組件左邊，上對齊

.alignRules({top:{anchor:'center',align:VerticalAlign.Top},right:{anchor:'center',align:HorizontalAlign.Start}}).margin({right:10})代碼演示13Text('右').id('right')//位于center組件右邊，上對齊

.alignRules({top:{anchor:'center',align:VerticalAlign.Top},left:{anchor:'center',align:HorizontalAlign.End}}).margin({left:10})總結(jié)RelativeContainer概念

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

–常見功能展示。認(rèn)真學(xué)鴻蒙一起干大事布局類組件之--Flex《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Flex常見用法代碼演示Flex簡介Flex簡介01延遲符號Flex簡介FlexFlex簡介容器默認(rèn)存在主軸與交叉軸，子元素默認(rèn)沿主軸排列主軸指子組件沿著主要的方向排列的軸線交叉軸是垂直于主軸方向的軸線Flex常見用法02延遲符號Flex接口FlexDirection參數(shù)direction?:FlexDirection主軸排列方向FlexWrap參數(shù)wrap?:FlexWrap單行/列或者多行/列排列ItemAlign參數(shù)alignItems?:ItemAlign交叉軸對齊格式問題拓展Flex設(shè)置哪個屬性可以實現(xiàn)子組件“瓜分”父組件的剩余空間效果？A.flexBasisB.flexGrow代碼演示03延遲符號代碼演示1/*主軸與行方向一致作為布局模式，元素在主軸方向中心對齊*/Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.Center}){Text('籃球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Red}).padding(10)

}代碼演示2/*第一個元素與行首對齊，最后一個元素與行尾對齊，相鄰元素之間距離相同*/Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween}){Text('籃球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Red}).padding(10)

}代碼演示3/*第一個元素與行首的間距、最后一個元素到行尾的間距以及相鄰元素之間的距離都完全一樣*/Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceEvenly}){Text('籃球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Red}).padding(10)

}代碼演示4/*默認(rèn)不換行，如果子組件的寬度總和大于父元素的寬度，則子組件會被壓縮寬度*/

Flex(){Text('兵乓球')//設(shè)置子組件在主軸方向上的尺寸

.flexBasis(300)

.fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Blue}).padding(10)

}代碼演示5/*多行多列布局，每一行子組件按照主軸方向排列，自動換行*/

Flex({wrap:FlexWrap.Wrap}){Text('籃球').fontSize(30).fontWeight(FontWeight.Bold).border({width:2,color:Color.Red}).padding(10)

}總結(jié)Flex概念

–應(yīng)用場景是什么？Flex常見用法-接口參數(shù)有哪些？代碼演示

–常見功能展示。認(rèn)真學(xué)鴻蒙一起干大事布局類組件之--

GridRow和GridCol《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123GridRow和GridCol常見用法代碼演示GridRow和GridCol簡介GridRow和GridCol簡介01延遲符號GridRow和GridCol簡介GridRow和GridCol默認(rèn)斷點自定義斷點GridRow和GridCol常見用法02延遲符號GridRow接口GutterOption參數(shù)gutter?:Length|GutterOption柵格布局間距GridRowColumnOption參數(shù)columns?:number|GridRowColumnOption布局列數(shù)BreakPoints參數(shù)breakpoints?:BreakPoints柵格斷點//啟用xs、sm、md共3個斷點breakpoints:{value:["100vp","200vp"]}//啟用xs、sm、md、lg共4個斷點，斷點范圍值必須單調(diào)遞增breakpoints:{value:["320vp","520vp","840vp"]}//啟用xs、sm、md、lg、xl共5個斷點，斷點范圍數(shù)量不可超過斷點可取值數(shù)量-1

breakpoints:{value:["320vp","520vp","840vp","1080vp"]}GridRowDirection參數(shù)direction?:GridRowDirection布局排列方向GridCol接口GridColColumnOption參數(shù)GridCol屬性span(number|GridColColumnOption)柵格子組件占用列數(shù)offset(number|GridColColumnOption)相對前一個柵格子組件偏移列數(shù)order(number|GridColColumnOption)元素的序號問題思考GridRow和GridCol實現(xiàn)了不同的設(shè)備上自適應(yīng)排版，使得頁面布局更加靈活和適應(yīng)性強。A.對B.錯代碼演示03延遲符號代碼演示1代碼演示2data:string[]=['一','二','三','四','五','六','七','八']GridRow({columns:{sm:4,md:8},gutter:{x:10,y:10}}){ForEach(this.data,(num)=>{

GridCol(){ Text(num).border({width:2,color:Color.Black}).textAlign(TextAlign.Center).width('100%')}})}總結(jié)GridRow和GridCol概念

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

–多尺寸多設(shè)備的動態(tài)布局。認(rèn)真學(xué)鴻蒙一起干大事列表類組件之--List《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123List常見用法代碼演示List簡介List簡介01延遲符號List簡介ListList常見用法02延遲符號List接口ListItem接口List屬性divider({strokeWidth:Length,color?:ResourceColor,...})分割線樣式cachedCount(number)預(yù)加載數(shù)量multiSelectable(boolean)是否開啟鼠標(biāo)框選listDirection(Axis)列表排列方向問題思考List可以實現(xiàn)子組件的分組顯示。A.對B.錯代碼演示03延遲符號代碼演示1//export聲明允許外部類使用當(dāng)前類exportclassClothesBean{pic:Resource//聲明圖片屬性text:string//聲明文本內(nèi)容屬性//構(gòu)造方法用于創(chuàng)建具體的對象constructor(pic:Resource,text:string){this.pic=pic this.text=text}}代碼演示2import{ClothesBean}from'./ClothesBean'exportclassUtils{staticgetData():ClothesBean[]{

letdata:ClothesBean[]=[{pic:$r('app.media.backpack'),text:'背包'},//創(chuàng)建其他商品數(shù)據(jù)]returndata;}}代碼演示3structIndex{datas:ClothesBean[]=Utils.getData()build(){

List({space:10,initialIndex:0}){ForEach(this.datas,(item:ClothesBean,index:number)=>{//ListItem列表項})}//設(shè)置ListItem分割線樣式，默認(rèn)無分割線.divider({strokeWidth:2,color:0x33333333,startMargin:15,endMargin:25})}}代碼演示4ForEach(this.datas,(item:ClothesBean,index:number)=>{//通過循環(huán)語句設(shè)置列表每一行內(nèi)容及寬高等屬性

ListItem(){ Row(){ Image(item.pic) Text(item.text) }}.onClick(()=>{//通過index參數(shù)可知用戶單擊了哪一個ListItem})})總結(jié)List概念

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

–服飾列表展示。認(rèn)真學(xué)鴻蒙一起干大事列表類組件之--Grid《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Grid常見用法代碼演示Grid簡介Grid簡介01延遲符號Grid簡介GridGrid常見用法02延遲符號Grid接口Grid屬性rowsTemplate(string)行的數(shù)量columnsGap(Length)列間距rowsGap(Length)行間距columnsTemplate(string)列的數(shù)量GridItem屬性rowEnd(number)當(dāng)前元素終點行號columnStart(number)當(dāng)前元素起始列號columnEnd(number)當(dāng)前元素終點列號rowStart(number)當(dāng)前元素起始行號問題思考Grid可以實現(xiàn)不同大小的網(wǎng)格單元。A.對B.錯代碼演示03延遲符號代碼演示1//export聲明允許外部類使用當(dāng)前類exportclassClothesBean{pic:Resource//聲明圖片屬性text:string//聲明文本內(nèi)容屬性//構(gòu)造方法用于創(chuàng)建具體的對象constructor(pic:Resource,text:string){this.pic=pic this.text=text}}代碼演示2import{ClothesBean}from'./ClothesBean'exportclassUtils{staticgetData():ClothesBean[]{

letdata:ClothesBean[]=[{pic:$r('app.media.backpack'),text:'背包'},//創(chuàng)建其他商品數(shù)據(jù)]returndata;}}代碼演示3structIndex{datas:ClothesBean[]=Utils.getData()build(){

Grid(){ForEach(this.datas,(item:ClothesBean,index:number)=>{//GridItem列表項})}.layoutDirection(GridDirection.Row)//主軸方向為水平方向

.columnsTemplate(‘1fr1fr’)//每行顯示兩列，寬度均分.columnsGap(15)//列間距15.rowsGap(15)//行間距15}}代碼演示4ForEach(this.datas,(item:ClothesBean,index:number)=>{//通過循環(huán)語句設(shè)置列表每一行內(nèi)容及寬高等屬性

GridItem(){ Column(){ Image(item.pic) Text(item.text) }}.onClick(()=>{//通過index參數(shù)可知用戶單擊了哪一個GridItem})})總結(jié)Grid概念

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

–服飾網(wǎng)格展示。認(rèn)真學(xué)鴻蒙一起干大事列表類組件之--Refresh《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Refresh常見用法代碼演示Refresh簡介Refresh簡介01延遲符號Refresh簡介RefreshRefresh常見用法02延遲符號Refresh接口Refresh事件RefreshStatus參數(shù)RefreshStatus刷新狀態(tài)枚舉值問題思考Refresh支持自定義刷新進(jìn)度條樣式。A.對B.錯代碼演示03延遲符號代碼演示1structIndex{@StateisRefreshing:boolean=truebuild(){Column(){

Refresh({refreshing:this.isRefreshing,offset:0,friction:62}){//isRefreshing初始值為true，表示打開頁面后就自動刷新}//列表部分實現(xiàn)代碼}.width('100%')}}代碼演示2Refresh({refreshing:this.isRefreshing,offset:0,friction:62}){}.onStateChange((refreshStatus:RefreshStatus)=>{//當(dāng)前刷新狀態(tài)變更時，觸發(fā)的回調(diào)方法}).onRefreshing(()=>{//進(jìn)入刷新狀態(tài)時觸發(fā)的回調(diào)函數(shù)setTimeout(()=>{//設(shè)置一個定時器，3秒鐘后執(zhí)行自定義函數(shù)。this.isRefreshing=false},3000)})總結(jié)Refresh概念

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

–服飾列表下拉刷新。認(rèn)真學(xué)鴻蒙一起干大事列表類組件之--WaterFlow《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123WaterFlow常見用法代碼演示W(wǎng)aterFlow簡介WaterFlow簡介01延遲符號WaterFlow簡介WaterFlowWaterFlow常見用法02延遲符號WaterFlow接口WaterFlow屬性rowsTemplate(string)行的數(shù)量layoutDirection(FlexDirection)布局主軸方向columnsTemplate(string)列的數(shù)量WaterFlow屬性itemConstraintSize(ConstraintSizeOptions)尺寸約束columnsGap(Length)列間距rowsGap(Length)行間距ConstraintSizeOptions參數(shù)itemConstraintSize（ConstraintSizeOptions）子組件尺寸約束問題思考LazyForEach有什么優(yōu)勢？代碼演示03延遲符號代碼演示1structIndex{build(){

WaterFlow(){//子組件} .width('100%') .layoutDirection(FlexDirection.Column) .columnsTemplate('1fr1fr') .columnsGap(5) .rowsGap(5)}}代碼演示2structIndex{@Statedatas:Resource[]=[$r('app.media.a'),$r('app.media.b'),...]//圖片數(shù)組build(){

WaterFlow(){ForEach(this.datas,(item:Resource)=>{

FlowItem(){Image(item)} .width('100%')})}}}總結(jié)WaterFlow概念

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

–瀑布流圖片列表。認(rèn)真學(xué)鴻蒙一起干大事導(dǎo)航類組件之--Tabs《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Tabs常見用法代碼演示Tabs簡介Tabs簡介01延遲符號Tabs簡介TabsTabs常見用法02延遲符號Tabs接口BarPosition參數(shù)barPosition?:BarPosition頁簽位置Tabs屬性scrollable(boolean)是否可滑動頁面進(jìn)行切換barMode(BarMode)TabBar布局模式vertical(boolean)Tabs排列方向BarMode參數(shù)barMode（BarMode）TabBar布局模式Tabs屬性barWidth(number|Length)TabBar的寬度值barHeight(number|Length)TabBar的高度值animationDuration(number)動畫時長TabContent屬性tabBar(string|Resource|{icon?:string|Resource,text?:string|Resource}|CustomBuilder)設(shè)置TabBar上顯示內(nèi)容Tabs事件問題思考Tabs可以同時實現(xiàn)上下導(dǎo)航欄。A.對B.錯代碼演示03延遲符號代碼演示1structIndex{privatetabsController:TabsController=newTabsController()@StatecurrentIndex:number=0//當(dāng)前選中項頁簽索引

@StatetargetIndex:number=0//底部導(dǎo)航欄頁簽索引//自定義底部導(dǎo)航頁簽欄

@BuilderTabBuilder(title:string,targetIndex:number,selectedImg:string,normalImg:string){//自定義上圖下文頁簽頁面}}代碼演示2@BuilderTabBuilder(title:string,targetIndex:number,selectedImg:string,normalImg:string){Column(){Image(this.currentIndex===targetIndex?selectedImg:normalImg)Text(title).fontColor(this.currentIndex===targetIndex?Color.Red:Color.Black)}.onClick(()=>{this.currentIndex=targetIndex;this.tabsController.changeIndex(this.currentIndex);})}代碼演示3build(){

Tabs({barPosition:BarPosition.End,controller:this.tabsController}){

TabContent(){//標(biāo)簽頁對應(yīng)內(nèi)容區(qū)}.tabBar(this.TabBuilder('首頁',0,'/images/home2.png','/images/home.png'))}.onChange((index:number)=>{//Tab頁簽切換后觸發(fā)的事件this.currentIndex=index})}總結(jié)Tabs概念

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

–首頁面展示。認(rèn)真學(xué)鴻蒙一起干大事導(dǎo)航類組件之-- SideBarContainer《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123SideBarContainer常見用法代碼演示SideBarContainer簡介SideBarContainer簡介01延遲符號SideBarContainer簡介SideBarContainerSideBarContainer常見用法02延遲符號SideBarContainer接口SideBarContainerType參數(shù)type?:SideBarContainerType側(cè)邊欄顯示類型SideBarContainer屬性controlButton(ButtonStyle)側(cè)邊欄控制按鈕屬性showControlButton(boolean)是否顯示控制按鈕sideBarWidth(number|Length)側(cè)邊欄的寬度showSideBar(boolean)是否顯示側(cè)邊欄SideBarContainer屬性maxSideBarWidth(number|Length)側(cè)邊欄最大寬度autoHide(boolean)側(cè)邊欄是否自動隱藏sideBarPosition(SideBarPosition)側(cè)邊欄顯示位置minSideBarWidth(number|Length)側(cè)邊欄最小寬度SideBarPosition參數(shù)sideBarPosition(SideBarPosition)側(cè)邊欄顯示位置SideBarContainer事件問題思考SideBarContainer可以包含幾個子組件？代碼演示03延遲符號代碼演示1structIndex{@StatetargetIndex:number=0//側(cè)邊欄選中元素索引build(){

SideBarContainer(SideBarContainerType.Embed){//第一個子組件表示側(cè)邊欄，第二個子組件表示內(nèi)容區(qū)}.size({width:'100%',height:'100%'}).sideBarWidth(160).minSideBarWidth(120).maxSideBarWidth(200)}}代碼演示2SideBarContainer(SideBarContainerType.Embed){Column({space:20}){//第一個子組件：側(cè)邊欄Text('商圈/景區(qū)').backgroundColor(this.targetIndex==0?Color.White:'#eeeeeeee').onClick(()=>{ this.targetIndex=0})

}.padding({top:100}).backgroundColor('#eeeeeeee')}代碼演示3SideBarContainer(SideBarContainerType.Embed){

//第一個子組件：側(cè)邊欄Column(){//第二個子組件：內(nèi)容區(qū)if(this.targetIndex==0){Text('商圈/景區(qū)').fontSize(50)}elseif(this.targetIndex==1){Text('行政區(qū)').fontSize(50)}elseif(this.targetIndex==2){Text('地鐵線').fontSize(50)}}}總結(jié)SideBarContainer概念

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

–側(cè)邊欄展示。認(rèn)真學(xué)鴻蒙一起干大事導(dǎo)航類組件之--Navigator《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Navigator常見用法代碼演示Navigator簡介Navigator簡介01延遲符號Navigator簡介NavigatorNavigator常見用法02延遲符號Navigator接口NavigationType參數(shù)type?:NavigationType描述路由方式Navigator屬性params(object)設(shè)置傳遞到目標(biāo)頁面的數(shù)據(jù)target(string)設(shè)置跳轉(zhuǎn)目標(biāo)頁面的路徑type(NavigationType)設(shè)置路由方式active(boolean)設(shè)置當(dāng)前路由是否激活問題思考Navigator既可以向前路由跳轉(zhuǎn)，也可以向后路由跳轉(zhuǎn)。A.對B.錯代碼演示03延遲符號代碼演示1@Stateactive:boolean=false@Statecity:object={name:'蘇州'}build(){

Navigator({target:'pages/HomePage’, type:NavigationType.Push}){Image($r('app.media.shizi'))}.size({width:'100%',height:'100%'}).active(this.active).params({data:this.city})//傳參數(shù)到HomePage頁面

.onClick(()=>{//單擊屏幕時激活路由組件實現(xiàn)頁面跳轉(zhuǎn)功能

this.active=true})}代碼演示2@Statecity:any=router.getParams()['data']build(){Row(){Column(){//顯示接收到的數(shù)據(jù)

Text(this.city['name']).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}總結(jié)Navigator概念

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

–引導(dǎo)頁跳轉(zhuǎn)。認(rèn)真學(xué)鴻蒙一起干大事滑動類組件之--Scroll《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Scroll常見用法代碼演示Scroll簡介Scroll簡介01延遲符號Scroll簡介ScrollScroll常見用法02延遲符號Scroll接口Scroll屬性scrollBar(BarState)滾動條狀態(tài)scrollBarColor(string|number|Color)滾動條顏色scrollable(ScrollDirection)滾動方向scrollBarWidth(string|number)滾動條寬度ScrollDirection參數(shù)scrollable（

ScrollDirection

）設(shè)置滾動方向BarState參數(shù)scrollbar(BarState)描述滾動條狀態(tài)Scroll事件Scroll事件問題思考Scroll可以包含多個子組件。A.對B.錯代碼演示03延遲符號代碼演示Scroll(){Image($r('app.media.scrollimage'))}.size({width:'100%',height:'100%'}).scrollable(ScrollDirection.Vertical)//默認(rèn)垂直方向滾動.scrollBar(BarState.Auto)//觸摸式顯示滾動條.scrollBarWidth(4)//滾動條寬度默認(rèn)值4vp.scrollBarColor(Color.Gray)//滾動條顏色.onScrollStart(()=>{//開始滾動}).onScrollStop(()=>{//停止?jié)L動})總結(jié)Scroll概念

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

–長截圖瀏覽。認(rèn)真學(xué)鴻蒙一起干大事滑動類組件之--Panel《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Panel常見用法代碼演示Panel簡介Panel簡介01延遲符號Panel簡介PanelPanel常見用法02延遲符號Panel接口Panel屬性type(PanelType)滑動面板的類型mode(PanelMode)滑動面板的初始狀態(tài)show(boolean)是否顯示PanelType參數(shù)type（

PanelType

）描述滑動面板的類型PanelMode參數(shù)mode（

PanelMode

）描述可滑動面板的初始狀態(tài)Panel屬性halfHeight(string|number)PanelMode.Half狀態(tài)下的高度miniHeight(string|number)PanelMode.Mini狀態(tài)下的高度fullHeight(string|number)PanelMode.Full狀態(tài)下的高度Panel事件問題思考Panel可以設(shè)置背景顏色。A.對B.錯代碼演示03延遲符號代碼演示1build(){

Panel(true){DatePicker() .size({width:'100%',height:300})}//提供大、中、小三種尺寸展示切換效果.type(PanelType.Foldable)//初始顯示半屏效果.mode(PanelMode.Half)//默認(rèn)值是當(dāng)前組件主軸大小的一半.halfHeight(300)}總結(jié)Panel概念

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

–日期選擇器可滑動面板。認(rèn)真學(xué)鴻蒙一起干大事滑動類組件之--Swiper《鴻蒙HarmonyOS應(yīng)用開發(fā)基礎(chǔ)教程》課程組目錄123Swiper常見用法代碼演示Swiper簡介Swiper簡介01延遲符號Swiper簡介SwiperSwiper常見用法02延遲符號Swiper接口Swiper屬性autoPlay(boolean)是否自動播放interval(number)自動播放的時間間隔index(number)當(dāng)前顯示子組件的索引值indicator(boolean)是否啟用導(dǎo)航點指示器Swiper屬性duration(number)子組件切換的動畫時長vertical(boolean)是否為縱向滑動loop(boolean)是否開啟循環(huán)itemSpace(number|string)子組件與子組件之間間隙Swiper屬性indicatorStyle({left?:Length,top?:Length,right?:Length,bottom?:Length,size?:Length,mask?:boolean,color?:ResourceColor,selectedColor?:ResourceColor})子組件切換的動畫時長Swiper事件問題思考Swiper僅支持圖片類型子組件。A.對B.錯代碼演示03延遲符號代碼演示1structIndex{images:Resource[]=[$r('app.media.a'),$r('app.media.b'),$r('app.media.c'),$r('app.media.d')]build(){

Swiper(){ForEach(this.images,(src:Resource,indext:number)=>{Image(src).size({width:'100%',height:'100%'}).objectFit(ImageFit.Fill)})}}}代碼演示2Swiper(){}.size({width:'100%',height:240}).autoPlay(true)//true表示自動播放，默認(rèn)不自動播放.interval(3000)//子組件播放時長，默認(rèn)3000毫秒