当前位置：网站首页>鸿蒙智能家居【1.0】

鸿蒙智能家居【1.0】

2022-07-07 16:59:00 【InfoQ】

应用场景：

智能家居。

今天打造的这一款全新智能家庭控制系统，凸显应用在智能控制和用户体验的特点，开创国内智能家居系统体验新局面。新的系统主要应用在鸿蒙生态。

在开始之前大家可以先预览一下我完成之后的效果。

是不是很炫酷呢？

搭建OpenHarmony环境

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以

DaYu200

开发板为例，参照以下步骤进行：

获取OpenHarmony系统版本
：标准系统解决方案（二进制）
以3.0版本为例：

搭建烧录环境
完成DevEco Device Tool的安装
完成Dayu200开发板的烧录

搭建开发环境
开始前请参考
工具准备
，完成DevEco Studio的安装和开发环境配置。
开发环境配置完成后，请参考
使用工程向导
创建工程（模板选择“Empty Ability”），选择eTS语言开发。
工程创建完成后，选择使用
真机进行调测
。

开发教学

创建好的 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 {
 &nbsp;@State title: string = '智能家居体验'
 &nbsp;@State message: string = '你现在想要打开那些设置？'
 &nbsp;@State desc: string = '点击所有适用的选项。这将帮助我们\n自定义您的主页'
 &nbsp;@State Number: String[] = ['0', '1', '2', '3', '4']
 &nbsp;@State private isSelect: boolean = true;

 &nbsp;build() {

 &nbsp; &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp; &nbsp;Text(this.title)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(80)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold).onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;router.push({ url: 'pages/SensorScreen' })
 &nbsp; &nbsp; &nbsp; }).margin({ bottom: 60, top: 40 })
 &nbsp; &nbsp; &nbsp; &nbsp;Text(this.message)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(50)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold).onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;router.push({ url: 'pages/SensorScreen' })
 &nbsp; &nbsp; &nbsp; }).margin({ bottom: 60 })
 &nbsp; &nbsp; &nbsp; &nbsp;Text(this.desc)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(30)
 &nbsp; &nbsp; &nbsp; &nbsp; .textAlign(TextAlign.Center)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; .onClick(() => {

 &nbsp; &nbsp; &nbsp; &nbsp; })
 &nbsp; &nbsp; &nbsp; &nbsp; .margin({ bottom: 60 })
 &nbsp; &nbsp; &nbsp; &nbsp;Row() {

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;image: &quot;common/images/setting.png&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: &quot;Maintenance\nRequests&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isSelected: this.isSelect!
 &nbsp; &nbsp; &nbsp; &nbsp; })

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({ image: &quot;common/images/grain.png&quot;, title: &quot;Integrations\n&quot;, isSelected: this.isSelect! })

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;image: &quot;common/images/ic_highlight.png&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: &quot;Light\nControl&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isSelected: this.isSelect!
 &nbsp; &nbsp; &nbsp; &nbsp; })

 &nbsp; &nbsp; &nbsp; }
 &nbsp; &nbsp; &nbsp; &nbsp;Row() {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({ image: &quot;common/images/opacity.png&quot;, title: &quot;Leak\nDetector&quot;, isSelected: this.isSelect! })
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;image: &quot;common/images/ac_unit.png&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: &quot;Temperature\nControl&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isSelected: this.isSelect!
 &nbsp; &nbsp; &nbsp; &nbsp; })
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({ image: &quot;common/images/key.png&quot;, title: &quot;Guest\nAccess&quot;, isSelected: this.isSelect! })


 &nbsp; &nbsp; &nbsp; }
 &nbsp; &nbsp; &nbsp; &nbsp;Button(&quot;NEXT&quot;)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(60)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontColor(Color.Black)
 &nbsp; &nbsp; &nbsp; &nbsp; .width(600)
 &nbsp; &nbsp; &nbsp; &nbsp; .height(100)
 &nbsp; &nbsp; &nbsp; &nbsp; .backgroundColor(Color.Red)
 &nbsp; &nbsp; &nbsp; &nbsp; .margin({ top: 100 })
 &nbsp; &nbsp; &nbsp; &nbsp; .onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;router.push({ url: 'pages/SensorScreen' })
 &nbsp; &nbsp; &nbsp; &nbsp; })
 &nbsp; &nbsp; }
 &nbsp; &nbsp; .width('100%')
 &nbsp; &nbsp;
 &nbsp; .height('100%').backgroundColor(&quot;#F5F5F5&quot;)
 }
}

