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

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

1、效果展示

2、下载 DevEco Studio

3、创建项目



4、新建页面模板


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

5、更改应用信息

json 复制代码
{
  "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

js 复制代码
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、图片资源文件

见资源绑定

相关推荐
幽蓝计划3 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少9 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划10 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core12 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡12 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说12 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
funnycoffee12313 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院13 小时前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_13 小时前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈1 天前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos