鸿蒙HarmonyOS应用开发基础教程 课件 单元5-UI开发之容器组件

UI开发之容器组件《鸿蒙HarmonyOS应用开发基础教程》课程组布局类组件之--Row《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Row常见用法代码演示Row简介Row简介01延迟符号Row简介RowRow常见用法02延迟符号Row接口Row属性alignItems(VerticalAlign)子组件在垂直方向上的对齐方式justifyContent(FlexAlign)子组件在水平方向上的对齐方式VerticalAlign参数alignItems(

VerticalAlign)垂直方向对齐方式FlexAlign参数justifyContent(FlexAlign)水平方向对齐方式问题思考Row中子组件设置哪个通用属性可以实现宽度三等分功能？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})总结Row概念

–应用场景是什么？Row常见用法-接口和属性有哪些？代码演示

–三大球水平布局展示。认真学鸿蒙一起干大事布局类组件之--Column《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Column常见用法代码演示Column简介Column简介01延迟符号Column简介ColumnColumn常见用法02延迟符号Column接口Column属性alignItems(HorizontalAlign)子组件在水平方向上的对齐方式justifyContent(FlexAlign)子组件在垂直方向上的对齐方式HorizontalAlign参数alignItems(HorizontalAlign)水平方向对齐方式问题思考Column设置哪个属性可以实现子组件主轴方向均分效果？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})总结Column概念

–应用场景是什么？Column常见用法-接口和属性有哪些？代码演示

–三大球垂直展示。认真学鸿蒙一起干大事布局类组件之--Stack《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Stack常见用法代码演示Stack简介Stack简介01延迟符号Stack简介StackStack常见用法02延迟符号Stack接口Alignment参数alignContent(Alignment)子组件对齐方式Stack属性alignContent(Alignment)子组件在容器内的对齐方式思考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)总结Stack概念

–应用场景是什么？Stack常见用法-接口和属性有哪些？代码演示

–视频暂停页面。认真学鸿蒙一起干大事布局类组件之-- RelativeContainer《鸿蒙HarmonyOS应用开发基础教程》课程组目录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水平方向对齐方式：HorizontalAlign.Start，HorizontalAlign.Center，HorizontalAlign.End。垂直方向对齐方式：VerticalAlign.Top，VerticalAlign.Center，VerticalAlign.Bottom。问题思考RelativeContainer中子组件如果不作为锚点则不需要设置id？A.对B.错代码演示03延迟符号代码演示1

RelativeContainer(){//子组件默认相对父布局水平方向左对齐、垂直方向顶部对齐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})总结RelativeContainer概念

–应用场景是什么？RelativeContainer常见用法-接口和属性有哪些？代码演示

–常见功能展示。认真学鸿蒙一起干大事布局类组件之--Flex《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Flex常见用法代码演示Flex简介Flex简介01延迟符号Flex简介FlexFlex简介容器默认存在主轴与交叉轴，子元素默认沿主轴排列主轴指子组件沿着主要的方向排列的轴线交叉轴是垂直于主轴方向的轴线Flex常见用法02延迟符号Flex接口FlexDirection参数direction?:FlexDirection主轴排列方向FlexWrap参数wrap?:FlexWrap单行/列或者多行/列排列ItemAlign参数alignItems?:ItemAlign交叉轴对齐格式问题拓展Flex设置哪个属性可以实现子组件“瓜分”父组件的剩余空间效果？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/*默认不换行，如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度*/

Flex(){Text('兵乓球')//设置子组件在主轴方向上的尺寸

.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)

}总结Flex概念

–应用场景是什么？Flex常见用法-接口参数有哪些？代码演示

–常见功能展示。认真学鸿蒙一起干大事布局类组件之--

GridRow和GridCol《鸿蒙HarmonyOS应用开发基础教程》课程组目录123GridRow和GridCol常见用法代码演示GridRow和GridCol简介GridRow和GridCol简介01延迟符号GridRow和GridCol简介GridRow和GridCol默认断点自定义断点GridRow和GridCol常见用法02延迟符号GridRow接口GutterOption参数gutter?:Length|GutterOption栅格布局间距GridRowColumnOption参数columns?:number|GridRowColumnOption布局列数BreakPoints参数breakpoints?:BreakPoints栅格断点//启用xs、sm、md共3个断点breakpoints:{value:["100vp","200vp"]}//启用xs、sm、md、lg共4个断点，断点范围值必须单调递增breakpoints:{value:["320vp","520vp","840vp"]}//启用xs、sm、md、lg、xl共5个断点，断点范围数量不可超过断点可取值数量-1

