更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com前言HarmonyOSArkUI3.0共有21个容器组件框架。学习完这21个容器组件后，我打算尽可能多地使用容器组件，完成一次基于HarmonyOSArkUI3.0框架的实战开发。测试容器组件学习成果的实际项目就在这里。o(￣︶￣)o本次实战项目涉及到的容器组件有：Badge（新增事件标记组件）、Column（垂直排列的容器）、Flex（弹性布局组件）、List（列表包含一系列列表项）、ListItem（用于显示列表中的特定项目）、Navigator（路由容器组件）、Row（沿水平方向布局的容器）、Scroll（可滚动容器组件）、Swiper（滑动容器）、Tabs（一个可以切换的容器组件通过选项卡的内容视图），TabContent（对应于切换选项卡的内容视图）。渲染图欢迎页面线性渐变角度添加渐变径向渐变代码文件结构文本1.创建一个空白项目1.安装配置DevEcoStudio3.0DevEcoStudio3.0下载DevEcoStudio3.0安装2.创建EmptyeTSAbility应用DevEcoStudio下载后安装成功，打开DevEcoStudio，点击左上角的File，点击New，然后选择NewProject，选择EmptyAbility选项，点击Next按钮。将文件命名为GradientRamp（文件名不能出现中文或特殊字符，否则工程文件创建不成功），ProjectType选择Application，选择保存路径，Language选择eTS，API7，Phone选择设备，最后点击完成按钮。3、准备工作在entry>src>main>config.json文件底部的“launchType”:“standard”后面添加如下代码，这样应用上面的标签栏就可以去掉了。config.json底部的代码："metaData":{"customizeData":[{"name":"hwc-theme","value":"androidhwext:style/Theme.Emui.Light.NoTitleBar","extra":""}]}二、欢迎页面1、添加背景Column（容器竖排）、Flex（弹性布局组件）、Row（容器横排）是最常见的三种容器组件，所以直接举例说明。flexFlex：弹性布局组件参数：direction：可选，子组件在flex容器上排列的方向，即主轴方向FlexDirection.Row：主轴与行方向一致作为布局方式（default)FlexDirection.Row:与Row方向相反的布局方式FlexDirection.RowReverse:主轴与列方向相同的布局方式FlexDirection.ColumnReverse:与Column相反方向的布局wrap:可选,Flex容器是单行/列还是多行/列排列FlexWrap.NoWrap:Flex容器Element单行/列布局，子项允许超出容器（默认）FlexWrap.Wrap:元素Flex容器的元素多行/多列排列，子项允许超出容器ows/columns，子项允许超出容器justifyContent:optional，子组件在flex容器上的排列方向，即主轴方向。子组件在flex容器主轴上的对齐方式。第一个元素与行首对齐，后续元素与前一个元素对齐（默认）FlexAlign.Center：元素在主轴方向居中对齐，第一个元素和行的开头与最后一个元素和行尾之间的距离相同。FlexAlign.End：元素在主轴方向尾对齐，最后一个元素与行尾对齐，其他元素与下一个元素对齐。FlexAlign.SpaceBetween：flex轴方向均匀分布弹性元素，相邻元素之间的距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。FlexAlign.SpaceAround：Flex的主轴方向均匀分布弹性元素，相邻元素之间的距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。元素到行首的距离和最后一个元素到行尾的距离完全相同。alignItems：不需要，子组件在Flex容器的横轴方向的对齐格式ItemAlign.Auto：使用Flex容器中的默认配置ItemAlign.Start：Element在flex容器中，横轴方向的第一个对齐方式为ItemAlign.center：元素在flex容器中，横轴方向与ItemAlign的中心对齐。End：元素在flex容器中，横轴方向与底部对齐ItemAlign.Stretch：元素在flex容器中，沿横轴方向拉伸填充。未设置尺寸时，拉伸至容器尺寸（默认）ItemAlign.Baseline：元素在flex容器中，横轴方向的文字对齐基线。,多行内容的对齐方式。仅当wrap为Wrap或WrapReverse时有效FlexAlign.Start：元素在主轴方向的首端对齐，第一个元素与行首对齐，后续元素与前一个元素对齐（默认）FlexAlign.center：元素以主轴方向的中心对齐，第一个元素到行首的距离与最后一个元素到行尾的距离相同FlexAlign.End：元素是主轴末端对齐，最后一个元素与行尾对齐，其他元素与后者对齐FlexAlign.SpaceBetween:Flex弹性元素在主轴方向均匀分布，而相邻元素之间的距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。FlexAlign.SpaceAround：Flex的主轴方向均匀分布弹性元素，相邻元素之间的距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。元素到行首的距离和最后一个元素到行尾的距离完全相同。ColumnColumn：沿垂直方向的容器布局参数：space：可选，垂直布局元素间距，参数类型为Length，即直接填写数字属性：alignItems：设置子组件在水平方向的对齐格式Horizo??ntalAlign.Start:语言方向开始对齐Horizo??ntalAlign.Center:居中对齐，默认对齐(默认)Horizo??ntalAlign.End:语言方向结束对齐RowRow:沿水平方向布局Container参数:space:可选，水平布局元素间距，参数类型为Length，即直接填入数字属性：alignItems：子组件在垂直方向的对齐格式VerticalAlign.Top：顶部对齐VerticalAlign.Center：居中对齐，默认Alignment（默认）VerticalAlign。Bottom：底部对齐在index.ets文件中，可以通过Text('渐变调色板')和Text('一个理解你的调色板'）。属性linearGradient是设置线性渐变颜色，linearGradient中的angle为渐变角度，设置为180，即从上到下渐变，colors为渐变的颜色。值得注意的是，如果在text属性中添加fontFamily('ChineseXingkai')，在预览器中可以看到效果，但是在远程模拟器中是看不到的，因为远程模拟器没有这个效果字体。index.ets:@Entry@ComponentstructIndex{build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column}){Column(){Text('渐变色轮').fontColor('#cf6cc9').fontSize(60).fontStyle(FontStyle.Italic).fontWeight(700).fontFamily('中国行楷').textAlign(TextAlign.Center)Text('一个懂你的调色板').fontColor('#ee609c').fontSize(40).fontStyle(FontStyle.Italic).fontWeight(600).fontFamily('中文行楷').textAlign(TextAlign.Center).margin({top:-5})}}.width('100%').height('100%').linearGradient({angle:120,colors:[['#d9ded8',0],["#ebc0fd",1]]})}}2.添加动画效果这里使用的动画效果是通过animateTo显式动画实现的。animateTo显式动画可以设置组件从状态A到状态B变化的动画效果，包括样式、位置信息、节点的增删等，开发者无需关注变化过程，只需要关注需要指定开始和结束状态。animateTo还提供了播放状态的回调接口，是对属性动画的增强和封装。添加状态变量opacityValue和scaleValue，并初始化为0，分别用于表示透明度和缩放倍数。在动画效果中实现这两个值从0到1，就可以实现Logo的淡出和放大效果。定义一条贝塞尔曲线cubicBezier，Curves.cubicBezier(0.1,0.2,1,1)。由于需要用到动画能力接口中的插值计算，所以需要导入curves模块。@ohos.curves模块提供线性曲线的初始化函数。线性、阶梯、三次贝塞尔和弹簧插值曲线，可以根据输入参数创建插值曲线对象。在animateTo显式动画中，设置动画持续时间（duration）为2s，延时（delay）0.1s开始播放，设置闭包函数（curve）显示动画事件，即开始状态到结束状态是透明度opacityValue和大小scaleValue是从0到1。index.ets：@Entry@ComponentstructIndex{@StateprivateopacityValue:number=0@StateprivatescaleValue:number=0privatecurve1=Curves.cubicBezier(0.1,0.2,1,1)build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column}){Column(){Text('渐变色轮').fontColor('#cf6cc9').fontSize(60).fontStyle(FontStyle.Italic).fontWeight(700).fontFamily('中国行楷').textAlign(TextAlign.Center)Text('一个懂你的调色板').fontColor('#ee609c').fontSize(40).fontStyle(FontStyle.Italic).fontWeight(600).fontFamily('中国行凯').textAlign(TextAlign.Center).margin({top:-5})}.scale({x:this.scaleValue,y:this.scaleValue}).opacity(this.opacityValue).onAppear(()=>{animateTo({duration:2000,curve:this.curve1,delay:100,},()=>{this.opacityValue=1this.scaleValue=1})})}.width('100%').height('100%').linearGradient({angle:120,colors:[['#d9ded8',0],["#ebc0fd",1]]})}}3.添加动画结束跳跃效果首先创建一个main.ets文件。在animateTo的onFinish回调接口显示动画播放结束，调用timer定时器的setTimeout接口延时1.5s后，调用router.replace显示mainpage.ets页面，需要导入router模块.index.ets://@ts-nocheckimportrouterfrom'@system.router'importCurvesfrom'@ohos.curves'@Entry@ComponentstructIndex{@StateprivateopacityValue:number=0@StateprivatescaleValue:number=0privatecurve1=Curves.cubicBezier(0.1,0.2,1,1)build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column}){Column(){Text('渐变色轮').fontColor('#cf6cc9').fontSize(60).fontStyle(FontStyle.Italic).fontWeight(700).fontFamily('汉字').textAlign(TextAlign.Center)Text('懂你的调色板').fontColor('#ee609c').fontSize(40).fontStyle(FontStyle.Italic).fontWeight(600).fontFamily('中文行楷').textAlign(TextAlign.Center).margin({top:-5})}.scale({x:this.scaleValue,y:this.scaleValue}).opacity(this.opacityValue).onAppear(()=>{animateTo({duration:2000,curve:this.curve1,delay:100,onFinish:()=>{setTimeout(()=>{router.replace({uri:"pages/main"})},1500);}},()=>{this.opacityValue=1this.scaleValue=1})})}。width('100%').height('100%').linearGradient({angle:120,colors:[['#d9ded8',0],["#ebc0fd",1]]})}}三、主页面1.添加背景主页面背景和背景欢迎页的几乎一样，这里不再重复mainp.ets：@Entry@ComponentstructMain{privateswiperController:SwiperController=newSwiperController()build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column}){}.width('100%').height('100%').linearGradient({angle:120,colors:[['#d9ded8',0],["#ebc0fd",1]]})}}2。添加按钮NavigatorNavigator：路由容器组件，提供路由跳转能力NavigationType.Push：跳转到应用中的指定页面（默认）NavigationType.Replace：用应用中的页面替换当前页面，并销毁替换后的页面NavigationType.Back：返回上一页或指定页面属性：active：当前路由组件是否激活。当它处于活动状态时，相应的路由操作将生效。参数类型为boolean，即true或false。router.getParams()从效果图中可以看出按钮的样式是一致的，所以我们可以使用装饰器@Component来自定义按钮。通过Navigator容器组件给按钮Button添加路由功能。变量str记录了按钮文字，变量str记录了页面路径，加上状态变量active并初始化为false，在按钮点击事件中给状态变量active赋值，这样当按钮被点击时，导航器被激活并生效相应的路由操作。mainp.ets：//importrouterfrom'@system.router'@Entry@ComponentstructMain{privateswiperController:SwiperController=newSwiperController()build(){Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column}){setButton({str:'线性渐变',uri:'pages/LinearGradient'})setButton({str:'角度渐变',uri:'pages/SweepGradient'})setButton({str:'方向渐变',uri:'pages/RadialGradient'})}.width('100%').height('100%').linearGradient({angle:120,colors:[['#d9ded8',0],["#ebc0fd",1]]})}}@ComponentstructsetButton{@Stateactive:boolean=falseprivatestr:stringprivateuri:stringbuild(){Navigator({target:this.uri,type:NavigationType.Push}){Button({type:ButtonType.Normal,stateEffect:true}){Text(this.str).fontFamily('方正舒体').fontSize(40).fontWeight(800).fontColor('#FDEB82')}.width(170).height(80).borderRadius(10).borderColor('#A168FE').borderWidth(2).backgroundColor('#DEB0DF').onClick(()=>{this.active=true})}.margin(10).active(this.active)}}//通过路由r添加路由函数/*@ComponentstructsetButton{privatestr:stringprivateuri:stringbuild(){Button({type:ButtonType.Normal,stateEffect:true}){Text(this.str).fontFamily('FounderComfortBody').fontSize(40.fontWeight(800).fontColor('#FDEB82')}.width(170).height(80).borderRadius(10).borderColor('#A168FE').borderWidth(2).backgroundColor('#DEB0DF').margin(10).onClick(()=>{router.push({uri:this.uri})})}}*/文章相关附件可点击下方原文链接下载https://harmonyos.51cto.com/resource/1570更多信息请访问：与华为共同建立的鸿蒙科技社区https://harmonyos.51cto.com
