鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)
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、图片资源文件
见资源绑定