breakpoints:{value:["320vp","520vp","840vp","1080vp"]}GridRowDirection参数direction?:GridRowDirection布局排列方向GridCol接口GridColColumnOption参数GridCol属性span(number|GridColColumnOption)栅格子组件占用列数offset(number|GridColColumnOption)相对前一个栅格子组件偏移列数order(number|GridColColumnOption)元素的序号问题思考GridRow和GridCol实现了不同的设备上自适应排版，使得页面布局更加灵活和适应性强。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%')}})}总结GridRow和GridCol概念

–应用场景是什么？GridRow和GridCol常见用法-接口和属性有哪些？代码演示

–多尺寸多设备的动态布局。认真学鸿蒙一起干大事列表类组件之--List《鸿蒙HarmonyOS应用开发基础教程》课程组目录123List常见用法代码演示List简介List简介01延迟符号List简介ListList常见用法02延迟符号List接口ListItem接口List属性divider({strokeWidth:Length,color?:ResourceColor,...})分割线样式cachedCount(number)预加载数量multiSelectable(boolean)是否开启鼠标框选listDirection(Axis)列表排列方向问题思考List可以实现子组件的分组显示。A.对B.错代码演示03延迟符号代码演示1//export声明允许外部类使用当前类exportclassClothesBean{pic:Resource//声明图片属性text:string//声明文本内容属性//构造方法用于创建具体的对象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:'背包'},//创建其他商品数据]returndata;}}代码演示3structIndex{datas:ClothesBean[]=Utils.getData()build(){

