SwiftUI智能家居开关灯页面搭建示例

目录
  • 项目背景
  • 项目搭建
  • 背景卡片
  • 页面标题
  • 灯视图
  • 开关按钮
  • 整体布局
  • 项目展示
  • 本章代码

项目背景

晚上临睡前看着头顶上的卧室灯,圆圆的,点击开灯亮起,再点击关灯熄灭,以此反复。

突然大脑里有了一个无聊的灵感,干脆做一个开关灯的App,可以打发无聊的时间。

说干就干。

项目搭建

首先,创建一个新的SwiftUI项目,命名为SmartLight

背景卡片

首先是背景部分,我们可以使用Rectangle矩形作为背景卡片的设计元素,示例:

// 背景卡片
func bgCard() -> some View {
    Rectangle()
        .foregroundColor(Color(red: 88 / 255, green: 132 / 255, blue: 234 / 255))
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .cornerRadius(16)
        .shadow(radius: 2)
        .padding()
}

上述代码中,我们创建了一个bgCard视图。

我们给Rectangle矩形增加了背景颜色foregroundColor修饰符,使用frame尺寸修饰符设置了矩形的大小,使用cornerRadius修饰符设置了矩形的圆角,使用shadow修饰符设置了矩形的阴影,最后使用了padding给矩形加了边距。

页面标题

然后是页面标题部分,我们可以使用Text文字作为页面标题,示例:

// 标题
func titleView() -> some View {
    Text("卧室灯")
        .font(.system(size: 17))
        .fontWeight(.bold)
        .padding(.top, 40)
        .foregroundColor(.white)
}

上述代码中,我们创建了一个titleView视图。

我们给Text文字设置文字内容为卧室灯,使用fontsystem修饰符设置文字字号,使用fontWeight修饰符让文字加粗,使用padding边距修饰符让文字距离上边距40,使用foregroundColor修饰符设置文字颜色为白色。

灯视图

对于灯视图,由于我们的灯有开启和关闭两种状态,因此我们首先需要声明一个变量来存储这个状态,示例:

@State var isOpen: Bool = false

然后我们可以使用Circle来构建灯的样式,示例:

// 灯
func lightView() -> some View {
    Circle()
        .stroke(Color(.systemGray6), lineWidth: 80)
        .opacity(isOpen ? 0.9 : 0.5)
        .frame(width: 20, height: 20, alignment: .center)
        .shadow(color: .white, radius: isOpen ? 30 : 0, x: 0, y: 0)
}

上述代码中,我们创建了一个lightView视图。

我们使用Circle创建了一个圆,然后使用stroke修饰符给这个圆设置了边框颜色和边框宽度,根据isOpen的状态使用opacity设置透明度,使用frame修饰符设置了灯的大小,使用shadow修饰符设置了灯的阴影颜色和阴影面积。

这里我们根据isOpen的状态和透明度、阴影修饰符的作用,构建了开灯时的样式及关闭时的样式。

开关按钮

然后是开关按钮,我们使用Image图片和Text文字作为开关灯的操作按钮和标识文字,示例:

// 开关
func switchBtn() -> some View {
    VStack(spacing: 20) {
        Image(systemName: "power")
            .foregroundColor(isOpen ? .white : .black)
            .font(.system(size: 32))
            .onTapGesture {
                self.isOpen.toggle()
            }
        Text(isOpen ? "点击关灯" : "点击开灯")
            .font(.system(size: 17))
            .fontWeight(.bold)
            .foregroundColor(isOpen ? .white : .black)
    }.padding(.bottom, 80)
}

上述代码中,我们创建了一个switchBtn视图。

我们使用VStack垂直排布的方式布置操作按钮和文字,操作按钮部分,我们使用Image构建按钮,使用Apple提供的系统图标。

根据isOpen的状态使用foregroundColor修饰符设置按钮颜色,开启时为白色,关闭时为黑色。使用font修饰符设置按钮大小,使用onTapGesture修饰符给图标添加点击的交互动作,当点击图标时,isOpen的状态被切换。

文字部分就有个小逻辑,即当isOpen开启的时候,文字应该提示“点击关灯”,而当isOpen处于关闭状态时,文字提示“点击开灯”。

整体布局

最后我们在body视图中进行所有视图的布局,示例:

var body: some View {
    ZStack {
        bgCard()
        VStack {
            titleView()
            Spacer()
            lightView()
            Spacer()
            Spacer()
            switchBtn()
        }
    }
}

项目展示

本章代码

