{"id":853,"date":"2020-08-16T11:44:33","date_gmt":"2020-08-16T03:44:33","guid":{"rendered":"http:\/\/123.57.164.21\/?p=853"},"modified":"2020-08-16T11:44:33","modified_gmt":"2020-08-16T03:44:33","slug":"swiftui-geometryreader","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=853","title":{"rendered":"SwiftUI GeometryReader"},"content":{"rendered":"\n<p>SwiftUI\u7684\u4e00\u4e2a\u795e\u5947\u4e4b\u5904\u5728\u4e8e\uff0c\u6211\u4eec\u5728\u505a\u67d0\u4e9b\u529f\u80fd\u7684\u65f6\u5019\uff0c\u65e0\u9700\u8fc7\u591a\u5730\u5173\u5fc3\u5e03\u5c40\u4fe1\u606f\uff0c\u800c\u662f\u628a\u4e3b\u8981\u7cbe\u529b\u653e\u5728\u4e1a\u52a1\u903b\u8f91\u90e8\u5206\u3002<\/p>\n\n\n\n<p>\u90a3\u4e48SwiftUI\u5e03\u5c40\u7684\u6838\u5fc3\u539f\u7406\u662f\u4ec0\u4e48\u5462\uff1f \u4e3b\u8981\u52063\u4e2a\u6b65\u9aa4\uff1a<\/p>\n\n\n\n<ul><li>\u7236view\u63d0\u4f9b\u4e00\u4e2a\u5efa\u8bae\u7684size<\/li><li>\u5b50view\u6839\u636e\u81ea\u8eab\u7684\u7279\u6027\u8fd4\u56de\u4e00\u4e2asize<\/li><li>\u7236view\u4f7f\u7528\u5b50view\u8fd4\u56de\u7684size\u5bf9\u5b50view\u8fdb\u884c\u5e03\u5c40<\/li><\/ul>\n\n\n\n<p>\u4e3e\u4e2a\u4f8b\u5b50\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2020\/08\/image-96.png\" alt=\"\" class=\"wp-image-854\" width=\"331\" height=\"176\" srcset=\"https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-96.png 448w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-96-300x159.png 300w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-96-230x122.png 230w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-96-350x186.png 350w\" sizes=\"(max-width: 331px) 100vw, 331px\" \/><\/figure><\/div>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct Example3: View {\n    var body: some View {\n        HStack(spacing: 0) {\n            Text(\"\u4e3e\u4e2a\u4f8b\u5b50\ud83c\udf30\")\n\n            MyRectangle()\n        }\n        .frame(width: 200, height: 100, alignment: .center)\n        .border(Color.green, width: 1)\n    }\n\n    struct MyRectangle: View {\n        var body: some View {\n            Rectangle().fill(Color.green)\n        }\n    }\n}\n<\/pre>\n\n\n\n<p>\u5728\u4e0a\u8fb9\u7684\u56fe\u7247\u4e2d\uff0c\u53ef\u4ee5\u770b\u51fa\uff0cHStack\u4f5c\u4e3a\u7236view\uff0c\u4ed6\u7684\u5c3a\u5bf8\u662f200*100\uff0cText\u7684\u5bbd\u5ea6\u4f9d\u8d56\u6587\u5b57\u7684\u5bbd\u5ea6\uff0c\u800c\u5269\u4f59\u7684\u5bbd\u5ea6\u5c31\u90fd\u7ed9\u4e86MyRectangle\u3002<\/p>\n\n\n\n<p>\u5927\u5bb6\u53ea\u9700\u8981\u4ed4\u7ec6\u601d\u8003SwiftUI\u5e03\u5c40\u76843\u4e2a\u6b65\u9aa4\uff0c\u518d\u5bf9\u7167\u4ee3\u7801\u548c\u8fd0\u884c\u6548\u679c\uff0c\u5c31\u80fd\u660e\u767d\u5176\u4e2d\u9053\u7406\u3002\u6211\u4eec\u4e0d\u5728\u8fd9\u91cc\u505a\u66f4\u591a\u89e3\u91ca\u3002<strong>\u90a3\u4e48\u8fd9\u8ddfGeometryReader\u6709\u4ec0\u4e48\u5173\u7cfb\u5462\uff1f<\/strong><\/p>\n\n\n\n<p><strong>GeometryReader\u7684\u4e3b\u8981\u4f5c\u7528\u5c31\u662f\u80fd\u591f\u83b7\u53d6\u5230\u7236view\u5efa\u8bae\u7684\u5c3a\u5bf8\u3002<\/strong><\/p>\n\n\n\n<p>\u6211\u4eec\u7a0d\u5fae\u4fee\u6539\u4e00\u4e0b\u4e0a\u8fb9\u7684\u4ee3\u7801\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct ContentView: View {\n    var body: some View {\n        Example4()\n            .frame(width: 200, height: 100, alignment: .center)\n    }\n}\n\nstruct Example4: View {\n    var body: some View {\n        GeometryReader { proxy in\n            HStack(spacing: 0) {\n                Text(\"\u4e3e\u4e2a\u4f8b\u5b50\ud83c\udf30, \\(proxy.size.width)\")\n\/\/                    .layoutPriority(1)\n                \n                MyRectangle()\n            }\n            .border(Color.green, width: 1)\n        }\n\n    }\n\n    struct MyRectangle: View {\n        var body: some View {\n            Rectangle().fill(Color.green)\n        }\n    }\n}\n<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"173\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2020\/08\/1914952-e975c10ecd1de772.png\" alt=\"\" class=\"wp-image-856\" srcset=\"https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/1914952-e975c10ecd1de772.png 371w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/1914952-e975c10ecd1de772-300x140.png 300w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/1914952-e975c10ecd1de772-230x107.png 230w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/1914952-e975c10ecd1de772-350x163.png 350w\" sizes=\"(max-width: 371px) 100vw, 371px\" \/><\/figure><\/div>\n\n\n\n<p>\u53ef\u4ee5\u770b\u5230\uff0c\u786e\u5b9e\u83b7\u53d6\u5230\u4e86\u7236view\u7684width\uff0c\u4f46\u662f\u4e3a\u4ec0\u4e48\u6587\u5b57\u81ea\u52a8\u6362\u884c\u4e86\u5462\uff1f\u662f\u56e0\u4e3a\u5728HStack\u4e2d\uff0cText\u548cMyRectangle\u62e5\u6709\u540c\u6837\u7684\u5e03\u5c40\u4f18\u5148\u7ea7\uff0c\u8981\u60f3\u8ba9\u6587\u5b57\u5c3d\u53ef\u80fd\u7684\u5c55\u793a\u5b8c\u6574\uff0c\u53ea\u9700\u63d0\u5347Text\u7684\u5e03\u5c40\u4f18\u5148\u7ea7\u5373\u53ef\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.layoutPriority(1)\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">GeometryProxy<\/h4>\n\n\n\n<p>\u5728\u4e0a\u8fb9\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u7528\u5230\u4e86\u4e00\u4e2aproxy\u53c2\u6570\uff0c\u8fd9\u4e2a\u53c2\u6570\u7684\u7c7b\u578b\u662fGeometryProxy\uff0c\u6211\u4eec\u5148\u770b\u770b\u5b83\u7684\u5b9a\u4e49\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">public struct GeometryProxy {\n    public var size: CGSize { get }\n    public subscript&lt;T>(anchor: Anchor&lt;T>) -> T { get }\n    public var safeAreaInsets: EdgeInsets { get }\n    public func frame(in coordinateSpace: CoordinateSpace) -> CGRect\n}\n<\/pre>\n\n\n\n<ul><li>size\u6bd4\u8f83\u76f4\u89c2\uff0c\u5c31\u662f\u8fd4\u56de\u7236view\u5efa\u8bae\u7684\u5c3a\u5bf8<\/li><li>subscript\u53ef\u4ee5\u8ba9\u6211\u4eec\u83b7\u53d6.leading,.top\u7b49\u7b49\u7c7b\u4f3c\u8fd9\u6837\u7684\u6570\u636e<\/li><li>safeAreaInsets\u53ef\u4ee5\u83b7\u53d6\u5b89\u5168\u533a\u57df\u7684Insets<\/li><li>frame(in:)\u8981\u6c42\u4f20\u5165\u4e00\u4e2aCoordinateSpace\u7c7b\u578b\u7684\u53c2\u6570\uff0c\u4e5f\u5c31\u662f\u5750\u6807\u7a7a\u95f4\uff0c\u53ef\u4ee5\u662f.local, .global \u6216\u8005 .named()\uff0c\u5176\u4e2d .named()\u53ef\u4ee5\u81ea\u5b9a\u4e49\u5750\u6807\u7a7a\u95f4\uff0c\u8fd9\u4e2a\u5728\u4e0b\u8fb9\u7684\u4f8b\u5b50\u4e2d\u4f1a\u7528\u5230<\/li><\/ul>\n\n\n\n<p>\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u4f1a\u6f14\u793a\u4e24\u4e2a\u4f8b\u5b50\u6765\u8fdb\u4e00\u6b65\u5b66\u4e60GeometryReader\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">RoundedCornersView<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"439\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2020\/08\/image-97-1024x439.png\" alt=\"\" class=\"wp-image-858\" srcset=\"https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-97-1024x439.png 1024w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-97-300x129.png 300w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-97-768x329.png 768w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-97-830x356.png 830w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-97-230x99.png 230w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-97-350x150.png 350w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-97-480x206.png 480w, https:\/\/92it.top\/wp-content\/uploads\/2020\/08\/image-97.png 1278w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct RoundedCornersView: View {\n    var color: Color = .black\n    var topLeading: CGFloat = 0.0\n    var topTrailing: CGFloat = 0.0\n    var bottomLeading: CGFloat = 0.0\n    var bottomTrailing: CGFloat = 0.0\n    \n    var body: some View {\n        GeometryReader { geometry in\n            Path { path in\n                \n                let w = geometry.size.width\n                let h = geometry.size.height\n                \n                let tr = min(min(self.topTrailing, h\/2), w\/2)\n                let tl = min(min(self.topLeading, h\/2), w\/2)\n                let bl = min(min(self.bottomLeading, h\/2), w\/2)\n                let br = min(min(self.bottomTrailing, h\/2), w\/2)\n                \n                path.move(to: CGPoint(x: w \/ 2.0, y: 0))\n                path.addLine(to: CGPoint(x: w - tr, y: 0))\n                path.addArc(center: CGPoint(x: w - tr, y: tr), radius: tr, startAngle: Angle(degrees: -90), endAngle: Angle(degrees: 0), clockwise: false)\n                path.addLine(to: CGPoint(x: w, y: h - br))\n                path.addArc(center: CGPoint(x: w - br, y: h - br), radius: br, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 90), clockwise: false)\n                path.addLine(to: CGPoint(x: bl, y: h))\n                path.addArc(center: CGPoint(x: bl, y: h - bl), radius: bl, startAngle: Angle(degrees: 90), endAngle: Angle(degrees: 180), clockwise: false)\n                path.addLine(to: CGPoint(x: 0, y: tl))\n                path.addArc(center: CGPoint(x: tl, y: tl), radius: tl, startAngle: Angle(degrees: 180), endAngle: Angle(degrees: 270), clockwise: false)\n                }\n                .fill(self.color)\n        }\n    }\n}\n<\/pre>\n\n\n\n<p>\u50cf\u4e0b\u8fb9\u8fd9\u6837\u4f7f\u7528\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Text(\"\u5927\u5723\uff0c\")\n    .font(.title2)\n    .padding(.all, 10)\n    .background(RoundedCornersView(color: .green,\n                                   topLeading: 0,\n                                   topTrailing: 30,\n                                   bottomLeading: 30,\n                                   bottomTrailing: 0))\n<\/pre>\n\n\n\n<p>\u4ece\u4e0a\u8fb9\u7684\u4ee3\u7801\u548c\u6548\u679c\u56fe\u6765\u770b\uff0c\u901a\u8fc7GeometryProxy\uff0c\u6211\u4eec\u53ef\u4ee5\u83b7\u53d6\u5230\u7236view\u5efa\u8bae\u7684\u5c3a\u5bf8\uff0c\u5728\u672c\u4f8b\u4e2d\uff0cRoundedCornersView\u7684\u7236view\u5176\u5b9e\u662fbackground\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\u6eda\u52a8\u8bd5\u56fe<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"112\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2020\/08\/1914952-628fc1b2d0142f7.gif\" alt=\"\" class=\"wp-image-864\"\/><\/figure><\/div>\n\n\n\n<p>\u6b63\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u968f\u7740\u6eda\u52a8\u7684\u8ddd\u79bb\uff0c\u52a8\u6001\u8ba1\u7b97\u56fe\u7247\u7ffb\u8f6c\u7684\u89d2\u5ea6\u3002\u4e3a\u5b9e\u73b0\u8fd9\u4e00\u529f\u80fd\uff0c\u9700\u8981\u7528\u5230\u4e00\u70b9\u70b9\u6570\u5b66\u77e5\u8bc6\uff1a<\/p>\n\n\n\n<ul><li>\u5b9a\u4e49\u5c4f\u5e55\u4e2d\u95f4\u4f4d\u7f6e\u7684\u56fe\u7247\u65cb\u8f6c\u89d2\u5ea6\u4e3a0<\/li><li>\u6839\u636eview\u5f53\u524d\u7684center\u76f8\u5f53\u4e8e\u5c4f\u5e55\u7684\u4f4d\u7f6e\u6c42\u51fapercent<\/li><li>\u5e94\u75283D\u65cb\u8f6c\uff0c\u6cbfy\u8f74<\/li><\/ul>\n\n\n\n<p>\u4ee3\u7801\u6bd4\u8f83\u7b80\u5355\uff0c\u5728\u8fd9\u91cc\u5c31\u4e0d\u505a\u66f4\u591a\u89e3\u91ca\u4e86\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct Example2: View {\n    let img = [\"1\", \"2\", \"3\", \"4\", \"5\"]\n\n    var body: some View {\n        ScrollView(.horizontal) {\n            LazyHStack(spacing: 0) {\n                ForEach(0..&lt;img.count) { index in\n                    GeometryReader { proxy in\n                        Image(img[index])\n                            .resizable()\n                            .aspectRatio(contentMode: .fill)\n                            .rotation3DEffect(self.rotateAngle(proxy), axis: (x: 0, y: 11, z: 0))\n                    }\n                    .frame(width: 600.0 \/ 3, height: 600.0 \/ 3 * (425 \/ 640))\n                }\n            }\n        }\n        .frame(width: 600)\n        .coordinateSpace(name: \"ScrollViewSpace\")\n    }\n\n    func rotateAngle(_ proxy: GeometryProxy) -> Angle {\n        let dif = 600 * 0.5 - proxy.frame(in: .named(\"ScrollViewSpace\")).midX\n        let pct = min(dif \/ proxy.size.width * 0.5, 1)\n        return .degrees(Double(30 * pct))\n    }\n}<\/pre>\n\n\n\n<p>\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7<code>.coordinateSpace(name: \"ScrollViewSpace\")<\/code>\u8fd9\u79cd\u65b9\u5f0f\u7ed9\u67d0\u4e2aView\u81ea\u5b9a\u4e49\u4e00\u4e2a\u5750\u6807\u7a7a\u95f4\uff0c\u7136\u540e\u901a\u8fc7<code>proxy.frame(in: .named(\"ScrollViewSpace\")).midX<\/code>\u6765\u83b7\u53d6\u5230\u67d0\u4e2aview\u5f53\u524d\u7684\u4f4d\u7f6e\u5728\u6307\u5b9a\u5750\u6807\u7a7a\u95f4\u4e2d\u7684\u5750\u6807\u3002<\/p>\n\n\n\n<p>\u4e5f\u5c31\u662f\u8bf4\uff0c\u6211\u4eec\u9700\u8981\u83b7\u53d6Image\u5728\u5176\u7236viewScrollView\u4e2d\u7684\u76f8\u5bf9\u5750\u6807\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\u603b\u7ed3<\/h4>\n\n\n\n<p>GeometryReader\u8ba9\u6211\u4eec\u80fd\u591f\u83b7\u53d6\u5230\u7236view\u63d0\u4f9b\u7684\u5efa\u8bae\u7684size\uff0c\u8be5\u6570\u636e\u4fdd\u5b58\u5728GeometryProxy\uff0cGeometryProxy\u63d0\u4f9b\u4e86\u4e00\u4e2a<code>frame(in:)<\/code>\u51fd\u6570\uff0c\u53ef\u4ee5\u8ba9\u6211\u4eec\u5206\u522b\u83b7\u53d6\u5230\u8be5view\u76f8\u5bf9\u4e8e<code>.global<\/code>\u3001<code>.local<\/code>\u6216\u8005<code>.name<\/code>\u7684size\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>SwiftUI\u7684\u4e00\u4e2a\u795e\u5947\u4e4b\u5904\u5728\u4e8e\uff0c\u6211\u4eec\u5728\u505a\u67d0\u4e9b\u529f\u80fd\u7684\u65f6\u5019\uff0c\u65e0\u9700\u8fc7\u591a\u5730\u5173\u5fc3\u5e03\u5c40\u4fe1\u606f\uff0c\u800c\u662f\u628a\u4e3b\u8981\u7cbe\u529b\u653e\u5728\u4e1a\u52a1\u903b\u8f91\u90e8 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/853"}],"collection":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=853"}],"version-history":[{"count":5,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/853\/revisions"}],"predecessor-version":[{"id":865,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/853\/revisions\/865"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}