当前位置: 首页 > article >正文

鸿蒙的底部菜单导航实现

开始入坑鸿蒙

效果图图下:

Index代码如下:

import Home from "../pages/home/Home" //首页
import Classify from "./classify/Classify" //分类
import Mine from "../pages/mine/Mine" //我的
@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageShow() {
    console.info('Index onPageShow');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageHide() {
    console.info('Index onPageHide');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('Index onBackPress');
  }
  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End,
        controller: this.controller
      }) {
        TabContent() {
          Home()
        }.tabBar(this.TabBuilder('首页', 0, $r('app.media.home_yes'), $r('app.media.home_no')))
        TabContent() {
          Classify()
        }.tabBar(this.TabBuilder('分类', 1, $r('app.media.classify_yes'), $r('app.media.classify_no')))

        TabContent() {
          Mine()
        }.tabBar(this.TabBuilder('我的', 2, $r('app.media.mine_yes'), $r('app.media.mine_no')))
      }.scrollable(false) // 禁止滑动切换
    }
    .width('100%')
    .height('100%')
  }
  // 自定义导航页签的样式
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Divider()
        .color('#e0e0e0') // 分割线颜色
        .height(1) // 分割线高度
        .margin({ top: 5 }) // 分割线上方的间距
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .margin({ top: 5 })
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1296db' : '#8a8a8a')
        .fontWeight(this.currentIndex === targetIndex ? FontWeight.Bold : FontWeight.Normal)

    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.controller.changeIndex(this.currentIndex)
    })
  }

}

单个页面(其他都一样)

@Component
export default struct Home {
  pageStack: NavPathStack = new NavPathStack()
  build() {
    Column() {
      Text("首页").width('100%').height('100%').textAlign(TextAlign.Center).fontSize("25fp")
    }.size({ width: '100%', height: '100%' })
  }
}

项目目录截图

我这里也给出工程代码:https://download.csdn.net/download/qq_41733851/89930328?spm=1001.2014.3001.5501


http://www.kler.cn/a/371342.html

相关文章:

  • 【优先算法】双指针
  • IDM下载器 (Internet Download Manager) v6.42.2 中文免激活绿色版
  • 百度SEO中的关键词密度与内容优化研究【百度SEO专家】
  • Django+Vue全栈开发掌握
  • 学 Python 还是学 Java?——来自程序员的世纪困惑!
  • 现代数字信号处理I--最佳线性无偏估计 BLUE 学习笔记
  • appium自动化对已打开的app操作
  • pdf转为txt文本格式并使用base64加密输出数据
  • 事务的原理、MVCC的原理
  • Pytest的测试用例相关问题总结
  • Linux下安装软件
  • 江协科技STM32学习- P22 实验-ADC单通道/ADC多通道
  • 交叉编译 lmbench(riscv64)
  • synchronized进阶原理
  • Python实现全国岗位招聘信息可视化分析(源码+论文+部署讲解)
  • 中国分省统计面板数据(2004-2023)-最新出炉_附下载链接
  • JavaEE初阶------网络编程续+传输层UDP协议介绍
  • Educational Codeforces Round 171 (Rated for Div. 2) A~E
  • 【Linux】动静态库:构建强大软件生态的基石
  • 张量分析与连续介质力学
  • 【vue】07.自定义指令
  • GitHub Copilot将支持来自Anthropic、Google和OpenAI的模型
  • 双指针——对撞指针与左右指针
  • Twitter网页版怎么登录?详细步骤与常见问题解答
  • kotlin的this和it用法
  • ffmpeg视频滤镜:膨胀操作-dilation