import SwiftUI
struct ContentView: View {
    @State var isOpen: Bool = false
    var body: some View {
        ZStack {
            bgCard()
            VStack {
                titleView()
                Spacer()
                lightView()
                Spacer()
                Spacer()
                switchBtn()
            }
        }
    }
    // 背景卡片
    func bgCard() -> some View {
        Rectangle()
            .foregroundColor(Color(red: 88 / 255, green: 132 / 255, blue: 234 / 255))
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .cornerRadius(16)
            .shadow(radius: 2)
            .padding()
    }
    // 标题
    func titleView() -> some View {
        Text("卧室灯")
            .font(.system(size: 17))
            .fontWeight(.bold)
            .padding(.top, 40)
            .foregroundColor(.white)
    }
    // 灯
    func lightView() -> some View {
        Circle()
            .stroke(Color(.systemGray6), lineWidth: 80)
            .opacity(isOpen ? 0.9 : 0.5)
            .frame(width: 20, height: 20, alignment: .center)
            .shadow(color: .white, radius: isOpen ? 30 : 0, x: 0, y: 0)
    }
    // 开关
    func switchBtn() -> some View {
        VStack(spacing: 20) {
            Image(systemName: "power")
                .foregroundColor(isOpen ? .white : .black)
                .font(.system(size: 32))
                .onTapGesture {
                    self.isOpen.toggle()
                }
            Text(isOpen ? "点击关灯" : "点击开灯")
                .font(.system(size: 17))
                .fontWeight(.bold)
                .foregroundColor(isOpen ? .white : .black)
        }.padding(.bottom, 80)
    }
}

恭喜你,完成了整个项目的全部内容!

以上就是SwiftUI智能家居开关灯页面搭建示例的详细内容,更多关于SwiftUI智能家居开关灯页面的资料请关注我们其它相关文章!

(0)

