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

鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)

鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)

  • 1、效果展示
  • 2、下载 DevEco Studio
  • 3、创建项目
  • 4、新建页面模板
  • 5、更改应用信息
  • 6、新建以下页面
  • 7、Index.ets
  • 8、真机运行
  • 9、图片资源文件

1、效果展示

在这里插入图片描述

在这里插入图片描述

2、下载 DevEco Studio

  • 访问官网根据自己的版本进行下载,默认安装下一步即可。
https://developer.huawei.com/consumer/cn/download/

在这里插入图片描述

3、创建项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、新建页面模板

在这里插入图片描述
在这里插入图片描述

/**
* ${PROJECT_NAME} #项目的名称 
* ${FILE_NAME} #文件名称
* Created by ${USER} ON ${DATE} #作者及添加日期
*/
@Entry
@Component
struct ${NAME} {
  build() {
    
  }
}

5、更改应用信息

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "硅谷租房" # 应用名称
    }
  ]
}

6、新建以下页面

  • Home.ets
  • See.ets
  • Discover.ets
  • Service.ets
  • My.ets
    在这里插入图片描述
    在这里插入图片描述

7、Index.ets

import Home from './Home'
import See from './See'
import Service from './Service'
import Discover from './Discover'
import My from './My'

@Entry
@Component
struct Index {
  @State currentTabBarIndex: number = 0;

  @Builder
  tabBarBuilder(image: Resource, activeImage: Resource, text: string, index: number) {
    Column() {
      Image(this.currentTabBarIndex == index ? activeImage : image).width(28).height(28)
      Text(text).fontSize(10).fontColor(this.currentTabBarIndex == index ? '#000' : '#CBCBCB')
    }
  }

  build() {
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Home()
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_home'), $r('app.media.tabbar_home_active'), '首页', 0))

      TabContent() {
        See()
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_see'), $r('app.media.tabbar_see_active'), '想看', 1))

      TabContent() {
        Service()
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_service'), $r('app.media.tabbar_service_active'), '服务', 2))

      TabContent() {
        Discover()
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_discover'), $r('app.media.tabbar_discover_active'), '发现', 3))

      TabContent() {
        My()
      }.tabBar(this.tabBarBuilder($r('app.media.tabbar_my'), $r('app.media.tabbar_my_active'), '我的', 4))
    }.barHeight(50)
    .scrollable(false)
    .onChange((index) => {
      this.currentTabBarIndex = index;
    })
  }
}

8、真机运行

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9、图片资源文件

见资源绑定

http://www.dtcms.com/a/35998.html

相关文章:

  • Zama fhEVM应用:摩根大通旗下 Kinexys 发布概念验证
  • 【算法】冒泡排序
  • STM32 利用SysTick实现高精度计时
  • UE5 Gameplay框架及继承关系详解
  • C++基础知识学习记录—多态
  • 赛前启航 | 三场重磅直播集结,予力微软 AI 开发者挑战赛!
  • Redis分布式锁故障处理:当Redis不可用时的应对策略
  • 计算机网络与通讯知识总结
  • 如何在WordPress网站中查看移动版本—快速预览与自定义设置
  • 深入浅出ES6:现代JavaScript的基石
  • flask后端开发(8):Flask连接MySQL数据库+ORM增删改查
  • MongoDB03 - MongoDB索引,事务和安全
  • 2025年2月科技热点深度解析:AI竞赛、量子突破与开源革命
  • 图论算法篇:BFS宽度优先遍历
  • 考研/保研复试英语问答题库(华工建院)
  • 学习路程二 LangChain基本介绍
  • Docker基础实践与应用举例
  • Redis——用户签到BitMap,UV统计
  • Css3重点知识讲解
  • Mysql的数值类型
  • GEO数据结构
  • SpringSecurity的核心过滤器-CsrfFilter
  • Qt如何将数据传入labview,Qt又如何从labview中读取数据?
  • 利用python和gpt写一个conda环境可视化管理工具
  • 网络安全系统概述 网络安全系统分为几级
  • 为AI聊天工具添加一个知识系统 之121 详细设计之62 神经元元模型函子(虚机构造型)
  • 鸿蒙5.0实战案例:基于原生能力的横竖屏旋转适配
  • 【安装及调试旧版Chrome + 多版本环境测试全攻略】
  • 学习路程四 向量数据库Milvus安装与连接
  • 【Vue.js 和 React.js 的主要区别是什么?】