具体布局

具体布局设计到一些细节的地方，例如间隔，边框，当前组件尺寸设置等一些特殊情况，基本上就是嵌套，一层一层去实现。

代码结构

编码

Index.ets

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

@Entry
@Component
struct Index {
 &nbsp;@State title: string = '智能家居体验'
 &nbsp;@State message: string = '你现在想要打开那些设置？'
 &nbsp;@State desc: string = '点击所有适用的选项。这将帮助我们\n自定义您的主页'
 &nbsp;@State Number: String[] = ['0', '1', '2', '3', '4']
 &nbsp;@State private isSelect: boolean = true;

 &nbsp;build() {

 &nbsp; &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp; &nbsp;Text(this.title)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(80)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold).onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;router.push({ url: 'pages/SensorScreen' })
 &nbsp; &nbsp; &nbsp; }).margin({ bottom: 60, top: 40 })
 &nbsp; &nbsp; &nbsp; &nbsp;Text(this.message)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(50)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold).onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;router.push({ url: 'pages/SensorScreen' })
 &nbsp; &nbsp; &nbsp; }).margin({ bottom: 60 })
 &nbsp; &nbsp; &nbsp; &nbsp;Text(this.desc)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(30)
 &nbsp; &nbsp; &nbsp; &nbsp; .textAlign(TextAlign.Center)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; .onClick(() => {

 &nbsp; &nbsp; &nbsp; &nbsp; })
 &nbsp; &nbsp; &nbsp; &nbsp; .margin({ bottom: 60 })
 &nbsp; &nbsp; &nbsp; &nbsp;Row() {

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;image: &quot;common/images/setting.png&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: &quot;Maintenance\nRequests&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isSelected: this.isSelect!
 &nbsp; &nbsp; &nbsp; &nbsp; })

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({ image: &quot;common/images/grain.png&quot;, title: &quot;Integrations\n&quot;, isSelected: this.isSelect! })

 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;image: &quot;common/images/ic_highlight.png&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: &quot;Light\nControl&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isSelected: this.isSelect!
 &nbsp; &nbsp; &nbsp; &nbsp; })

 &nbsp; &nbsp; &nbsp; }
 &nbsp; &nbsp; &nbsp; &nbsp;Row() {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({ image: &quot;common/images/opacity.png&quot;, title: &quot;Leak\nDetector&quot;, isSelected: this.isSelect! })
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;image: &quot;common/images/ac_unit.png&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title: &quot;Temperature\nControl&quot;,
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;isSelected: this.isSelect!
 &nbsp; &nbsp; &nbsp; &nbsp; })
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SettingDetails({ image: &quot;common/images/key.png&quot;, title: &quot;Guest\nAccess&quot;, isSelected: this.isSelect! })


 &nbsp; &nbsp; &nbsp; }
 &nbsp; &nbsp; &nbsp; &nbsp;Button(&quot;NEXT&quot;)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(60)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontColor(Color.Black)
 &nbsp; &nbsp; &nbsp; &nbsp; .width(600)
 &nbsp; &nbsp; &nbsp; &nbsp; .height(100)
 &nbsp; &nbsp; &nbsp; &nbsp; .backgroundColor(Color.Red)
 &nbsp; &nbsp; &nbsp; &nbsp; .margin({ top: 100 })
 &nbsp; &nbsp; &nbsp; &nbsp; .onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;router.push({ url: 'pages/SensorScreen' })
 &nbsp; &nbsp; &nbsp; &nbsp; })
 &nbsp; &nbsp; }
 &nbsp; &nbsp; .width('100%')

 &nbsp; .height('100%').backgroundColor(&quot;#F5F5F5&quot;)
 }
}

针对这一页：首先是头部