相关推荐

  • 用SwiftUI实现3D Scroll滚动效果的实现代码

    本文介绍了用SwiftUI实现3D Scroll效果的实现代码,分享给大家,具体如下: 我们预览下今天要实现的 3D scroll 效果.学完本教程后,你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图.下面我们来开始本教程的学习. 入门 首先,创建一个新的 SwiftUI 视图.为了举例说明,在这个新视图中,我会展示一个有各种颜色的矩形列表,并把新视图命名为 ColorList . import SwiftUI struct ColorList: View {

  • SwiftUI使用Paths和AnimatableData实现酷炫的颜色切换动画

    老铁们,是时候燥起来了!本文中我们将学习如何使用 SwiftUI 中的 Paths 和 AnimatableData 来制作颜色切换动画. 这些快速切换的动画是怎么实现的呢?让我们来看下文吧! 基础 要实现动画的关键是在 SwiftUI 中创建一个实现 Shape 协议的结构体.我们把它命名为 SplashShape .在 Shape 协议中,有一个方法叫做 path(in rect: CGRect) -> Path ,这个方法可以用来设置图形的外观.我们就用这个方法来实现本文中的各种动画. 创

  • SwiftUI图片缩放、拼图等处理教程

    目录 前言 1.图片缩放 2.图片拼图 3.图片操作方法 4.示例代码 5.结尾 前言 采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取. 1.图片缩放 完全填充,变形压缩 将图像居中缩放截取 等比缩放 上面三个效果,放一起比较好对比,如下 原图 - 完全填充,变形压缩 - 居中缩放截取 - 等比缩放 第1张为原图 第2张为完全填充,变形压缩 第3张为图像居中缩放截取 第4张为等

  • SwiftUI学习之state和Binding的区别浅析

    @state 绑定值的状态,其属性的修饰官方推荐使用private.上代码(ps:这里没用private 进行修饰,是为了演示区别) import SwiftUI struct FilterView: View { // @Binding var isFavorite: Bool @State var isFavorite = true var body: some View { Toggle(isOn: $isFavorite) { } let buttonTitle = isFavorite

  • 如何利用SwiftUI实现可缩放的图片预览器

    目录 前言 实现过程 程序的初步构想 显示 UIImage 双击缩放 放大手势缩放 预览任意 View 将 UIImage 从 LBJImagePreviewer 剥离 源码 总结 前言 在开发中,我们经常会遇到点击图片查看大图的需求.在 Apple 的推动下,iOS 开发必定会从 UIKit 慢慢向 SwiftUI 转变.为了更好地适应这一趋势,今天我们用 SwiftUI 实现一个可缩放的图片预览器. 实现过程 程序的初步构想 要做一个程序,首先肯定是给它起个名字.既然是图片预览器(Image

  • SwiftUI中TabView组件的常规使用

    目录 前言 TabView常规用法1 TabView常规用法2 TabView常规用法3 TabView常规用法4---做轮播图 总结 前言 在UIKit中设置多个tabbar展示需要使用到UITabBarController 在SwiftUI中 由TabView组件来进行实现,同时TabView也可以实现PageViewController的效果, TabView常规用法1 import SwiftUI struct ZTMinePageView: View { var body: some

  • SwiftUI智能家居开关灯页面搭建示例

    目录 项目背景 项目搭建 背景卡片 页面标题 灯视图 开关按钮 整体布局 项目展示 本章代码 项目背景 晚上临睡前看着头顶上的卧室灯,圆圆的,点击开灯亮起,再点击关灯熄灭,以此反复. 突然大脑里有了一个无聊的灵感,干脆做一个开关灯的App,可以打发无聊的时间. 说干就干. 项目搭建 首先,创建一个新的SwiftUI项目,命名为SmartLight. 背景卡片 首先是背景部分,我们可以使用Rectangle矩形作为背景卡片的设计元素,示例: // 背景卡片 func bgCard() -> som

  • vue 多入口文件搭建 vue多页面搭建的实例讲解

    红色为更改后的不同之处 vue 多入口文件搭建 在webpack.base.conf 中修改 var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname,'../') var glob = require('glob'); var entries = getEntry('./src/modul

  • Java +Tomcat + SpringMVC实现页面访问示例解析

    window7下Java环境安装记录:  一.安装Tomcat 1.下载tomcat 7.0,解压,无需安装,放置到目录:D:\apache-tomcat-7.0.90. 2.配置系统环境变量,CATALINA_BASE=D:\apache-tomcat-7.0.90,CATALINA_HOME=D:\apache-tomcat-7.0.90,在Path中新增"%CATALINA_HOME%\lib;%CATALINA_HOME%\bin"的环境变量. 3.进入D:\apache-to

  • springboot+rabbitmq实现智能家居实例详解

    目录 引言 一.什么是 MQTT协议? 二.为什么要用 MQTT协议? 三.MQTT协议介绍 MQTT数据包 1.固定头 2.可变头 3.消息体payload 消息质量(QoS ) 1.Qos 0 2.Qos 1 3.Qos 2 LWT(最后遗嘱) 四.MQTT协议应用场景 五.代码实现 1.启用 rabbitmq的mqtt协议 2.mqtt 客户端依赖包 3.消息发送者 4.消息订阅 六.测试消息 1.测试消息发送 2.测试消息订阅 七.应用注意事项 clientId 要唯一 八.其他中间件

  • PHP防止刷新重复提交页面的示例代码

    PHP防止刷新重复提交页面的示例代码 作为phper,我们在开发和学习php过程中,难免要经常的接受处理表单数据,然而处理表单的时候总会有一个问题,困扰大家,刷新页面重复提交的问题.如何防止刷新页面重复提交呢? PHP防止刷新重复提交,通过不断刷新(Refresh or Reload)表单提交页面,可以重复提交表单内容,可以利用 PHP 的 Session 来避免这一点,Session 保存在服务器端,在 PHP 过程中改变 Session 变量的值后,即保存在服务器端,下次访问这个变量时,得到

  • jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta

  • vue router 跳转时打开新页面的示例方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

  • Vue模拟数据,实现路由进入商品详情页面的示例

    一.路由 首先需要配置路由,就是点击good组件进入goodDetail组件 配置路由如下 { path: '/goodDetail', component:goodDetail } 同时在good组件中写入如下点击事件,路由中加入查询参数,也就是商品的id //点击路由到商品详细信息页 selectGood(){ router.push({ path: 'goodDetail', query:{goodId:this.goodDetail.id}}) } 二.在goodDetail组件中接收路

  • vue项目初始化到登录login页面的示例

    如下所示: export default new Router({ routes: [ { path: '/', redirect:'/login', }, { path: '/login', alias:'/accounts/login', name: '登录', component: () => import('@/views/accounts/login') } ] `` 嗯 就这样写就可以啦 我向来都是简单粗暴~~ 以上这篇vue项目初始化到登录login页面的示例就是小编分享给大家的全

  • Centos7.3 RabbitMQ分布式集群搭建示例

    本文介绍了Centos7.3 RabbitMQ分布式集群搭建示例,分享给大家,具体如下: 注意事项 centos 7.x 关闭firewall 三台机器: 172.17.250.97 rabbiMQ01 172.17.250.98 rabbiMQ03 172.17.250.99 rabbiMQ02 配置 hosts 172.17.250.97 fz-rabbitMQ01 172.17.250.99 fz-rabbitMQ02 172.17.250.98 fz-rabbitMQ03 $ syste

随机推荐