关于openharmony:鸿蒙智能家居10

39次阅读

共计 7723 个字符，预计需要花费 20 分钟才能阅读完成。

利用场景：

  • 智能家居。

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

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

智能家居中控

是不是很炫酷呢？

搭建 OpenHarmony 环境

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

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

    以 3.0 版本为例：

  2. 搭建烧录环境

    1. 实现 DevEco Device Tool 的装置
    2. 实现 Dayu200 开发板的烧录

  3. 搭建开发环境

    1. 开始前请参考工具筹备，实现 DevEco Studio 的装置和开发环境配置。
    2. 开发环境配置实现后，请参考应用工程向导 创立工程（模板抉择“Empty Ability”），抉择 eTS 语言开发。
    3. 工程创立实现后，抉择应用真机进行调测。

相干概念

容器组件

  • 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
@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")
  }
}

具体布局

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

代码构造

编码

Index.ets

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})

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")
  }
}

咱们能够对，上面的这块进行封装

代码如下

@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
发表至： openharmony
2022-07-14
 0
关于openharmony:OpenHarmony技术挑战课题征集
关于openharmony:PIMF低代码可视化界面入门OpenHarmony31-Release应用开发
关于openharmony:宿舍全屋智能开发指南
关于openharmony:今晚1900知识赋能第2期直播丨OpenHarmony智能家居项目之控制面板界面设计