代码如下：

 Row() {

 &nbsp; &nbsp; &nbsp; Image($r(&quot;app.media.logo&quot;))
 &nbsp; &nbsp; &nbsp; &nbsp; .objectFit(ImageFit.Contain)
 &nbsp; &nbsp; &nbsp; &nbsp; .width(200)
 &nbsp; &nbsp; &nbsp; &nbsp; .height(200)
 &nbsp; &nbsp; &nbsp; &nbsp; .borderRadius(21)

 &nbsp; &nbsp; &nbsp; Column() {
 &nbsp; &nbsp; &nbsp; &nbsp; Text('June 14, 2022')
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; Text('Good Morning,\nJianGuo',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(60)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; }


 &nbsp; &nbsp; }

其次是个人信息，包括头像等信息：

代码如下：

接下来就是温度和湿度

代码如下：

ow({ space: 120 }) {
 &nbsp; &nbsp; &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('40°',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('TEMPERATURE',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; }.margin({ left: 60 })

 &nbsp; &nbsp; &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('59%',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('HUMIDITY',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; }.margin({ right: 60 })
 &nbsp; &nbsp; }.margin({ top: 20 })

SensorScreen.ets

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

@Entry
@Component
struct Second {
 &nbsp;@State message: string = 'Hi there'
 &nbsp;@State private isSelect: boolean = true;

 &nbsp;build() {

 &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp;Row() {

 &nbsp; &nbsp; &nbsp; &nbsp;Image($r(&quot;app.media.back&quot;))
 &nbsp; &nbsp; &nbsp; &nbsp; .objectFit(ImageFit.Contain)
 &nbsp; &nbsp; &nbsp; &nbsp; .width(80)
 &nbsp; &nbsp; &nbsp; &nbsp; .height(80)
 &nbsp; &nbsp; &nbsp; &nbsp; .onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;router.back()
 &nbsp; &nbsp; &nbsp; &nbsp; })

 &nbsp; &nbsp; &nbsp; &nbsp;Blank()

 &nbsp; &nbsp; &nbsp; &nbsp;Text('Home')
 &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(45)
 &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)


 &nbsp; &nbsp; &nbsp; &nbsp;Blank()
 &nbsp; &nbsp; &nbsp; &nbsp;Image($r(&quot;app.media.notifications_none&quot;))
 &nbsp; &nbsp; &nbsp; &nbsp; .objectFit(ImageFit.Contain)
 &nbsp; &nbsp; &nbsp; &nbsp; .width(80)
 &nbsp; &nbsp; &nbsp; &nbsp; .height(80)
 &nbsp; &nbsp; &nbsp; &nbsp; .onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;router.back()
 &nbsp; &nbsp; &nbsp; &nbsp; })

 &nbsp; &nbsp; }

 &nbsp; &nbsp; .width('100%')

 &nbsp; &nbsp; &nbsp;Row() {

 &nbsp; &nbsp; &nbsp; &nbsp;Image($r(&quot;app.media.logo&quot;))
 &nbsp; &nbsp; &nbsp; &nbsp; .objectFit(ImageFit.Contain)
 &nbsp; &nbsp; &nbsp; &nbsp; .width(200)
 &nbsp; &nbsp; &nbsp; &nbsp; .height(200)
 &nbsp; &nbsp; &nbsp; &nbsp; .borderRadius(21)

 &nbsp; &nbsp; &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('June 14, 2022')
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('Good Morning,\nJianGuo',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(60)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; }


 &nbsp; &nbsp; }

 &nbsp; &nbsp; &nbsp;Row({ space: 120 }) {
 &nbsp; &nbsp; &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('40°',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('TEMPERATURE',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; }.margin({ left: 60 })

 &nbsp; &nbsp; &nbsp; &nbsp;Column() {
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('59%',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Text('HUMIDITY',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; }.margin({ right: 60 })
 &nbsp; &nbsp; }.margin({ top: 20 })


 &nbsp; &nbsp; &nbsp;Row() {
 &nbsp; &nbsp; &nbsp; &nbsp;HomeDetails({})

 &nbsp; &nbsp; &nbsp; &nbsp;HomeDetails({ image: &quot;common/images/lightbull.png&quot;, isSelected: this.isSelect! })

 &nbsp; &nbsp; }

 &nbsp; &nbsp; &nbsp;Row() {


 &nbsp; &nbsp; &nbsp; &nbsp;HomeDetails({ image: &quot;common/images/opacity.png&quot; })
 &nbsp; &nbsp; &nbsp; &nbsp;HomeDetails({ image: &quot;common/images/yytem0.png&quot; })


 &nbsp; &nbsp; }

 &nbsp; &nbsp; &nbsp;Row(){
 &nbsp; &nbsp; &nbsp; Column(){
 &nbsp; &nbsp; &nbsp; &nbsp; Text('ADD',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontWeight(FontWeight.Bold)
 &nbsp; &nbsp; &nbsp; &nbsp; Text('NEW CONTROL',)
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .fontSize(40).opacity(0.4)
 &nbsp; &nbsp; &nbsp; }
 &nbsp; &nbsp; &nbsp; Blank()

 &nbsp; &nbsp; &nbsp; Image($r(&quot;app.media.add&quot;))
 &nbsp; &nbsp; &nbsp; &nbsp; .objectFit(ImageFit.Contain)
 &nbsp; &nbsp; &nbsp; &nbsp; .width(100)
 &nbsp; &nbsp; &nbsp; &nbsp; .height(100)
 &nbsp; &nbsp; &nbsp; &nbsp; .borderRadius(21).margin({right:40})

 &nbsp; &nbsp; }.border({
 &nbsp; &nbsp; &nbsp; &nbsp;color:Color.White,
 &nbsp; &nbsp; &nbsp; &nbsp;width:8,
 &nbsp; &nbsp; &nbsp; &nbsp;radius:20
 &nbsp; &nbsp; }).width(&quot;88%&quot;).height(150)

 &nbsp; }.width(&quot;100%&quot;)
 &nbsp; .height('100%').backgroundColor(&quot;#F5F5F5&quot;)
 }
}

我们可以对，下面的这块进行封装

代码如下

@Entry
@Component
export struct SettingDetails {
 &nbsp;@State &nbsp;private image: string = &quot;common/images/setting.png&quot;
 &nbsp;@State &nbsp;private title: string = &quot;Maintenance\nRequests&quot;
 &nbsp;@State private isSelected: boolean = true;

 &nbsp;build() {


 &nbsp;Column() {
 &nbsp; &nbsp;Image(this.image)
 &nbsp; &nbsp; .objectFit(ImageFit.Contain)
 &nbsp; &nbsp; .width(140)
 &nbsp; &nbsp; .height(120)
 &nbsp; &nbsp; .margin(20)
 &nbsp; &nbsp; .border({
 &nbsp; &nbsp; &nbsp; &nbsp;width: 12, color: this.isSelected ? Color.White : Color.Red,
 &nbsp; &nbsp; &nbsp; &nbsp;radius: 20
 &nbsp; &nbsp; })
 &nbsp; &nbsp; .onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp;this.isSelected = !this.isSelected;
 &nbsp; &nbsp; })
 &nbsp; &nbsp;Text(this.title).fontSize(32).width(200).textAlign(TextAlign.Center)
 }
}}

