要实现同页面点菜单切换内容，需要用到选项卡组件Tabs。

Tabs可以由BarPosition来确定位置，因此我们这里设置为End，即为底部。

TabContent就是选项内容，有多少个内容就放多少个TabContent即可。

.tabBar()就是底部的选项卡。想自定义菜单怎么办？那就用@Builder函数。

在Layout.ets文件中加入内容。

为了使代码更简洁，使用ForEach来渲染四个选项。

另外，Column和Row组件中可以放入space参数，定义各个组件的距离。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// Layout.ets
interface TabClass {
  text: string
  icon: ResourceStr
}
// 跳转页面入口函数
@Builder
export function LayoutBuilder() {
  Layout();
}
@Component
struct Layout {
  pathStack: NavPathStack = new NavPathStack();
  tabData: TabClass[] = [
    {text: '推荐', icon: $r('app.media.ic_recommend')},
    {text: '发现', icon: $r('app.media.ic_find')},
    {text: '动态', icon: $r('app.media.ic_moment')},
    {text: '我的', icon: $r('app.media.ic_mine')}
  ]
  @Builder tabBuilder(item: TabClass) {
    Column({space: 5}) {
      Image(item.icon)
        .width(24)
        .height(24)
        .fillColor('#63AAAA')
      Text(item.text)
        .fontSize(14)
        .fontColor('#63AAAA')
    }
  }
  build() {
    NavDestination() {
      Tabs({barPosition: BarPosition.End}) {
        ForEach(this.tabData, (item: TabClass, index: number) => {
          TabContent() {
            Text('内容')
              .fontColor(Color.White)
          }
          .tabBar(this.tabBuilder(item))
          .backgroundColor('#131215')
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
        })
      }
      .backgroundColor('#3B3F42')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

效果如下：

目前还不能点击切换，下一章再实现。