List({space:10,initialIndex:0}){ForEach(this.datas,(item:ClothesBean,index:number)=>{//ListItem列表项})}//设置ListItem分割线样式，默认无分割线.divider({strokeWidth:2,color:0x33333333,startMargin:15,endMargin:25})}}代码演示4ForEach(this.datas,(item:ClothesBean,index:number)=>{//通过循环语句设置列表每一行内容及宽高等属性

ListItem(){ Row(){ Image(item.pic) Text(item.text) }}.onClick(()=>{//通过index参数可知用户单击了哪一个ListItem})})总结List概念

–应用场景是什么？List常见用法-接口和属性有哪些？代码演示

–服饰列表展示。认真学鸿蒙一起干大事列表类组件之--Grid《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Grid常见用法代码演示Grid简介Grid简介01延迟符号Grid简介GridGrid常见用法02延迟符号Grid接口Grid属性rowsTemplate(string)行的数量columnsGap(Length)列间距rowsGap(Length)行间距columnsTemplate(string)列的数量GridItem属性rowEnd(number)当前元素终点行号columnStart(number)当前元素起始列号columnEnd(number)当前元素终点列号rowStart(number)当前元素起始行号问题思考Grid可以实现不同大小的网格单元。A.对B.错代码演示03延迟符号代码演示1//export声明允许外部类使用当前类exportclassClothesBean{pic:Resource//声明图片属性text:string//声明文本内容属性//构造方法用于创建具体的对象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:'背包'},//创建其他商品数据]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)=>{//通过循环语句设置列表每一行内容及宽高等属性

GridItem(){ Column(){ Image(item.pic) Text(item.text) }}.onClick(()=>{//通过index参数可知用户单击了哪一个GridItem})})总结Grid概念

–应用场景是什么？Grid常见用法-接口、属性和事件有哪些？代码演示

–服饰网格展示。认真学鸿蒙一起干大事列表类组件之--Refresh《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Refresh常见用法代码演示Refresh简介Refresh简介01延迟符号Refresh简介RefreshRefresh常见用法02延迟符号Refresh接口Refresh事件RefreshStatus参数RefreshStatus刷新状态枚举值问题思考Refresh支持自定义刷新进度条样式。A.对B.错代码演示03延迟符号代码演示1structIndex{@StateisRefreshing:boolean=truebuild(){Column(){

Refresh({refreshing:this.isRefreshing,offset:0,friction:62}){//isRefreshing初始值为true，表示打开页面后就自动刷新}//列表部分实现代码}.width('100%')}}代码演示2Refresh({refreshing:this.isRefreshing,offset:0,friction:62}){}.onStateChange((refreshStatus:RefreshStatus)=>{//当前刷新状态变更时，触发的回调方法}).onRefreshing(()=>{//进入刷新状态时触发的回调函数setTimeout(()=>{//设置一个定时器，3秒钟后执行自定义函数。this.isRefreshing=false},3000)})总结Refresh概念

–应用场景是什么？Refresh常见用法-接口和事件有哪些？代码演示

–服饰列表下拉刷新。认真学鸿蒙一起干大事列表类组件之--WaterFlow《鸿蒙HarmonyOS应用开发基础教程》课程组目录123WaterFlow常见用法代码演示WaterFlow简介WaterFlow简介01延迟符号WaterFlow简介WaterFlowWaterFlow常见用法02延迟符号WaterFlow接口WaterFlow属性rowsTemplate(string)行的数量layoutDirection(FlexDirection)布局主轴方向columnsTemplate(string)列的数量WaterFlow属性itemConstraintSize(ConstraintSizeOptions)尺寸约束columnsGap(Length)列间距rowsGap(Length)行间距ConstraintSizeOptions参数itemConstraintSize（ConstraintSizeOptions）子组件尺寸约束问题思考LazyForEach有什么优势？代码演示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'),...]//图片数组build(){

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

FlowItem(){Image(item)} .width('100%')})}}}总结WaterFlow概念

–应用场景是什么？WaterFlow常见用法-接口和属性有哪些？代码演示

–瀑布流图片列表。认真学鸿蒙一起干大事导航类组件之--Tabs《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Tabs常见用法代码演示Tabs简介Tabs简介01延迟符号Tabs简介TabsTabs常见用法02延迟符号Tabs接口BarPosition参数barPosition?:BarPosition页签位置Tabs属性scrollable(boolean)是否可滑动页面进行切换barMode(BarMode)TabBar布局模式vertical(boolean)Tabs排列方向BarMode参数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)设置TabBar上显示内容Tabs事件问题思考Tabs可以同时实现上下导航栏。A.对B.错代码演示03延迟符号代码演示1structIndex{privatetabsController:TabsController=newTabsController()@StatecurrentIndex:number=0//当前选中项页签索引

@StatetargetIndex:number=0//底部导航栏页签索引//自定义底部导航页签栏

@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(){//标签页对应内容区}.tabBar(this.TabBuilder('首页',0,'/images/home2.png','/images/home.png'))}.onChange((index:number)=>{//Tab页签切换后触发的事件this.currentIndex=index})}总结Tabs概念

–应用场景是什么？Tabs常见用法-接口、属性和事件有哪些？代码演示

–首页面展示。认真学鸿蒙一起干大事导航类组件之-- SideBarContainer《鸿蒙HarmonyOS应用开发基础教程》课程组目录123SideBarContainer常见用法代码演示SideBarContainer简介SideBarContainer简介01延迟符号SideBarContainer简介SideBarContainerSideBarContainer常见用法02延迟符号SideBarContainer接口SideBarContainerType参数type?:SideBarContainerType侧边栏显示类型SideBarContainer属性controlButton(ButtonStyle)侧边栏控制按钮属性showControlButton(boolean)是否显示控制按钮sideBarWidth(number|Length)侧边栏的宽度showSideBar(boolean)是否显示侧边栏SideBarContainer属性maxSideBarWidth(number|Length)侧边栏最大宽度autoHide(boolean)侧边栏是否自动隐藏sideBarPosition(SideBarPosition)侧边栏显示位置minSideBarWidth(number|Length)侧边栏最小宽度SideBarPosition参数sideBarPosition(SideBarPosition)侧边栏显示位置SideBarContainer事件问题思考SideBarContainer可以包含几个子组件？代码演示03延迟符号代码演示1structIndex{@StatetargetIndex:number=0//侧边栏选中元素索引build(){

SideBarContainer(SideBarContainerType.Embed){//第一个子组件表示侧边栏，第二个子组件表示内容区}.size({width:'100%',height:'100%'}).sideBarWidth(160).minSideBarWidth(120).maxSideBarWidth(200)}}代码演示2SideBarContainer(SideBarContainerType.Embed){Column({space:20}){//第一个子组件：侧边栏Text('商圈/景区').backgroundColor(this.targetIndex==0?Color.White:'#eeeeeeee').onClick(()=>{ this.targetIndex=0})

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

//第一个子组件：侧边栏Column(){//第二个子组件：内容区if(this.targetIndex==0){Text('商圈/景区').fontSize(50)}elseif(this.targetIndex==1){Text('行政区').fontSize(50)}elseif(this.targetIndex==2){Text('地铁线').fontSize(50)}}}总结SideBarContainer概念

–应用场景是什么？SideBarContainer常见用法-接口、属性和事件有哪些？代码演示

–侧边栏展示。认真学鸿蒙一起干大事导航类组件之--Navigator《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Navigator常见用法代码演示Navigator简介Navigator简介01延迟符号Navigator简介NavigatorNavigator常见用法02延迟符号Navigator接口NavigationType参数type?:NavigationType描述路由方式Navigator属性params(object)设置传递到目标页面的数据target(string)设置跳转目标页面的路径type(NavigationType)设置路由方式active(boolean)设置当前路由是否激活问题思考Navigator既可以向前路由跳转，也可以向后路由跳转。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})//传参数到HomePage页面

.onClick(()=>{//单击屏幕时激活路由组件实现页面跳转功能

this.active=true})}代码演示2@Statecity:any=router.getParams()['data']build(){Row(){Column(){//显示接收到的数据

Text(this.city['name']).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}总结Navigator概念

–应用场景是什么？Navigator常见用法-接口和属性有哪些？代码演示

–引导页跳转。认真学鸿蒙一起干大事滑动类组件之--Scroll《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Scroll常见用法代码演示Scroll简介Scroll简介01延迟符号Scroll简介ScrollScroll常见用法02延迟符号Scroll接口Scroll属性scrollBar(BarState)滚动条状态scrollBarColor(string|number|Color)滚动条颜色scrollable(ScrollDirection)滚动方向scrollBarWidth(string|number)滚动条宽度ScrollDirection参数scrollable（

ScrollDirection

）设置滚动方向BarState参数scrollbar(BarState)描述滚动条状态Scroll事件Scroll事件问题思考Scroll可以包含多个子组件。A.对B.错代码演示03延迟符号代码演示Scroll(){Image($r('app.media.scrollimage'))}.size({width:'100%',height:'100%'}).scrollable(ScrollDirection.Vertical)//默认垂直方向滚动.scrollBar(BarState.Auto)//触摸式显示滚动条.scrollBarWidth(4)//滚动条宽度默认值4vp.scrollBarColor(Color.Gray)//滚动条颜色.onScrollStart(()=>{//开始滚动}).onScrollStop(()=>{//停止滚动})总结Scroll概念

–应用场景是什么？Scroll常见用法-接口、属性和事件有哪些？代码演示

–长截图浏览。认真学鸿蒙一起干大事滑动类组件之--Panel《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Panel常见用法代码演示Panel简介Panel简介01延迟符号Panel简介PanelPanel常见用法02延迟符号Panel接口Panel属性type(PanelType)滑动面板的类型mode(PanelMode)滑动面板的初始状态show(boolean)是否显示PanelType参数type（

PanelType

）描述滑动面板的类型PanelMode参数mode（

PanelMode

）描述可滑动面板的初始状态Panel属性halfHeight(string|number)PanelMode.Half状态下的高度miniHeight(string|number)PanelMode.Mini状态下的高度fullHeight(string|number)PanelMode.Full状态下的高度Panel事件问题思考Panel可以设置背景颜色。A.对B.错代码演示03延迟符号代码演示1build(){

Panel(true){DatePicker() .size({width:'100%',height:300})}//提供大、中、小三种尺寸展示切换效果.type(PanelType.Foldable)//初始显示半屏效果.mode(PanelMode.Half)//默认值是当前组件主轴大小的一半.halfHeight(300)}总结Panel概念

–应用场景是什么？Panel常见用法-接口、属性和事件有哪些？代码演示

–日期选择器可滑动面板。认真学鸿蒙一起干大事滑动类组件之--Swiper《鸿蒙HarmonyOS应用开发基础教程》课程组目录123Swiper常见用法代码演示Swiper简介Swiper简介01延迟符号Swiper简介SwiperSwiper常见用法02延迟符号Swiper接口Swiper属性autoPlay(boolean)是否自动播放interval(number)自动播放的时间间隔index(number)当前显示子组件的索引值indicator(boolean)是否启用导航点指示器Swiper属性duration(number)子组件切换的动画时长vertical(boolean)是否为纵向滑动loop(boolean)是否开启循环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表示自动播放，默认不自动播放.interval(3000)//子组件播放时长，默认3000毫秒