{"id":879,"date":"2020-08-16T16:03:54","date_gmt":"2020-08-16T08:03:54","guid":{"rendered":"http:\/\/123.57.164.21\/?p=879"},"modified":"2020-08-16T16:04:13","modified_gmt":"2020-08-16T08:04:13","slug":"swiftui-view-tree%ef%bc%88preferencekey%ef%bc%89","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=879","title":{"rendered":"SwiftUI View Tree\uff08PreferenceKey\uff09"},"content":{"rendered":"\n

\u5b66\u4e60SwiftUI\uff0c\u4fbf\u7ed5\u4e0d\u5f00\u89c6\u56fe\u6811\u7684\u6982\u5ff5\uff0c\u901a\u8fc7\u5bf9\u89c6\u56fe\u6811\u7684\u5b66\u4e60\uff0c\u5f88\u591a\u4e4b\u524d\u8ba4\u4e3a\u5f88\u56f0\u96be\u7684\u95ee\u9898\uff0c\u90fd\u4f1a\u8fce\u5203\u800c\u89e3\u3002\u89c6\u56fe\u6811\u7684\u6982\u5ff5\u4e0d\u8a00\u800c\u55bb\uff0c\u5728SwiftUI\u4e2d\uff0c\u7ec4\u6210\u67d0\u4e2a\u9875\u9762\u7684View\u7684\u7ed3\u6784\u662f\u6811\u578b\u7684\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

\u5728SwiftUI\u4e2d\uff0c\u5b50view\u5982\u679c\u60f3\u83b7\u53d6\u7236view\u63d0\u4f9b\u7684\u6570\u636e\uff0c\u4e00\u4e2a\u6700\u597d\u7684\u65b9\u5f0f\u5c31\u662f\u4f7f\u7528@EnvironmentObject<\/code>\u6216\u8005@Environment<\/code>,\u5728\u8fd9\u91cc\u53ea\u6f14\u793a\u4e00\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\uff1a<\/p>\n\n\n\n

@main\nstruct PreferenceKeyDemoApp: App {\n    var body: some Scene {\n        WindowGroup {\n            ContentView()\n                .environment(\\.myEnvironmentTestValue, 10.0)\n        }\n    }\n}\n\nstruct MyEnvironmentKey: EnvironmentKey {\n    static var defaultValue: Double = 0.0\n}\n\nextension EnvironmentValues {\n    var myEnvironmentTestValue: Double {\n        get {\n            self[MyEnvironmentKey.self]\n        }\n        set {\n            self[MyEnvironmentKey.self] = newValue\n        }\n    }\n}\n\n<\/pre>\n\n\n\n
\u4e0a\u8fb9\u7684\u4ee3\u7801\u4e2d\uff0c\u7ed9ContentView\u8bbe\u7f6e\u4e86\u4e00\u4e2a\u73af\u5883\u53d8\u91cf\uff0c\u7136\u540e\u6211\u4eec\u5728\u5176\u5b50view\u4e2d\u5c31\u53ef\u968f\u610f\u83b7\u53d6\u8fd9\u4e2a\u73af\u5883\u53d8\u91cf<\/p>\n\n\n\n
struct ContentView: View {\n    var body: some View {\n        Example4()\n    }\n}\n \nstruct Example4: View {\n    @Environment(\\.myEnvironmentTestValue) var value: Double\n    \n    var body: some View {\n        Text(\"\\(value)\")\n    }\n}\n<\/pre>\n\n\n\n
\u5982\u679c\u7236view\u60f3\u83b7\u53d6\u5176\u5b50view\u7684\u4e00\u4e9b\u6570\u636e\uff0c\u600e\u4e48\u529e\u5462\uff1f<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\u5927\u5bb6\u5934\u8111\u4e2d\u4e00\u5b9a\u8981\u5bf9\u4e0a\u56fe\u4e2d\u7684\u95ee\u53f7\u6709\u6df1\u523b\u7684\u601d\u8003\uff0c\u53ea\u6709\u8fd9\u6837\u624d\u80fd\u638c\u63e1\u5728\u4ec0\u4e48\u573a\u666f\u4e0b\u9700\u8981\u4f7f\u7528\u672c\u6587\u8bb2\u89e3\u7684\u6280\u672f\u3002<\/p>\n\n\n\n
\u4e3e\u4e2a\u4f8b\u5b50<\/p>\n\n\n\n
struct Example1: View {\n    var body: some View {\n        NavigationView {\n            Text(\"Hello, world!\")\n                .padding()\n                .navigationBarTitle(\"\ud83d\ude2f\ud83d\udd1f\u231a\ufe0f\ud83e\uddb6\", displayMode: .inline)\n        }\n    }\n}\n<\/pre>\n\n\n\n
\u5927\u5bb6\u770b\u4e0a\u8fb9\u8fd9\u6bb5\u4ee3\u7801\uff0cnavigationBarTitle\u8fd9\u4e2amodifier\u5199\u5728\u4e86Text\u4e0a\uff0c\u90a3\u4e48NavigationView\u662f\u5982\u4f55\u83b7\u53d6\u5230\u8fd9\u4e9b\u4fe1\u606f\u7684\u5462\uff1f\u6211\u4eec\u5e26\u7740\u8fd9\u4e2a\u7591\u95ee\uff0c\u518d\u770b\u4e00\u4e2a\u4f8b\u5b50\uff1a<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\u4e0a\u56fe\u4e2d\u6f14\u793a\u7684\u529f\u80fd\u5f88\u7b80\u5355\uff0c\u70b9\u51fb\u54ea\u4e2a\u6570\u5b57\uff0c\u54ea\u4e2a\u6570\u5b57\u5c31\u663e\u793a\u4e00\u4e2aborder\uff0c\u7528\u6211\u4eec\u5b66\u8fc7\u7684\u77e5\u8bc6\u5c31\u80fd\u5b9e\u73b0\u8fd9\u4e2a\u529f\u80fd\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n
struct Example2: View {\n    @State private var activeNumber: Int = 1\n\n    var body: some View {\n        VStack {\n            Spacer()\n            HStack {\n                NumberView(activeNumber: $activeNumber, number: 1)\n                NumberView(activeNumber: $activeNumber, number: 2)\n                NumberView(activeNumber: $activeNumber, number: 3)\n            }\n            HStack {\n                NumberView(activeNumber: $activeNumber, number: 4)\n                NumberView(activeNumber: $activeNumber, number: 5)\n                NumberView(activeNumber: $activeNumber, number: 6)\n            }\n            HStack {\n                NumberView(activeNumber: $activeNumber, number: 7)\n                NumberView(activeNumber: $activeNumber, number: 8)\n                NumberView(activeNumber: $activeNumber, number: 9)\n            }\n            Spacer()\n        }\n    }\n\n    struct NumberView: View {\n        @Binding var activeNumber: Int\n        let number: Int\n\n        var body: some View {\n            Text(\"\\(number)\")\n                .font(.system(size: 40, weight: .heavy, design: .rounded))\n                .padding(20)\n                .background(NumberBorder(show: activeNumber == number))\n                .onTapGesture {\n                    self.activeNumber = number\n                }\n        }\n    }\n\n    struct NumberBorder: View {\n        let show: Bool\n\n        var body: some View {\n            Circle()\n                .stroke(show ? Color.green : Color.clear, lineWidth: 5)\n                .animation(.easeInOut)\n        }\n    }\n}\n<\/pre>\n\n\n\n
\u6838\u5fc3\u601d\u60f3\u5c31\u662f\uff0c\u7236view\u8bb0\u5f55\u4e00\u4e2aactiveNumber\uff0c\u7136\u540e\u4e3aindex\u7b49\u4e8eactiveNumber\u7684NumberView\u7684border\u8bbe\u7f6e\u989c\u8272\u3002\u6211\u4eec\u628a\u96be\u5ea6\u7a0d\u4e3a\u63d0\u9ad8\u4e00\u70b9\uff0c\u8981\u6c42\u5b9e\u73b0\u4e0b\u56fe\u7684\u529f\u80fd\uff1a<\/p>\n\n\n\n
<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u6700\u660e\u663e\u7684\u6539\u53d8\u5c31\u662f\uff0c\u53ea\u6709\u4e00\u4e2a\u7eff\u8272\u5706\u5708\u5728\u6267\u884c\u52a8\u753b\uff0c\u4ed4\u7ec6\u601d\u8003\uff0c\u6211\u4eec\u53d1\u73b0\uff0c\u8981\u5b9e\u73b0\u4e0a\u8ff0\u529f\u80fd\uff0c\u9700\u8981\u7236view\u83b7\u53d6\u5b50view\u7684\u4f4d\u7f6e\u4fe1\u606f\uff0c\u8fd9\u6070\u6070\u5f15\u51fa\u4e86\u672c\u6587\u7684\u6838\u5fc3\u5185\u5bb9\uff1a\u7236\u7c7b\u5982\u4f55\u83b7\u53d6\u5b50view\u7684\u4fe1\u606f\u3002<\/p>\n\n\n\n
\u5173\u4e8e\u8fd9\u4e2a\u95ee\u9898\uff0c\u6211\u4eec\u53ef\u4ee5\u60f3\u50cf\u6210\u5b50view\u53ef\u4ee5\u628a\u81ea\u5df1\u7684\u4e00\u4e9b\u4fe1\u606f\u5148\u6253\u5305\uff0c\u7136\u540e\u548c\u81ea\u8eab\u7ed1\u5b9a\uff0c\u7236view\u5c31\u80fd\u83b7\u53d6\u5230\u8fd9\u4e9b\u5305\u88f9\u3002<\/strong><\/p>\n\n\n\n
\u90a3\u4e48\uff0c\u5982\u4f55\u6253\u5305\u5462\uff1f<\/p>\n\n\n\n
struct NumberPreferenceValue: Equatable {\n    let viewIdx: Int\n    let rect: CGRect\n}\n<\/pre>\n\n\n\n
\u5f88\u7b80\u5355\uff0c\u628a\u9700\u8981\u4f20\u9012\u7684\u4fe1\u606f\u5c01\u88c5\u6210\u4e00\u4e2a\u7ed3\u6784\u4f53\u5c31\u884c\u4e86\uff0c\u4f46\u9700\u8981\u5b9e\u73b0Equatable\u534f\u8bae\uff0c\u5728\u672c\u4f8b\u4e2d\uff0c\u6211\u4eec\u6253\u5305\u4e86\u4e24\u4e2a\u4fe1\u606f\uff0c\u539f\u5219\u4e0a\u53ef\u4ee5\u6253\u5305\u4efb\u4f55\u4fe1\u606f\u3002<\/p>\n\n\n\n
struct NumberPreferenceViewSetter: View {\n    let idx: Int\n    var body: some View {\n        GeometryReader { proxy in\n            Circle()\n                .stroke(Color.clear, lineWidth: 5)\n                .preference(key: NumberPreferenceKey.self, value: [NumberPreferenceValue(viewIdx: idx, rect: proxy.frame(in: .named(\"ZStackSpace\")))])\n        }\n\n    }\n}\n<\/pre>\n\n\n\n
\u6211\u4eec\u4e3a\u6bcf\u4e2a\u5b50view\u6dfb\u52a0\u4e86\u4e00\u4e2a\u900f\u660e\u7684\u8fb9\u6846\uff0c\u901a\u8fc7preference\u8fd9\u4e2amodifier\u7ed1\u5b9a\u81ea\u8eab\u7684\u4fe1\u606f\uff0c\u6ce8\u610f\uff0cpreference\u8981\u6c42\u4f20\u5165\u4e00\u4e2akey\u548cvalue\uff1a<\/p>\n\n\n\n
struct NumberPreferenceKey: PreferenceKey {\n    typealias Value = [NumberPreferenceValue]\n    static var defaultValue: [NumberPreferenceValue] = []\n    static func reduce(value: inout [NumberPreferenceValue], nextValue: () -> [NumberPreferenceValue]) {\n        value.append(contentsOf: nextValue())\n    }\n}\n<\/pre>\n\n\n\n