当前位置：网站首页>Hongmeng smart home [1.0]

Hongmeng smart home [1.0]

2022-07-07 19:09:00 【InfoQ】



Application scenarios ：

  • Smart home .
This new intelligent home control system created today , Highlight the characteristics of applications in intelligent control and user experience , Create a new situation for domestic smart home system experience . The new system is mainly applied in Hongmeng ecology .
Before starting, you can preview the effect after I finish .

Isn't it cool ？

build OpenHarmony Environmental Science

Complete this chapter Codelab We must first complete the construction of the development environment , This example uses
DaYu200
Development board as an example , Refer to the following steps ：
  • obtain OpenHarmony System version
    ： Standard system solutions （ Binary system ）
  • With 3.0 Version as an example ：

  • Set up a burning environment
  • complete DevEco Device Tool Installation
  • complete Dayu200 Development board burning
  • Build development environment
  • Please refer to before starting
    Tool preparation
     , complete DevEco Studio Installation and development environment configuration of .
  • After the development environment is configured , Please refer to
    Use the project wizard
      Create a project （ Template selection “Empty Ability”）, choice eTS Language development .
  • After the project is created , Choose to use
    Real machine for debugging
     .

Relevant concepts

Container components
  • Column
  • Row
  • Stack
Basic components
  • Text
  • TextInput
  • Button
  • Image
  • Navigation
Universal
  • Border settings
  • Size settings
  • Click Control
  • Layout constraints
  • Background setting
  • Click event
TS Grammatical sugar
OK, next I will explain in detail how to make

Develop teaching

Create good  eTS Project directory

For new projects ETS The table of contents is shown in the figure below .

The role of each folder and file ：
  • index.ets
    ： Used to describe UI Layout 、 style 、 Event interaction and page logic .
  • app.ets
    ： For global application logic and application lifecycle management .
  • pages
    ： Used to store all component pages .
  • resources
    ： It is used to store resource configuration files .
Next, start the text .
Our main operations are in pages Directory , Then I won't use it 10 Minutes of time , Take you to realize this function .

Take apart


According to the plan , We can show it in layers , use Column The parcel , It can be roughly divided into these steps


You can see the structure of this page ：


More details ：



import { SettingDetails } from './common/SettingDetails';
import router from '@ohos.router';
​
@Entry
@Component
struct Index {
  @State title: string = ' Smart home experience '
  @State message: string = ' Now you want to open those settings ？'
  @State desc: string = ' Click on all applicable options . This will help us \n Customize your homepage '
  @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")
 }
}

Specific layout

Specific layout design to some details , For example, interval , Frame , Some special cases such as current component size settings , It's basically nesting , Layer by layer .

The code structure


code

Index.ets
import { SettingDetails } from './common/SettingDetails';
import router from '@ohos.router';
​
@Entry
@Component
struct Index {
  @State title: string = ' Smart home experience '
  @State message: string = ' Now you want to open those settings ？'
  @State desc: string = ' Click on all applicable options . This will help us \n Customize your homepage '
  @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")
 }
}

For this page ： First, the head


The code is as follows ：
 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)
       }
​
​
     }
The second is personal information , Including avatar and other information ：



The code is as follows ：
​
Next is temperature and humidity

The code is as follows ：
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.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")
 }
}

We can , The following piece is encapsulated

The code is as follows
@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)
 }
}}
We can , The following piece is encapsulated


The code is as follows
@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)
 }
}}
Finally, the bottom

The code is as follows ：
 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)

congratulations

In this paper , By realizing Zhilian automobile App Example , I mainly explained the following for you ArkUI（ be based on TS Extended classes Web Development paradigm ） Components , And route jump .
Container components
  • Column
  • Row
  • Stack
Basic components
  • Text
  • Button
  • Image
  • Navigation
Universal
  • Border settings
  • Size settings
  • Click Control
  • Layout constraints
  • Background setting
  • Click event
TS Grammatical sugar
Hope that through this tutorial , All developers can have a deeper understanding of the above basic components .
Later plans ：
  • Intelligent interconnection
  • Hardware interaction
  • Animation interaction
原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/188/202207071659466811.html

边栏推荐

猜你喜欢

随机推荐