关于openharmony:鸿蒙智能家居10

智能家居。

明天打造的这一款全新智能家庭控制系统，凸显利用在智能管制和用户体验的特点，创始国内智能家居零碎体验新场面。新的零碎次要利用在鸿蒙生态。

在开始之前大家能够先预览一下我实现之后的成果。

智能家居中控

是不是很炫酷呢？

实现本篇 Codelab 咱们首先要实现开发环境的搭建，本示例以 DaYu200 开发板为例，参照以下步骤进行：

获取 OpenHarmony 零碎版本：规范零碎解决方案（二进制）

以 3.0 版本为例：
搭建烧录环境
1. 实现 DevEco Device Tool 的装置
2. 实现 Dayu200 开发板的烧录
搭建开发环境
1. 开始前请参考工具筹备，实现 DevEco Studio 的装置和开发环境配置。
2. 开发环境配置实现后，请参考应用工程向导创立工程（模板抉择“Empty Ability”），抉择 eTS 语言开发。
3. 工程创立实现后，抉择应用真机进行调测。

容器组件

Column
Row
Stack

根底组件

Text
TextInput
Button
Image
Navigation

通用

边框设置
尺寸设置
点击管制
布局束缚
背景设置
点击事件

TS 语法糖

好的接下来我将具体解说如何制作

新建工程的 ETS 目录如下图所示。

各个文件夹和文件的作用：

index.ets：用于形容 UI 布局、款式、事件交互和页面逻辑。
app.ets：用于全局应用逻辑和利用生命周期治理。
pages：用于寄存所有组件页面。
resources：用于寄存资源配置文件。

接下来开始注释。

咱们的次要操作都是在在 pages 目录中，而后我将用不到 10 分钟的工夫，带大家实现这个性能。

依据设计图，咱们能够分层展现，用 Column 包裹，大抵分为这几步

能够看下本页的构造：

再具体一点：

import {SettingDetails} from './common/SettingDetails';
import router from '@ohos.router';

@Entry
@Component
struct 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")
  }
}

具体布局设计到一些细节的中央，例如距离，边框，以后组件尺寸设置等一些非凡状况，基本上就是嵌套，一层一层去实现。

import {SettingDetails} from './common/SettingDetails';
import router from '@ohos.router';

@Entry
@Component
struct 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})

import {HomeDetails} from './common/homedetails';
// second.ets
import router from '@ohos.router';

@Entry
@Component
struct 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
@Component
export 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
@Component
export 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 语法糖

心愿通过本教程，各位开发者能够对以上根底组件具备更粗浅的意识。

前面的打算：

智能互联
硬件交互
动画交互

关于openharmony:鸿蒙智能家居10

利用场景：

搭建 OpenHarmony 环境

相干概念

开发教学

创立好的 eTS 工程目录

拆解

具体布局

代码构造

编码

Index.ets

SensorScreen.ets

祝贺你