我们可以对，下面的这块进行封装

代码如下

@Entry
@Component
export struct SettingDetails {
 &nbsp;@State &nbsp;private image: string = &quot;common/images/setting.png&quot;
 &nbsp;@State &nbsp;private title: string = &quot;Maintenance\nRequests&quot;
 &nbsp;@State private isSelected: boolean = true;

 &nbsp;build() {


 &nbsp;Column() {
 &nbsp; &nbsp;Image(this.image)
 &nbsp; &nbsp; .objectFit(ImageFit.Contain)
 &nbsp; &nbsp; .width(140)
 &nbsp; &nbsp; .height(120)
 &nbsp; &nbsp; .margin(20)
 &nbsp; &nbsp; .border({
 &nbsp; &nbsp; &nbsp; &nbsp;width: 12, color: this.isSelected ? Color.White : Color.Red,
 &nbsp; &nbsp; &nbsp; &nbsp;radius: 20
 &nbsp; &nbsp; })
 &nbsp; &nbsp; .onClick(() => {
 &nbsp; &nbsp; &nbsp; &nbsp;this.isSelected = !this.isSelected;
 &nbsp; &nbsp; })
 &nbsp; &nbsp;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(&quot;app.media.add&quot;))
 .objectFit(ImageFit.Contain)
 .width(100)
 .height(100)
 .borderRadius(21).margin({right:40})

 }.border({
 color:Color.White,
 width:8,
 radius:20
 }).width(&quot;88%&quot;).height(150)