@Entry
@Component
struct lianxi4{
  build(){
    Tabs() {
      TabContent() {
        Text('欢迎来到新三-520宿舍，下面介绍一下宿舍信息').fontSize(24)
      }
      .tabBar('首页')

      TabContent() {
        Column() {
          Text('这是宿舍同学信息').fontSize(24)
          Swiper() {
            Text('姓名：刘！！，       学号：851861511').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：申@@，       学号：585525680').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：潘￥￥，       学号：1581829').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：田**，       学号：8222222251').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：石%%，       学号：9582268482').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：沈…………，       学号：9645572').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：王&&，       学号：882256125').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
            Text('姓名：邱？？，        学号：9218522').width('100%').height(180).backgroundColor(Color.Red).fontSize(35)
          }
          .width('100%')
          .height(180)
          .indicator(true)
          .autoPlay(true)
          .interval(200)
        }
        .padding(10)
      }
      .tabBar('推荐')

      TabContent(){
        Column(){
          Text('这是宿舍信息的相对布局').fontSize(24).margin({bottom:20})
          RelativeContainer(){
            //第一行左
            Text('刘')
              .id('box1')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'__container__',align:VerticalAlign.Top},
                left:{anchor:'__container__',align:HorizontalAlign.Start}
              })

            Text('鬼')
              .id('box2')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box1',align:VerticalAlign.Top},
                left:{anchor:'box1',align:HorizontalAlign.End}
              })
              .margin({left:20})

            Text('桌子')
              .id('box3')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box1',align:VerticalAlign.Bottom},
                left:{anchor:'box1',align:HorizontalAlign.Start}
              })
              .margin({top:20})

            Text('桌子')
              .id('box4')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box3',align:VerticalAlign.Top},
                left:{anchor:'box3',align:HorizontalAlign.End}
              })
              .margin({left:20})

            Text('田')
              .id('box5')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box3',align:VerticalAlign.Bottom},
                left:{anchor:'box3',align:HorizontalAlign.Start}
              })
              .margin({top:20})


            Text('军爷')
              .id('box6')
              .width(150)
              .height(120)
              .border({width:2,color:Color.Black})
              .alignRules({
                top:{anchor:'box5',align:VerticalAlign.Top},
                left:{anchor:'box5',align:HorizontalAlign.End}
              })
              .margin({left:20})

          }
          .width('100%')
          .height(500)
          .padding({left:25})
        }
      }
      .tabBar('发现')
      TabContent(){
        Text('我的页面').fontSize(24)
      }
      .tabBar('我的')
    }
    .barPosition(BarPosition.End)
  }
}

以上代码是融合起来的例子有弹性/轮播/顶层/垂直

1. Tabs（顶层标签页布局，整个页面大框架）

Tabs(){ // 多个TabContent页面 }.barPosition(BarPosition.End)

首页 TabContent 内部

TabContent { Column(){ Text() Swiper() } }

推荐 TabContent 内部

Column{ Text() RelativeContainer() }

Swiper（轮播容器布局，首页宿舍信息轮播）

Swiper(){ // 多条学生信息Text }.width('100%').height(180) .indicator(true).autoPlay(true).interval(200)

RelativeContainer（相对布局，推荐页人物排版）

RelativeContainer(){ Text({id:box1}) Text({id:box2,锚定box1}) ...多个带id的Text }

Row 水平线性布局（横向并排布局）

含义：子组件从左向右横向依次排列，和 Column（垂直）是一对线性布局，可设置内部元素间距space。

Row({space:15}){ Text("首页").padding(8).backgroundColor("#ccc") Text("消息").padding(8).backgroundColor("#ccc") Text("我的").padding(8).backgroundColor("#ccc") }.padding(10)

.Stack 层叠堆叠布局（叠放布局

含义子组件层层重叠摆放，后写的组件盖在上方，可以通过alignContent统一控制所有子元素对齐位置（居中、左上、右下）

Stack({alignContent:Alignment.Center}){ //底层：背景色块 Rect({width:120,height:120}).fill("#66ccff") //上层：文字（压在色块上面） Text("图片标题").fontColor(Color.White

Grid 网格布局（行列规整布局）

含义：二维规整行列排布，固定几行几列，格子均匀分布，通过columnsTemplate划分列宽比例，多用于整齐多宫格。

Grid(){ GridItem(){Text("功能1").width("100%").height(60).backgroundColor("#eee")} GridItem(){Text("功能2").width("100%").height(60).backgroundColor("#eee")} GridItem(){Text("功能3").width("100%").height(60).backgroundColor("#eee")} GridItem(){Text("功能4").width("100%").height(60).backgroundColor("#eee")} } .columnsTemplate("1fr 1fr") //平均分成2列 .columnsGap(10) //列间距10 .rowsGap(10) //行间距10 .padding(10)