【BQ3568HM开发板】智能家居中控屏界面设计:打造便捷的家居控制体验

目录

引言

一、界面布局与组件设计

1. 整体布局

2. 温度和湿度信息展示

 3. 灯光和窗帘控制按钮

二、界面交互设计

1. 按钮点击事件

2. 按钮状态变化

三、界面样式设计

1. 文字样式

2. 按钮样式

结语


 本文首发于电子发烧友论坛:https://bbs.elecfans.com/jishu_2474863_1_1.html。

引言

在智能家居日益普及的今天,一个直观、易用的中控屏界面对于用户来说至关重要。今天,我将向大家介绍我所完成的智能家居中控屏界面设计,它旨在为用户提供便捷、高效的家居控制体验。

一、界面布局与组件设计

1. 整体布局

中控屏界面采用了简洁明了的布局,主要分为三个部分:标题栏、信息展示区和控制按钮区。

  • 标题栏:位于界面顶部,显示“智能家居中控屏”字样,突出了应用的主题。
  • 信息展示区:位于标题栏下方,用于显示当前房间的温度和湿度信息。
  • 控制按钮区:位于界面底部,包含灯光控制按钮和窗帘控制按钮,方便用户进行操作。

2. 温度和湿度信息展示

在信息展示区,我使用了两个 Text 组件来分别显示温度和湿度信息。为了使信息更加直观,我在温度和湿度文本前面添加了相应的图标,使用户一眼就能了解当前的环境状况。

Row() {
  Image($r('app.media.temperature_icon'))
    .width(30)
    .height(30)
    .margin({ right: 10 })
  Text(`温度: ${this.roomTemperature}°C`)
    .fontSize(20)
    .margin({ right: 20 })
    .fontColor('#FF0000')
  Image($r('app.media.humidity_icon'))
    .width(30)
    .height(30)
    .margin({ right: 10 })
  Text(`湿度: ${this.roomHumidity}%`)
    .fontSize(20)
    .fontColor('#00FF00')
}
.margin({ top: 20 })

 3. 灯光和窗帘控制按钮

在控制按钮区,我使用了两个 Button 组件来分别控制灯光和窗帘。为了使按钮更加美观和易用,我们将按钮类型设置为 ButtonType.Capsule,使其呈现为胶囊形状,并在按钮上添加了相应的图标和文字。

// 灯光控制按钮
Button({
  type: ButtonType.Capsule,
  stateEffect: true,
}) {
  Row() {
    Image(this.lightStatus ? $r('app.media.light_off_icon') : $r('app.media.light_on_icon'))
      .width(30)
      .height(30)
      .margin({ right: 10 })
    Text(this.lightStatus ? '关闭灯光' : '打开灯光')
      .fontSize(20)
  }
}
.width('80%')
.height(60)
.margin({ top: 20 })
.onClick(() => {
  this.lightStatus = !this.lightStatus;
  // 在这里可以添加控制灯光的逻辑
})

// 窗帘控制按钮
Button({
  type: ButtonType.Capsule,
  stateEffect: true,
}) {
  Row() {
    Image(this.curtainStatus ? $r('app.media.curtain_closed_icon') : $r('app.media.curtain_open_icon'))
      .width(30)
      .height(30)
      .margin({ right: 10 })
    Text(this.curtainStatus ? '关闭窗帘' : '打开窗帘')
      .fontSize(20)
  }
}
.width('80%')
.height(60)
.margin({ top: 20 })
.onClick(() => {
  this.curtainStatus = !this.curtainStatus;
  // 在这里可以添加控制窗帘的逻辑
})

二、界面交互设计

1. 按钮点击事件

为了实现对灯光和窗帘的控制,我们为每个按钮添加了点击事件。当用户点击按钮时,按钮的状态会发生变化,同时相应的控制逻辑会被执行。

// 灯光控制按钮点击事件
.onClick(() => {
  this.lightStatus = !this.lightStatus;
  // 在这里可以添加控制灯光的逻辑
})

