[譯]理解 SwiftUI 里的屬性裝飾器@State, @Binding, @ObservedObject, @EnvironmentObject

@State

通過使用 @State 修飾器我們可以關(guān)聯(lián)出 View 的狀態(tài). SwiftUI 將會把使用過 @State修飾器的屬性存儲到一個特殊的內(nèi)存區(qū)域双戳,并且這個區(qū)域和 View struct 是隔離的. 當(dāng) @State裝飾過的屬性發(fā)生了變化虹蒋,SwiftUI 會根據(jù)新的屬性值重新創(chuàng)建視圖

@Binding

有時候我們會把一個視圖的屬性傳至子節(jié)點中,但是又不能直接的傳遞給子節(jié)點飒货,因為在 Swift 中值的傳遞形式是值類型傳遞方式魄衅,也就是傳遞給子節(jié)點的是一個拷貝過的值。但是通過 @Binding 修飾器修飾后塘辅,屬性變成了一個引用類型晃虫,傳遞變成了引用傳遞,這樣父子視圖的狀態(tài)就能關(guān)聯(lián)起來了扣墩。
struct ContentView: View{

? ? @State private var num:Int = 0;?

? ? var body: some View{

? ? ? ? VStack{

? ? ? ? ? ? Button("數(shù)字+1:\(num)")

? ? ? ? ? ? {

? ? ? ? ? ? ? ? self.num += 1;

? ? ? ? ? ? }

? ? ? ? ? ? SubView(subCounter:$num)

? ? ? ? }

? ? }

}

struct SubView: View{

? ? @Binding var subCounter:Int

? ? var body: some View{

? ? ? ? VStack{

? ? ? ? ? ? Text("計數(shù):\(subCounter)")

? ? ? ? ? ? Button("數(shù)字加一:\(subCounter)")

? ? ? ? ? ? {

? ? ? ? ? ? ? ? self.subCounter += 1;

? ? ? ? ? ? }

? ? ? ? }

? ? }

}

@ObservedObject

@ObservedObject 的用處和 @State 非常相似哲银,從名字看來它是來修飾一個對象的,這個對象可以給多個獨立的 View使用呻惕。如果你用 @ObservedObject 來修飾一個對象盘榨,那么那個對象必須要實現(xiàn) ObservableObject 協(xié)議,然后用@Published 修飾對象里屬性蟆融,表示這個屬性是需要被 SwiftUI 監(jiān)聽的

import Combine

final class PodcastPlayer: ObservableObject {

? ? @Published private(set) var isPlaying: Bool = false

? ? func play() {

? ? ? ? isPlaying = true

? ? }

? ? func pause() {

? ? ? ? isPlaying = false

? ? }

}
這里定義了一個 PodcastPlayer 類草巡,這個類可以給不同的 View 使用,SwiftUI 會追蹤使用 View 里經(jīng)過@ObservableObject修飾過的對象里進(jìn)過 @Published 修飾的屬性變換,一旦發(fā)生了變換山憨,SwiftUI 會更新相關(guān)聯(lián)的 UI
struct EpisodesView: View {

? ? @ObservedObject var player: PodcastPlayer

? ? let episodes: [Episode]

? ? var body: some View {

? ? ? ? List {

? ? ? ? ? ? Button(

? ? ? ? ? ? ? ? action: {

? ? ? ? ? ? ? ? ? ? if self.player.isPlaying {

? ? ? ? ? ? ? ? ? ? ? ? self.player.pause()

? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? self.player.play()

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? }, label: {

? ? ? ? ? ? ? ? ? ? Text(player.isPlaying ? "Pause": "Play")

? ? ? ? ? ? ? ? }

? ? ? ? ? ? )

? ? ? ? ? ? ForEach(episodes) { episode in

? ? ? ? ? ? ? ? Text(episode.title)

? ? ? ? ? ? }

? ? ? ? }

? ? }

}

@EnvironmentObject

從名字上可以看出查乒,這個修飾器是針對全局環(huán)境的。通過它郁竟,我們可以避免在初始 View 時創(chuàng)建 ObservableObject, 而是從環(huán)境中獲取 ObservableObject

@Environment

SwiftUI 本身就有很多系統(tǒng)級別的設(shè)定玛迄,我們開一個通過@Environment來獲取到它們
struct CalendarView: View {

? ? @Environment(\.calendar) var calendar: Calendar

? ? @Environment(\.locale) var locale: Locale

? ? @Environment(\.colorScheme) var colorScheme: ColorScheme

? ? var body: some View {

? ? ? ? return Text(locale.identifier)

? ? }

}
通過@Environment修飾的屬性,我們開一個監(jiān)聽系統(tǒng)級別信息的變換棚亩,這個例子里一旦Calendar, Locale, ColorScheme發(fā)生了變換蓖议,我們定義的 CalendarView 就會刷新.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市讥蟆,隨后出現(xiàn)的幾起案子勒虾,更是在濱河造成了極大的恐慌,老刑警劉巖瘸彤,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件修然,死亡現(xiàn)場離奇詭異,居然都是意外死亡质况,警方通過查閱死者的電腦和手機(jī)愕宋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來结榄,“玉大人中贝,你說我怎么就攤上這事【世剩” “怎么了邻寿?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長依溯。 經(jīng)常有香客問我,道長瘟则,這世上最難降的妖魔是什么黎炉? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮醋拧,結(jié)果婚禮上慷嗜,老公的妹妹穿的比我還像新娘。我一直安慰自己丹壕,他們只是感情好庆械,可當(dāng)我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著菌赖,像睡著了一般缭乘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上琉用,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天堕绩,我揣著相機(jī)與錄音策幼,去河邊找鬼。 笑死奴紧,一個胖子當(dāng)著我的面吹牛特姐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播黍氮,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼唐含,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了沫浆?” 一聲冷哼從身側(cè)響起捷枯,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎件缸,沒想到半個月后铜靶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡他炊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年争剿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片痊末。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡蚕苇,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出凿叠,到底是詐尸還是另有隱情涩笤,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布盒件,位于F島的核電站蹬碧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏炒刁。R本人自食惡果不足惜恩沽,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望翔始。 院中可真熱鬧罗心,春花似錦、人聲如沸城瞎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽脖镀。三九已至飒箭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背补憾。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工漫萄, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人盈匾。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓腾务,卻偏偏與公主長得像,于是被迫代替她去往敵國和親削饵。 傳聞我的和親對象是個殘疾皇子岩瘦,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,779評論 2 354