您好,登錄后才能下訂單哦!
這篇文章主要介紹“SwiftUI智能家居開關(guān)燈頁面如何搭建”,在日常操作中,相信很多人在SwiftUI智能家居開關(guān)燈頁面如何搭建問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”SwiftUI智能家居開關(guān)燈頁面如何搭建”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
首先,創(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)題部分,我們可以使用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è)置文字顏色為白色。
對(duì)于燈視圖,由于我們的燈有開啟和關(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)按鈕,我們使用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)擊開燈”。
最后我們?cè)?code>body視圖中進(jìn)行所有視圖的布局,示例:
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() } // 標(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) } }
到此,關(guān)于“SwiftUI智能家居開關(guān)燈頁面如何搭建”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。