SwiftUI智能家居開關(guān)燈頁面搭建示例

更新時(shí)間：2022年08月03日 10:07:26 作者：文如秋雨

這篇文章主要為大家介紹了SwiftUI智能家居開關(guān)燈頁面搭建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

項(xiàng)目背景

晚上臨睡前看著頭頂上的臥室燈，圓圓的，點(diǎn)擊開燈亮起，再點(diǎn)擊關(guān)燈熄滅，以此反復(fù)。

突然大腦里有了一個(gè)無聊的靈感，干脆做一個(gè)開關(guān)燈的App，可以打發(fā)無聊的時(shí)間。

說干就干。

項(xiàng)目搭建

首先，創(chuàng)建一個(gè)新的SwiftUI項(xiàng)目，命名為SmartLight。

背景卡片

首先是背景部分，我們可以使用Rectangle矩形作為背景卡片的設(shè)計(jì)元素，示例：

// 背景卡片
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()
}

上述代碼中，我們創(chuàng)建了一個(gè)bgCard視圖。

我們給Rectangle矩形增加了背景顏色foregroundColor修飾符，使用frame尺寸修飾符設(shè)置了矩形的大小，使用cornerRadius修飾符設(shè)置了矩形的圓角，使用shadow修飾符設(shè)置了矩形的陰影，最后使用了padding給矩形加了邊距。

頁面標(biāo)題

然后是頁面標(biāo)題部分，我們可以使用Text文字作為頁面標(biāo)題，示例：

// 標(biāo)題
func titleView() -> some View {
    Text("臥室燈")
        .font(.system(size: 17))
        .fontWeight(.bold)
        .padding(.top, 40)
        .foregroundColor(.white)
}

上述代碼中，我們創(chuàng)建了一個(gè)titleView視圖。

我們給Text文字設(shè)置文字內(nèi)容為臥室燈，使用font和system修飾符設(shè)置文字字號(hào)，使用fontWeight修飾符讓文字加粗，使用padding邊距修飾符讓文字距離上邊距40，使用foregroundColor修飾符設(shè)置文字顏色為白色。

燈視圖

對于燈視圖，由于我們的燈有開啟和關(guān)閉兩種狀態(tài)，因此我們首先需要聲明一個(gè)變量來存儲(chǔ)這個(gè)狀態(tài)，示例：

@State var isOpen: Bool = false

然后我們可以使用Circle來構(gòu)建燈的樣式，示例：

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

上述代碼中，我們創(chuàng)建了一個(gè)lightView視圖。

我們使用Circle創(chuàng)建了一個(gè)圓，然后使用stroke修飾符給這個(gè)圓設(shè)置了邊框顏色和邊框?qū)挾龋鶕?jù)isOpen的狀態(tài)使用opacity設(shè)置透明度，使用frame修飾符設(shè)置了燈的大小，使用shadow修飾符設(shè)置了燈的陰影顏色和陰影面積。

這里我們根據(jù)isOpen的狀態(tài)和透明度、陰影修飾符的作用，構(gòu)建了開燈時(shí)的樣式及關(guān)閉時(shí)的樣式。

開關(guān)按鈕

然后是開關(guān)按鈕，我們使用Image圖片和Text文字作為開關(guān)燈的操作按鈕和標(biāo)識(shí)文字，示例：

// 開關(guān)
func switchBtn() -> some View {
    VStack(spacing: 20) {
        Image(systemName: "power")
            .foregroundColor(isOpen ? .white : .black)
            .font(.system(size: 32))
            .onTapGesture {
                self.isOpen.toggle()
            }
        Text(isOpen ? "點(diǎn)擊關(guān)燈" : "點(diǎn)擊開燈")
            .font(.system(size: 17))
            .fontWeight(.bold)
            .foregroundColor(isOpen ? .white : .black)
    }.padding(.bottom, 80)
}

上述代碼中，我們創(chuàng)建了一個(gè)switchBtn視圖。

我們使用VStack垂直排布的方式布置操作按鈕和文字，操作按鈕部分，我們使用Image構(gòu)建按鈕，使用Apple提供的系統(tǒng)圖標(biāo)。

根據(jù)isOpen的狀態(tài)使用foregroundColor修飾符設(shè)置按鈕顏色，開啟時(shí)為白色，關(guān)閉時(shí)為黑色。使用font修飾符設(shè)置按鈕大小，使用onTapGesture修飾符給圖標(biāo)添加點(diǎn)擊的交互動(dòng)作，當(dāng)點(diǎn)擊圖標(biāo)時(shí)，isOpen的狀態(tài)被切換。

文字部分就有個(gè)小邏輯，即當(dāng)isOpen開啟的時(shí)候，文字應(yīng)該提示“點(diǎn)擊關(guān)燈”，而當(dāng)isOpen處于關(guān)閉狀態(tài)時(shí)，文字提示“點(diǎn)擊開燈”。

整體布局

最后我們在body視圖中進(jìn)行所有視圖的布局，示例：

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

項(xiàng)目展示

本章代碼

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()
    }
    // 標(biāo)題
    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)
    }
    // 開關(guān)
    func switchBtn() -> some View {
        VStack(spacing: 20) {
            Image(systemName: "power")
                .foregroundColor(isOpen ? .white : .black)
                .font(.system(size: 32))
                .onTapGesture {
                    self.isOpen.toggle()
                }
            Text(isOpen ? "點(diǎn)擊關(guān)燈" : "點(diǎn)擊開燈")
                .font(.system(size: 17))
                .fontWeight(.bold)
                .foregroundColor(isOpen ? .white : .black)
        }.padding(.bottom, 80)
    }
}

恭喜你，完成了整個(gè)項(xiàng)目的全部內(nèi)容！

以上就是SwiftUI智能家居開關(guān)燈頁面搭建示例的詳細(xì)內(nèi)容，更多關(guān)于SwiftUI智能家居開關(guān)燈頁面的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: