目录

案例介绍

本案例将重点介绍导航栏中分段控制导航栏和侧边导航栏的实现。通过Flex组件的布局能力，我们将创建灵活且美观的导航控制界面。

代码实现

@Entry
@Component
struct NavigationBarExample {
  @Builder
  SegmentedNavBar() {
    Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
      ForEach(this.segments, (segment, index) => {
        Text(segment)
          .fontSize(16)
          .fontWeight(index === this.currentSegment ? FontWeight.Bold : FontWeight.Normal)
          .fontColor(index === this.currentSegment ? '#007DFF' : '#333333')
          .padding({ top: 12, bottom: 12 })
          .borderColor('#007DFF')
          .borderWidth({ bottom: index === this.currentSegment ? 2 : 0 })
          .onClick(() => {
            this.currentSegment = index
          })
      })
    }
    .width('100%')
    .backgroundColor(Color.White)
    .margin({ bottom: 10 })
  }

  @Builder
  SideNavBar() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
      // 用户信息
      Flex({ alignItems: ItemAlign.Center }) {
        Image('/assets/avatar.png')
          .width(50)
          .height(50)
          .borderRadius(25)
          .margin({ right: 10 })
        
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
          Text('用户名')
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
            .margin({ bottom: 4 })
          
          Text('查看个人主页')
            .fontSize(12)
            .fontColor('#666666')
        }
      }
      .width('100%')
      .padding(15)
      .borderColor('#EEEEEE')
      .borderWidth({ bottom: 1 })
      
      // 导航项
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        ForEach(this.sideNavItems, (item) => {
          Flex({ alignItems: ItemAlign.Center }) {
            Image(item.icon)
              .width(24)
              .height(24)
              .margin({ right: 10 })
            
            Text(item.name)
              .fontSize(16)
          }
          .width('100%')
          .padding(15)
          .onClick(() => {
            // 这里可以添加导航逻辑
          })
        })
      }
      .width('100%')
      
      // 底部退出按钮
      Flex({ alignItems: ItemAlign.Center }) {
        Image('/assets/logout.png')
          .width(24)
          .height(24)
          .margin({ right: 10 })
        
        Text('退出登录')
          .fontSize(16)
          .fontColor('#FF3B30')
      }
      .width('100%')
      .padding(15)
      .margin({ top: 20 })
    }
    .width(this.screenWidth > 600 ? 250 : '80%')
    .height('100%')
    .backgroundColor(Color.White)
  }

  build() {
    Column() {
      // 分段控制导航栏
      this.SegmentedNavBar()
      
      // 侧边导航栏（在大屏设备上显示）
      if (this.showSideNav && this.screenWidth > 600) {
        this.SideNavBar()
      }
    }
  }
}

代码详解

1. 分段控制导航栏实现

SegmentedNavBar组件的布局特点：

• 使用水平方向的Flex布局，设置justifyContent为SpaceEvenly
• 通过ForEach遍历创建分段选项
• 根据选中状态设置不同的样式
• 使用底部边框标识当前选中项

2. 分段导航交互

分段导航的交互设计：

• 点击切换当前选中的分段
• 选中状态使用粗体和蓝色突出显示
• 添加底部边框增强视觉反馈

3. 侧边导航栏实现

SideNavBar组件的布局结构：

• 使用垂直方向的Flex布局组织内容
• 顶部显示用户信息
• 中间是导航选项列表
• 底部放置退出按钮

4. 响应式设计

侧边导航栏的响应式处理：

• 根据屏幕宽度设置不同的宽度
• 大屏设备固定宽度为250px
• 小屏设备使用百分比宽度

总结

本案例展示了如何使用Flex组件实现导航栏的分段控制和侧边导航功能。通过合理的布局设计和样式处理，我们创建了功能完整的导航控制界面。分段导航提供了内容切换的功能，而侧边导航则为用户提供了快捷的功能访问入口，两者结合为应用提供了全面的导航解决方案。