SwiftUI智能傢居開關燈頁面搭建示例

Posted on by

項目背景

晚上臨睡前看著頭頂上的臥室燈，圓圓的，點擊開燈亮起，再點擊關燈熄滅，以此反復。

突然大腦裡有瞭一個無聊的靈感，幹脆做一個開關燈的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文字設置文字內容為臥室燈，使用font和system修飾符設置文字字號，使用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智能傢居開關燈頁面的資料請關註WalkonNet其它相關文章！

推薦閱讀：