// 背景卡片
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)建了一個bgCard視圖。

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

頁面標題

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

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

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

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

燈視圖

對于燈視圖，由于我們的燈有開啟和關(guān)閉兩種狀態(tài)，因此我們首先需要聲明一個變量來存儲這個狀態(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)建了一個lightView視圖。

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

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

開關(guān)按鈕

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

// 開關(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 ? "點擊關(guān)燈" : "點擊開燈")
            .font(.system(size: 17))
            .fontWeight(.bold)
            .foregroundColor(isOpen ? .white : .black)
    }.padding(.bottom, 80)
}

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

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

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

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

整體布局

最后我們在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)
    }
    // 開關(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 ? "點擊關(guān)燈" : "點擊開燈")
                .font(.system(size: 17))
                .fontWeight(.bold)
                .foregroundColor(isOpen ? .white : .black)
        }.padding(.bottom, 80)
    }
}

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

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

您可能感興趣的文章: