利用场景：
- 智能家居。
明天打造的这一款全新智能家庭控制系统，凸显利用在智能管制和用户体验的特点，创始国内智能家居零碎体验新场面。新的零碎次要利用在鸿蒙生态。
在开始之前大家能够先预览一下我实现之后的成果。
智能家居中控
是不是很炫酷呢？
搭建OpenHarmony环境
实现本篇Codelab咱们首先要实现开发环境的搭建，本示例以DaYu200开发板为例，参照以下步骤进行：
获取OpenHarmony零碎版本：规范零碎解决方案（二进制）
以3.0版本为例：
搭建烧录环境
- 实现DevEco Device Tool的装置
- 实现Dayu200开发板的烧录
搭建开发环境
- 开始前请参考工具筹备 ，实现DevEco Studio的装置和开发环境配置。
- 开发环境配置实现后，请参考应用工程向导 创立工程（模板抉择“Empty Ability”），抉择eTS语言开发。
- 工程创立实现后，抉择应用真机进行调测 。
相干概念
容器组件
- Column
- Row
- Stack
根底组件
- Text
- TextInput
- Button
- Image
- Navigation
通用
- 边框设置
- 尺寸设置
- 点击管制
- 布局束缚
- 背景设置
- 点击事件
TS语法糖
好的接下来我将具体解说如何制作
开发教学
创立好的 eTS工程目录
新建工程的ETS目录如下图所示。
各个文件夹和文件的作用：
- index.ets：用于形容UI布局、款式、事件交互和页面逻辑。
- app.ets：用于全局应用逻辑和利用生命周期治理。
- pages：用于寄存所有组件页面。
- resources：用于寄存资源配置文件。
接下来开始注释。
咱们的次要操作都是在在pages目录中，而后我将用不到10分钟的工夫，带大家实现这个性能。
拆解
依据设计图，咱们能够分层展现，用Column包裹，大抵分为这几步
能够看下本页的构造：
再具体一点：
import { SettingDetails } from './common/SettingDetails';import router from '@ohos.router';@Entry@Componentstruct Index { @State title: string = '智能家居体验' @State message: string = '你当初想要关上那些设置？' @State desc: string = '点击所有实用的选项。这将帮忙咱们\n自定义您的主页' @State Number: String[] = ['0', '1', '2', '3', '4'] @State private isSelect: boolean = true; build() { Column() { Text(this.title) .fontSize(80) .fontWeight(FontWeight.Bold).onClick(() => { router.push({ url: 'pages/SensorScreen' }) }).margin({ bottom: 60, top: 40 }) Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold).onClick(() => { router.push({ url: 'pages/SensorScreen' }) }).margin({ bottom: 60 }) Text(this.desc) .fontSize(30) .textAlign(TextAlign.Center) .fontWeight(FontWeight.Bold) .onClick(() => { }) .margin({ bottom: 60 }) Row() { SettingDetails({ image: "common/images/setting.png", title: "Maintenance\nRequests", isSelected: this.isSelect! }) SettingDetails({ image: "common/images/grain.png", title: "Integrations\n", isSelected: this.isSelect! }) SettingDetails({ image: "common/images/ic_highlight.png", title: "Light\nControl", isSelected: this.isSelect! }) } Row() { SettingDetails({ image: "common/images/opacity.png", title: "Leak\nDetector", isSelected: this.isSelect! }) SettingDetails({ image: "common/images/ac_unit.png", title: "Temperature\nControl", isSelected: this.isSelect! }) SettingDetails({ image: "common/images/key.png", title: "Guest\nAccess", isSelected: this.isSelect! }) } Button("NEXT") .fontSize(60) .fontColor(Color.Black) .width(600) .height(100) .backgroundColor(Color.Red) .margin({ top: 100 }) .onClick(() => { router.push({ url: 'pages/SensorScreen' }) }) } .width('100%') .height('100%').backgroundColor("#F5F5F5") }}具体布局
具体布局设计到一些细节的中央，例如距离，边框，以后组件尺寸设置等一些非凡状况，基本上就是嵌套，一层一层去实现。
代码构造
编码
Index.ets
import { SettingDetails } from './common/SettingDetails';import router from '@ohos.router';@Entry@Componentstruct Index { @State title: string = '智能家居体验' @State message: string = '你当初想要关上那些设置？' @State desc: string = '点击所有实用的选项。这将帮忙咱们\n自定义您的主页' @State Number: String[] = ['0', '1', '2', '3', '4'] @State private isSelect: boolean = true; build() { Column() { Text(this.title) .fontSize(80) .fontWeight(FontWeight.Bold).onClick(() => { router.push({ url: 'pages/SensorScreen' }) }).margin({ bottom: 60, top: 40 }) Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold).onClick(() => { router.push({ url: 'pages/SensorScreen' }) }).margin({ bottom: 60 }) Text(this.desc) .fontSize(30) .textAlign(TextAlign.Center) .fontWeight(FontWeight.Bold) .onClick(() => { }) .margin({ bottom: 60 }) Row() { SettingDetails({ image: "common/images/setting.png", title: "Maintenance\nRequests", isSelected: this.isSelect! }) SettingDetails({ image: "common/images/grain.png", title: "Integrations\n", isSelected: this.isSelect! }) SettingDetails({ image: "common/images/ic_highlight.png", title: "Light\nControl", isSelected: this.isSelect! }) } Row() { SettingDetails({ image: "common/images/opacity.png", title: "Leak\nDetector", isSelected: this.isSelect! }) SettingDetails({ image: "common/images/ac_unit.png", title: "Temperature\nControl", isSelected: this.isSelect! }) SettingDetails({ image: "common/images/key.png", title: "Guest\nAccess", isSelected: this.isSelect! }) } Button("NEXT") .fontSize(60) .fontColor(Color.Black) .width(600) .height(100) .backgroundColor(Color.Red) .margin({ top: 100 }) .onClick(() => { router.push({ url: 'pages/SensorScreen' }) }) } .width('100%') .height('100%').backgroundColor("#F5F5F5") }}针对这一页：首先是头部
代码如下：
Row() { Image($r("app.media.logo")) .objectFit(ImageFit.Contain) .width(200) .height(200) .borderRadius(21) Column() { Text('June 14, 2022') .fontSize(40).opacity(0.4) .fontWeight(FontWeight.Bold) Text('Good Morning,\nJianGuo',) .fontSize(60) .fontWeight(FontWeight.Bold) } }其次是个人信息，包含头像等信息：
代码如下：
接下来就是温度和湿度
代码如下：
ow({ space: 120 }) { Column() { Text('40°',) .fontSize(40).opacity(0.4) .fontWeight(FontWeight.Bold) Text('TEMPERATURE',) .fontSize(40).opacity(0.4) }.margin({ left: 60 }) Column() { Text('59%',) .fontSize(40).opacity(0.4) .fontWeight(FontWeight.Bold) Text('HUMIDITY',) .fontSize(40).opacity(0.4) }.margin({ right: 60 }) }.margin({ top: 20 })SensorScreen.ets
import { HomeDetails } from './common/homedetails';// second.etsimport router from '@ohos.router';@Entry@Componentstruct Second { @State message: string = 'Hi there' @State private isSelect: boolean = true; build() { Column() { Row() { Image($r("app.media.back")) .objectFit(ImageFit.Contain) .width(80) .height(80) .onClick(() => { router.back() }) Blank() Text('Home') .fontSize(45) .fontWeight(FontWeight.Bold) Blank() Image($r("app.media.notifications_none")) .objectFit(ImageFit.Contain) .width(80) .height(80) .onClick(() => { router.back() }) } .width('100%') Row() { Image($r("app.media.logo")) .objectFit(ImageFit.Contain) .width(200) .height(200) .borderRadius(21) Column() { Text('June 14, 2022') .fontSize(40).opacity(0.4) .fontWeight(FontWeight.Bold) Text('Good Morning,\nJianGuo',) .fontSize(60) .fontWeight(FontWeight.Bold) } } Row({ space: 120 }) { Column() { Text('40°',) .fontSize(40).opacity(0.4) .fontWeight(FontWeight.Bold) Text('TEMPERATURE',) .fontSize(40).opacity(0.4) }.margin({ left: 60 }) Column() { Text('59%',) .fontSize(40).opacity(0.4) .fontWeight(FontWeight.Bold) Text('HUMIDITY',) .fontSize(40).opacity(0.4) }.margin({ right: 60 }) }.margin({ top: 20 }) Row() { HomeDetails({}) HomeDetails({ image: "common/images/lightbull.png", isSelected: this.isSelect! }) } Row() { HomeDetails({ image: "common/images/opacity.png" }) HomeDetails({ image: "common/images/yytem0.png" }) } Row(){ Column(){ Text('ADD',) .fontSize(40).opacity(0.4) .fontWeight(FontWeight.Bold) Text('NEW CONTROL',) .fontSize(40).opacity(0.4) } Blank() Image($r("app.media.add")) .objectFit(ImageFit.Contain) .width(100) .height(100) .borderRadius(21).margin({right:40}) }.border({ color:Color.White, width:8, radius:20 }).width("88%").height(150) }.width("100%") .height('100%').backgroundColor("#F5F5F5") }}咱们能够对，上面的这块进行封装
代码如下
@Entry@Componentexport struct SettingDetails { @State private image: string = "common/images/setting.png" @State private title: string = "Maintenance\nRequests" @State private isSelected: boolean = true; build() { Column() { Image(this.image) .objectFit(ImageFit.Contain) .width(140) .height(120) .margin(20) .border({ width: 12, color: this.isSelected ? Color.White : Color.Red, radius: 20 }) .onClick(() => { this.isSelected = !this.isSelected; }) Text(this.title).fontSize(32).width(200).textAlign(TextAlign.Center) }}}咱们能够对，上面的这块进行封装
代码如下
@Entry@Componentexport struct SettingDetails { @State private image: string = "common/images/setting.png" @State private title: string = "Maintenance\nRequests" @State private isSelected: boolean = true; build() { Column() { Image(this.image) .objectFit(ImageFit.Contain) .width(140) .height(120) .margin(20) .border({ width: 12, color: this.isSelected ? Color.White : Color.Red, radius: 20 }) .onClick(() => { this.isSelected = !this.isSelected; }) Text(this.title).fontSize(32).width(200).textAlign(TextAlign.Center) }}}最初就是底部
代码如下：
Row(){ Column(){ Text('ADD',) .fontSize(40).opacity(0.4) .fontWeight(FontWeight.Bold) Text('NEW CONTROL',) .fontSize(40).opacity(0.4) } Blank() Image($r("app.media.add")) .objectFit(ImageFit.Contain) .width(100) .height(100) .borderRadius(21).margin({right:40}) }.border({ color:Color.White, width:8, radius:20 }).width("88%").height(150)祝贺你
在本文中，通过实现智联汽车App示例，我次要为大家解说了如下ArkUI（基于TS扩大的类Web开发范式）组件，以及路由跳转。
容器组件
- Column
- Row
- Stack
根底组件
- Text
- Button
- Image
- Navigation
通用
- 边框设置
- 尺寸设置
- 点击管制
- 布局束缚
- 背景设置
- 点击事件
TS语法糖
心愿通过本教程，各位开发者能够对以上根底组件具备更粗浅的意识。
前面的打算：
- 智能互联
- 硬件交互
- 动画交互