// 窗帘控制按钮点击事件
.onClick(() => {
  this.curtainStatus = !this.curtainStatus;
  // 在这里可以添加控制窗帘的逻辑
})

2. 按钮状态变化

为了使用户能够直观地了解灯光和窗帘的当前状态,我们根据按钮的状态来动态改变按钮的文字和图标。例如,当灯光打开时,灯光控制按钮的文字显示为“关闭灯光”,图标显示为关闭状态的图标;当灯光关闭时,按钮的文字显示为“打开灯光”,图标显示为打开状态的图标。 

// 灯光控制按钮文字和图标
Text(this.lightStatus ? '关闭灯光' : '打开灯光')
  .fontSize(20)

Image(this.lightStatus ? $r('app.media.light_off_icon') : $r('app.media.light_on_icon'))
  .width(30)
  .height(30)
  .margin({ right: 10 })

// 窗帘控制按钮文字和图标
Text(this.curtainStatus ? '关闭窗帘' : '打开窗帘')
  .fontSize(20)

Image(this.curtainStatus ? $r('app.media.curtain_closed_icon') : $r('app.media.curtain_open_icon'))
  .width(30)
  .height(30)
  .margin({ right: 10 })

三、界面样式设计

1. 文字样式

为了使界面更加美观和易读,我们对文字的样式进行了设置。标题栏的文字使用了较大的字体和加粗的样式,突出了应用的主题;温度和湿度信息的文字使用了适中的字体和不同的颜色,以便用户能够快速区分;按钮上的文字使用了适中的字体和白色的颜色,与按钮的背景颜色形成鲜明的对比。 

// 标题栏文字样式
Text('智能家居中控屏')
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .margin({ top: 20 })

// 温度和湿度信息文字样式
Text(`温度: ${this.roomTemperature}°C`)
  .fontSize(20)
  .margin({ right: 20 })
  .fontColor('#FF0000')

Text(`湿度: ${this.roomHumidity}%`)
  .fontSize(20)
  .fontColor('#00FF00')

// 按钮文字样式
Text(this.lightStatus ? '关闭灯光' : '打开灯光')
  .fontSize(20)
  .fontColor('#FFFFFF')

Text(this.curtainStatus ? '关闭窗帘' : '打开窗帘')
  .fontSize(20)
  .fontColor('#FFFFFF')

2. 按钮样式

为了使按钮更加美观和易用,我们对按钮的样式进行了设置。按钮的类型设置为 ButtonType.Capsule,使其呈现为胶囊形状;按钮的背景颜色根据按钮的状态动态变化,以便用户能够直观地了解当前的控制状态;按钮的文字颜色设置为白色,与按钮的背景颜色形成鲜明的对比。 

// 灯光控制按钮样式
Button({
  type: ButtonType.Capsule,
  stateEffect: true,
}) {
  Row() {
    Image(this.lightStatus ? $r('app.media.light_off_icon') : $r('app.media.light_on_icon'))
      .width(30)
      .height(30)
      .margin({ right: 10 })
    Text(this.lightStatus ? '关闭灯光' : '打开灯光')
      .fontSize(20)
  }
}
.width('80%')
.height(60)
.margin({ top: 20 })

// 窗帘控制按钮样式
Button({
  type: ButtonType.Capsule,
  stateEffect: true,
}) {
  Row() {
    Image(this.curtainStatus ? $r('app.media.curtain_closed_icon') : $r('app.media.curtain_open_icon'))
      .width(30)
      .height(30)
      .margin({ right: 10 })
    Text(this.curtainStatus ? '关闭窗帘' : '打开窗帘')
      .fontSize(20)
  }
}
.width('80%')
.height(60)
.margin({ top: 20 })

结语

下面是显示的预览效果:

 OpenHarmony使用的ArkTs语言实现用户界面是非常容易的,特别是在MarsCode插件的加持下。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神一样的老师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值