SwiftUI-Preview帶有Binding參數的View

閱讀時間約 4 分鐘

在寫SwiftUI view的時候,碰到一個瓶頸(? 帶有Binding的參數要如何preview。
舉例來說有個右邊圖片左邊文字的View,給他一個@Binding var isActive: Bool的狀態,當active時圖片要跟著改變:

struct RightImageView: View {
@State var activeIcon: String
@State var originalIcon: String
@State var title: String
@Binding var isActive: Bool
var body: some View {
HStack {
Image(systemName: isActive ? activeIcon : originalIcon)
Text(title)
}.font(.system(size: 14.0))
.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
.padding([.all], 10.0)
.background(Color.blue)
}
}

isActive = false

raw-image



isActive = true

raw-image


單獨Preview時,Binding參數要怎麼填??????

出現錯誤

出現錯誤


Xcode14我是做一個@State private參數填進preview裡

struct RightImageView_Previews: PreviewProvider {
@State private static var isActive = false
static var previews: some View {
RightImageView(activeIcon: "arrow.up", originalIcon: "arrow.down", title: "456", isActive: $isActive)
}
}


Xcode15 preview的預設變成macro

沒辦法再寫@State private var🫨

#Preview {
// your view​
}


後來查到一個比較好的作法

StatefulPreviewWrapper

struct StatefulPreviewWrapper<Value, Content: View>: View {
@State var value: Value
var content: (Binding<Value>) -> Content
var body: some View {
content($value)
}
init(_ value: Value, content: @escaping (Binding<Value>) -> Content) {
self._value = State(wrappedValue: value)
self.content = content
}
}


用法

#Preview {
StatefulPreviewWrapper(false) { isActive in
RightImageView(activeIcon: "arrow.up", originalIcon: "arrow.down", title: "456", isActive: isActive)
}
}


不過只能塞一個Binding參數,如果有好幾個要在自己擴寫


參考資料:

https://developer.apple.com/forums/thread/118589



avatar-img
6會員
35內容數
紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Michelle Chen的沙龍 的其他內容
雖然我之前文章大力讚美SwiftUI的tabView有多好用,無奈專案大部分都是UIKit啊~~~~要在既有專案用Tab架構只能用UITabBarController了 設計這次還出了一個超複雜的UI,陰影+圓角+客製化高度 大套餐 馬上開始吧。 圓角+陰影 重點就是subclass一個
Sandbox 架構 /Documents:主要用於儲存用戶生成的數據或者不能重新創建的數據。這些可能包括由你的應用程式創建的文件、從服務器下載的文件、用戶在應用程式中創建或修改的數據等。 這些數據在應用程式的生命週期中是持久保存的,即使應用程式被終止或者系統重啟,這些數據也會保留。此外
SwiftUI的TabView實在太好用啦!我要大大的推廣他ლ(╹◡╹ლ) 換頁+小圓點滑動 無限自動輪播 底部Tabbar
這個浮誇標題是ChatGPT幫我想的😊 圖也是DALL幫我產的, AI萬歲! GCD也是面試必問題啊!我答超爛的,只會用背景呼叫API+切Main Thread更新畫面,今天就來認真了解。 GCD是什麼? 先來問ChatGPT什麼是GCD? GCD,全名 Grand Central Dis
字數算法 = string.count? 在swift算一個string的字數時候,很直覺的會想到用.count來算 let s = "這是幾個字呢".count print(s.count) // 6 毫無疑問的安心信賴6個字 表情符號的場合 let emoji = "😂" print
Xcode15的 @escaping closure裡解包後的[weak self]不必再寫 self了!! 用一個範例class Test來實驗,裡面只有一個變數a跟一個testClosure回"test",再用callTestClosure把變數a改成"test" 編譯正常!變數a成功被改成
雖然我之前文章大力讚美SwiftUI的tabView有多好用,無奈專案大部分都是UIKit啊~~~~要在既有專案用Tab架構只能用UITabBarController了 設計這次還出了一個超複雜的UI,陰影+圓角+客製化高度 大套餐 馬上開始吧。 圓角+陰影 重點就是subclass一個
Sandbox 架構 /Documents:主要用於儲存用戶生成的數據或者不能重新創建的數據。這些可能包括由你的應用程式創建的文件、從服務器下載的文件、用戶在應用程式中創建或修改的數據等。 這些數據在應用程式的生命週期中是持久保存的,即使應用程式被終止或者系統重啟,這些數據也會保留。此外
SwiftUI的TabView實在太好用啦!我要大大的推廣他ლ(╹◡╹ლ) 換頁+小圓點滑動 無限自動輪播 底部Tabbar
這個浮誇標題是ChatGPT幫我想的😊 圖也是DALL幫我產的, AI萬歲! GCD也是面試必問題啊!我答超爛的,只會用背景呼叫API+切Main Thread更新畫面,今天就來認真了解。 GCD是什麼? 先來問ChatGPT什麼是GCD? GCD,全名 Grand Central Dis
字數算法 = string.count? 在swift算一個string的字數時候,很直覺的會想到用.count來算 let s = "這是幾個字呢".count print(s.count) // 6 毫無疑問的安心信賴6個字 表情符號的場合 let emoji = "😂" print
Xcode15的 @escaping closure裡解包後的[weak self]不必再寫 self了!! 用一個範例class Test來實驗,裡面只有一個變數a跟一個testClosure回"test",再用callTestClosure把變數a改成"test" 編譯正常!變數a成功被改成
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
該服務透過記錄在AWS控制台上執行的操作並產生範例程式碼來實現 Infrastructure as Code (IaC) 目前僅在 us-east-1 的 EC2 控制台上可用 支援的格式: CDK(Java) CDK(Python) CDK(TypeScript) CloudFor
1.Fed 9月不會升息,但是,會發出嚴厲的tone調。會給市場2023年得再加息一次並且拉高未來降息門檻的訊號。但是,最終,除非通膨大幅度增溫或者是美國經濟顯著加速,Fed是不會真的這樣做。 2.點陣圖應該中位數依舊在2023年還需要升息一次,但是,近半數的投票者應該依舊會是投不升息。 3.點
Thumbnail
【給只想知道大概劇情的人】 曾是連續殺人犯的金秉洙停止犯案後低調生活,獨自扶養女兒長大,原本以為會在無人知曉罪孽的狀況下平靜過完一生,卻被診斷出阿茲海默症與血管型失智症,記憶逐漸消失的他似乎只剩下殺人的身體記憶,偏偏小鎮上又開始有年輕女性接連被殺害,兇手是他感應到的那個同類,還是──根本就是他自己
Thumbnail
在這個瞬息萬變的世界裡,才子佳人的出現總是讓人眼前一亮。古人曾言:「江山代有才人出,各領風騷數百年」,這句話表達了一代又一代的傑出人才不斷脫穎而出,各自獨領風騷,成為歷史的佼佼者。 🌟 無論是文學、藝術、科學還是商業,每個領域都有他們的風采。在這浩瀚的江山裡,才子佳人們用自己的才華和智慧,塑造了各
Thumbnail
他是一位很特別的英文老師。雖然平常教課都快忙不過來了,但他有著自己的堅持,有些事情,他一定會去完成。
Thumbnail
單純以年齡來看,確實有世代之分,然而,每位詩人起步的時間點不同,年紀高低未必與詩齡長短正相關,再者,新世代的時代語言或許與前一代有些差異,但終究生活在相近的時間點,老將在持續筆耕的同時,也會自我要求創新及突破,因此世代之間很難找到明確的歧異點。
Thumbnail
他的祕訣就是大量閱讀、大量學習,隨時更新自己的資料庫,腦袋裡永遠都是滿滿的乾貨。因為抽屜裡什麼都有,所以他從沒在怕的,任何場子他都能罩得住。
Thumbnail
在這說的不是別的,我指的就是自殺,因為作家自殺跟一般自殺不大一樣,我一定要先提出來。 是這樣的,我熱愛寫作,也深信寫作可以是絕佳的療癒措施,能夠透過寫作抒發心智是很幸福的一件事情(當然創作不見得只有寫作,任何藝術創作都可以)。 但作家自殺則是另一回事。 甚至可以嘗試去修復這段關係。 因為上帝愛你。
Thumbnail
這天和朋友聊起養寵物的心得,他養了一隻狗和兩隻貓,我正在請教他要怎麼開始養寵物,因為我是連一隻蠶寶寶都沒養過的人。我是相當喜歡動物的,只不過沒有養他們衝動,近幾年還有返老還童的跡象,很喜歡到動物園遊蕩,只要看著動物就感到無限療癒。但人到了一個年紀好像得養個什麼,養房養兒養花養草之類的。  
Thumbnail
pictogram(中文:象形符號,亦稱象形圖、形圖或象形文字),是既有象形畫義又有定義且能依定義作文的符號- From 維基百科 每到一個新的國家時,我很喜歡收集這些pictogram,它們代表的不只是圖像上的意思,更深的含意是表現當下環境生活的方式,也會在緊急時救自己一命。 細看韓國首爾的這些
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
該服務透過記錄在AWS控制台上執行的操作並產生範例程式碼來實現 Infrastructure as Code (IaC) 目前僅在 us-east-1 的 EC2 控制台上可用 支援的格式: CDK(Java) CDK(Python) CDK(TypeScript) CloudFor
1.Fed 9月不會升息,但是,會發出嚴厲的tone調。會給市場2023年得再加息一次並且拉高未來降息門檻的訊號。但是,最終,除非通膨大幅度增溫或者是美國經濟顯著加速,Fed是不會真的這樣做。 2.點陣圖應該中位數依舊在2023年還需要升息一次,但是,近半數的投票者應該依舊會是投不升息。 3.點
Thumbnail
【給只想知道大概劇情的人】 曾是連續殺人犯的金秉洙停止犯案後低調生活,獨自扶養女兒長大,原本以為會在無人知曉罪孽的狀況下平靜過完一生,卻被診斷出阿茲海默症與血管型失智症,記憶逐漸消失的他似乎只剩下殺人的身體記憶,偏偏小鎮上又開始有年輕女性接連被殺害,兇手是他感應到的那個同類,還是──根本就是他自己
Thumbnail
在這個瞬息萬變的世界裡,才子佳人的出現總是讓人眼前一亮。古人曾言:「江山代有才人出,各領風騷數百年」,這句話表達了一代又一代的傑出人才不斷脫穎而出,各自獨領風騷,成為歷史的佼佼者。 🌟 無論是文學、藝術、科學還是商業,每個領域都有他們的風采。在這浩瀚的江山裡,才子佳人們用自己的才華和智慧,塑造了各
Thumbnail
他是一位很特別的英文老師。雖然平常教課都快忙不過來了,但他有著自己的堅持,有些事情,他一定會去完成。
Thumbnail
單純以年齡來看,確實有世代之分,然而,每位詩人起步的時間點不同,年紀高低未必與詩齡長短正相關,再者,新世代的時代語言或許與前一代有些差異,但終究生活在相近的時間點,老將在持續筆耕的同時,也會自我要求創新及突破,因此世代之間很難找到明確的歧異點。
Thumbnail
他的祕訣就是大量閱讀、大量學習,隨時更新自己的資料庫,腦袋裡永遠都是滿滿的乾貨。因為抽屜裡什麼都有,所以他從沒在怕的,任何場子他都能罩得住。
Thumbnail
在這說的不是別的,我指的就是自殺,因為作家自殺跟一般自殺不大一樣,我一定要先提出來。 是這樣的,我熱愛寫作,也深信寫作可以是絕佳的療癒措施,能夠透過寫作抒發心智是很幸福的一件事情(當然創作不見得只有寫作,任何藝術創作都可以)。 但作家自殺則是另一回事。 甚至可以嘗試去修復這段關係。 因為上帝愛你。
Thumbnail
這天和朋友聊起養寵物的心得,他養了一隻狗和兩隻貓,我正在請教他要怎麼開始養寵物,因為我是連一隻蠶寶寶都沒養過的人。我是相當喜歡動物的,只不過沒有養他們衝動,近幾年還有返老還童的跡象,很喜歡到動物園遊蕩,只要看著動物就感到無限療癒。但人到了一個年紀好像得養個什麼,養房養兒養花養草之類的。  
Thumbnail
pictogram(中文:象形符號,亦稱象形圖、形圖或象形文字),是既有象形畫義又有定義且能依定義作文的符號- From 維基百科 每到一個新的國家時,我很喜歡收集這些pictogram,它們代表的不只是圖像上的意思,更深的含意是表現當下環境生活的方式,也會在緊急時救自己一命。 細看韓國首爾的這些