相对布局 + 轮播 + Tabs 导航 全套案例源码笔记

案例 1RelativeContainer 相对布局色块纵向右对齐实现效果案例 1 顶部居中案例 2/3/4 依次垂直排列右侧对齐EntryComponentstruct RelativeCase1 {build() {RelativeContainer() {//案例1顶部页面居中基准方块Text(案例1).fontSize(22).fontWeight(FontWeight.Bold).id(case1).alignRules({top: { anchor: __container__, align: VerticalAlign.Top },left: { anchor: __container__, align: HorizontalAlign.Center }}).backgroundColor(Color.Blue).width(150).height(150)//案例2贴在案例1底边右边缘和案例1右对齐Text(案例2).fontSize(22).fontWeight(FontWeight.Bold).id(case2).alignRules({top: { anchor: case1, align: VerticalAlign.Bottom },right: { anchor: case1, align: HorizontalAlign.End }}).backgroundColor(Color.Green).width(150).height(150)//案例3贴在案例2底边右对齐 Text(案例3) .fontSize(22).fontWeight(FontWeight.Bold).id(case3).alignRules({top: { anchor: case2, align: VerticalAlign.Bottom },right: { anchor: case2, align: HorizontalAlign.End }}).backgroundColor(Color.Yellow).width(150).height(150)//案例4贴在案例3底边右对齐 Text(案例4).fontSize(22).fontWeight(FontWeight.Bold).id(case4).alignRules({top: { anchor: case3, align: VerticalAlign.Bottom },right: { anchor: case3, align: HorizontalAlign.End }}).backgroundColor(Color.Red).width(150).height(150) }.width(100%).height(100%)}}案例 2RelativeContainer 文字排版院校信息布局实现效果院校名称左上角院系名称在下方居中排版EntryComponentstruct Relativ2{build() {RelativeContainer(){Text(河北软件软件职业技术学院).id(title).fontSize(28).fontWeight(FontWeight.Bolder).alignRules({top:{anchor:__container__,align:VerticalAlign.Top},left:{anchor:__container__,align:HorizontalAlign.Start}})Text(河北软件软件职业技术学院).id(title).fontSize(28).fontWeight(FontWeight.Bolder).alignRules({ top:{anchor:__container__,align:VerticalAlign.Top},left:{anchor:__container__,align:HorizontalAlign.Start}}).margin(10)Text(计算机应用工程系).id(title2).fontSize(24).alignRules({top:{anchor:title,align:VerticalAlign.Bottom},left:{anchor:title,align:HorizontalAlign.Center}}).padding(30) }.width(100%).height(100%)}}案例 4Tabs 底部导航宿舍信息展示项目实现效果底部四标签导航 首页文字 推荐页轮播框 发现页 6 宫格EntryComponentstruct TabBaseDemo{build() {Tabs() {// 首页宿舍欢迎信息TabContent() {Text(欢迎来到新5-501宿舍,\n下面介绍一下宿舍信息。).fontSize(26).margin(20)}.tabBar(首页)// 推荐页轮播图信息展示框TabContent() {Text(轮播图,\n舍友的姓名,\n学号).width(200).height(260).border({width:2,color:Color.Black}).fontSize(24).margin(20)}.tabBar(推荐)// 发现页6个方格布局TabContent() {Flex({wrap:FlexWrap.Wrap}){ForEach([1,2,3,4,5,6],(){Text().width(80).height(80).border({width:2,color:Color.Black}).margin(12)})}.padding(20)}.tabBar(发现)// 我的页面 TabContent() {Text(我的内容).fontSize(30)}.tabBar(我的)}.barPosition(BarPosition.End)}}RelativeContainer相对定位依靠id和锚点实现灵活布局Swiper轮播图支持自动播放、循环、指示器Tabs底部导航快速实现多页面切换