一，如何做出首页？

代码：

//首页：右侧图文字
TabContent() {
  Text('欢迎来到新5-501宿舍,\n下面介绍一下宿舍信息。')
    .fontSize(26) //文字大小36像素
    .margin(20)
}
.tabBar('首页')

核心组件：1. TabContent - 页面容器

TabContent() {
  // 这里面放首页要显示的内容
}

• TabContent 代表一个独立的页面

• 每个 Tab 页必须包裹在 TabContent 中

当然必须有文件前置代码

@Entry
@Component
struct TabBaseDemo{

一，如何做出推荐页面？

TabContent() {           // 1. 这是一个页面
  Text('轮播图,\n舍友的姓名,\n学号')  // 2. 显示三行文字
    .width(200)          // 3. 宽度200像素
    .height(260)         // 4. 高度260像素
    .border({width:2, color:Color.Black})  // 5. 黑色边框，粗细2
    .fontSize(24)        // 6. 文字大小24
    .margin(20)          // 7. 外边距20
}
.tabBar('推荐')          // 8. 底部标签显示“推荐”

出现的就是这种效果：

这只是文字显示

如果想做出真正的轮播图需要用到Swiper()

Swiper() {
  // 放多张内容
}
.autoPlay(true)      // 自动播放
.interval(2000)      // 2秒切换一次
.indicator(true)     // 显示底部指示点
.loop(true)          // 循环播放（最后一张滑到第一张）
.vertical(false)     // 横向滑动（false）还是竖向（true）
.duration(500)       // 切换动画时长（毫秒）

代码格式需要注意，不然会报错，具体可以到相关网站学习文档中心

发现页面：弹性布局

Flex({ wrap: FlexWrap.Wrap })  // 弹性换行布局

第1行:  [ 1 ]  [ 2 ]  [ 3 ]
         ↑12px ↑12px ↑
         
第2行:  [ 4 ]  [ 5 ]  [ 6 ]

• 屏幕宽度 ÷ (80 + 24) = 大约3个

• 所以自动排成 2行 × 3列

这种布局的特点是布局灵活，自动换行

完整代码：

@Entry
@Component
struct 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个方框2列3行
      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)
  }
}