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

原文地址:https://mecid.github.io/2019/06/12/understanding-property-wrappers-in-swiftui/

@States

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

struct ProductsView: View {
    let products: [Product]

    @State private var showFavorited: Bool = false

    var body: some View {
        List {
            Button(
                action: { self.showFavorited.toggle() },
                label: { Text("Change filter") }
            )

            ForEach(products) { product in
                if !self.showFavorited || product.isFavorited {
                    Text(product.title)
                }
            }
        }
    }
}

這個例子里我們創(chuàng)建了一個列表,點擊按鈕 showFavorited 會發(fā)生值的取反操作糠爬,然后 SwiftUI 會通過最新的值更新值

譯者:這個 demo 在最新的 xcode 11 beta 6 中已經(jīng)無法運行起來了界弧,因為 Button 組件的語法已經(jīng)修改了

@Binding

有時候我們會把一個視圖的屬性傳至子節(jié)點中气嫁,但是又不能直接的傳遞給子節(jié)點料睛,因為在 Swift 中值的傳遞形式是值類型傳遞方式府蔗,也就是傳遞給子節(jié)點的是一個拷貝過的值灾票。但是通過 @Binding 修飾器修飾后峡谊,屬性變成了一個引用類型,傳遞變成了引用傳遞刊苍,這樣父子視圖的狀態(tài)就能關(guān)聯(lián)起來了既们。

struct FilterView: View {
    @Binding var showFavorited: Bool

    var body: some View {
        Toggle(isOn: $showFavorited) {
            Text("Change filter")
        }
    }
}

struct ProductsView: View {
    let products: [Product]

    @State private var showFavorited: Bool = false

    var body: some View {
        List {
            FilterView(showFavorited: $showFavorited)

            ForEach(products) { product in
                if !self.showFavorited || product.isFavorited {
                    Text(product.title)
                }
            }
        }
    }
}

我們在 FilterView 視圖里用 @Binding 修飾 showFavorited 屬性, 在傳遞屬性是使用 $ 來傳遞 showFavorited 屬性的引用,這樣 FilterView 視圖就能讀寫父視圖 ProductsView 里的狀態(tài)值了正什,并且值發(fā)生了修改 SwiftUI 會更新 ProductsView 和 FilterView 視圖

譯者:在 FilterView 視圖里啥纸,Toggle 組件的創(chuàng)建也使用 showFavorited 這種格式,因為 Toggle 組件會修改傳入的值婴氮,如果是一個純讀的組件比如 Text 就不需要 使用showFavorited斯棒, 直接 Text(showFavorited) 使用就好了

@ObservedObject

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

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 修飾過的對象里進過 @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)
            }
        }
    }
}

譯者:這個 demo 在最新的 xcode 11 beta 6 中已經(jīng)無法運行起來了爽哎,因為 Button 組件的語法已經(jīng)修改了

@EnvironmentObject

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

SceneDelegate.swift 文件

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        let window = UIWindow(frame: UIScreen.main.bounds)
        let episodes = [
            Episode(id: 1, title: "First episode"),
            Episode(id: 2, title: "Second episode")
        ]

        let player = PodcastPlayer()
        window.rootViewController = UIHostingController(
            rootView: EpisodesView(episodes: episodes)
                .environmentObject(player)
        )
        self.window = window
        window.makeKeyAndVisible()
    }
}

EpisodesView.swift 文件

struct EpisodesView: View {
    @EnvironmentObject 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)
            }
        }
    }
}

可以看出我們獲取 PodcastPlayer 這個 ObservableObject 是通過 @EnvironmentObject 修飾器厨内,但是在入口需要傳入 .environmentObject(player) 。@EnvironmentObject 的工作方式是在 Environment 查找 PodcastPlayer 實例渺贤。

@Environment

繼續(xù)上面一段的說明雏胃,我們的確開一個從 Environment 拿到用戶自定義的 object,但是 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閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異面徽,居然都是意外死亡艳丛,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門趟紊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人碰酝,你說我怎么就攤上這事霎匈。” “怎么了送爸?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵铛嘱,是天一觀的道長。 經(jīng)常有香客問我袭厂,道長墨吓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任纹磺,我火速辦了婚禮帖烘,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘橄杨。我一直安慰自己秘症,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布式矫。 她就那樣靜靜地躺著乡摹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪采转。 梳的紋絲不亂的頭發(fā)上聪廉,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天,我揣著相機與錄音故慈,去河邊找鬼板熊。 笑死,一個胖子當(dāng)著我的面吹牛惯悠,可吹牛的內(nèi)容都是我干的邻邮。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼克婶,長吁一口氣:“原來是場噩夢啊……” “哼筒严!你這毒婦竟也來了丹泉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤鸭蛙,失蹤者是張志新(化名)和其女友劉穎摹恨,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體娶视,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡晒哄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了肪获。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寝凌。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖孝赫,靈堂內(nèi)的尸體忽然破棺而出较木,到底是詐尸還是另有隱情,我是刑警寧澤青柄,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布伐债,位于F島的核電站,受9級特大地震影響致开,放射性物質(zhì)發(fā)生泄漏峰锁。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一双戳、第九天 我趴在偏房一處隱蔽的房頂上張望虹蒋。 院中可真熱鬧,春花似錦拣技、人聲如沸千诬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽徐绑。三九已至,卻和暖如春莫辨,著一層夾襖步出監(jiān)牢的瞬間傲茄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工沮榜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留盘榨,地道東北人。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓蟆融,卻偏偏與公主長得像草巡,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子型酥,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容