{"id":241,"date":"2020-07-27T17:07:30","date_gmt":"2020-07-27T09:07:30","guid":{"rendered":"http:\/\/123.57.164.21\/?p=241"},"modified":"2020-08-05T12:17:48","modified_gmt":"2020-08-05T04:17:48","slug":"swiftui-geometryreader%e7%94%a8%e6%b3%95","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=241","title":{"rendered":"SwiftUI GeometryReader\u7528\u6cd5"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u82f9\u679c\u5b98\u65b9\u5b9a\u4e49\uff1aA container view that defines its content as a function of its own size and coordinate space. <\/p><p>GeometryReader is a view that gives you access to the size and position of your parent.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-preformatted\">SwiftUI\u5e03\u5c40\u7684\u6838\u5fc3\u539f\u7406\u662f\u4ec0\u4e48\u5462\uff1f \u4e3b\u8981\u52063\u4e2a\u6b65\u9aa4\uff1a\n    \u2022\u3000\u7236view\u63d0\u4f9b\u4e00\u4e2a\u5efa\u8bae\u7684size\n    \u2022\u3000\u5b50view\u6839\u636e\u81ea\u8eab\u7684\u7279\u6027\u8fd4\u56de\u4e00\u4e2asize\n    \u2022\u3000\u7236view\u4f7f\u7528\u5b50view\u8fd4\u56de\u7684size\u5bf9\u5b50view\u8fdb\u884c\u5e03\u5c40\n\nGeometryReader\u7684\u57fa\u672c\u7528\u6cd5\u5c31\u662f\u8bfb\u53d6\u7236View\u5efa\u8bae\u7684\u5927\u5c0f\uff0c \u7136\u540e\u4f7f\u7528\u5b83\u6765\u5e03\u5c40\u6211\u4eec\u7684View\u3002\n    \u2022\u3000GeometryReader\u4e00\u4e2a\u5bb9\u5668View\n    \u2022\u3000\u53ef\u4ee5\u81ea\u5df1\u51b3\u5b9a\u5185\u5bb9\u7684\u5927\u5c0f\u4e0e\u4f4d\u7f6e<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<pre class=\"wp-block-preformatted\">\u4f8b\u5b501\uff1a \u5728\u4e00\u4e2a VStack \u4e2d\u5782\u76f4\u6446\u653e\u4e24\u4e2a\u5143\u7d20 Text \u548c MyRectangle, \n\u5176\u4e2d MyRectangle \u7684\u5927\u5c0f\u4e3a\u7236\u5bb9\u5668 VStack\u663e\u793a\u5b8cText\u540e\u5269\u4f59\u7a7a\u95f4\u76841\/3\u3002<\/pre>\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        VStack {\n            Text(\"\u4e0b\u9762\u662f\u4e00\u4e2a\u77e9\u5f62\")\n            MyRectangle()\n        }.frame(width: 150, height: 100) .border(Color.black)\n    }\n}<\/pre>\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 MyRectangle: View {\n    var body: some View {\n         \/\/  GeometryReader\u662f\u53bb\u6389Text view\u4e4b\u540e\uff0c \u5269\u4f59\u4e4b\u540e\u7684view\u3002\n         GeometryReader { geometry in\n            Rectangle()\n                .foregroundColor(Color.blue)\n                 \/\/ \u901a\u8fc7geometry\u53ef\u4ee5\u53d6\u5f97\u7236view\u7684\u5927\u5c0f(\u53bb\u6389Text view\u5269\u4f59\u4e4b\u540e\u7684\u5927\u5c0f)\u3002\n                .frame(width: geometry.size.width * 0.3, height: geometry.size.height * 0.3, alignment: .center)\n        }\n    }\n}<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"428\" height=\"350\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2020\/07\/image-18.png\" alt=\"\" class=\"wp-image-246\" srcset=\"https:\/\/92it.top\/wp-content\/uploads\/2020\/07\/image-18.png 428w, https:\/\/92it.top\/wp-content\/uploads\/2020\/07\/image-18-300x245.png 300w\" sizes=\"(max-width: 428px) 100vw, 428px\" \/><\/figure><\/div>\n\n\n\n<pre class=\"wp-block-preformatted\">\u4f8b\u5b502:\n\u901a\u8fc7<code>GeometryProxy<\/code>\u53ef\u4ee5\u62ff\u5230<strong>\u7236\u5bb9\u5668<\/strong>\u5e03\u5c40\u7684\u76f8\u5173\u4fe1\u606f\uff0c\u8fd9\u4e2a\u662f\u5b83\u80fd\u505a\u5230\u81ea\u5df1\u51b3\u5b9a\u5185\u5bb9\u7684\u5927\u5c0f\u4e0e\u4f4d\u7f6e\u7684<strong>\u6838\u5fc3<\/strong>\uff0c\u4e3b\u8981\u4f5c\u7528\u5982\u4e0b\uff1a\n\u53ef\u4ee5\u901a\u8fc7<code>size: CGSize<\/code>\u83b7\u53d6\u5bbd\u548c\u9ad8\u3002\n\u53ef\u4ee5\u901a\u8fc7<code>safeAreaInsets<\/code>\u83b7\u53d6\u5b89\u5168\u533a\u57df\u76f8\u5173\u7684\u4fe1\u606f\u3002\n\u53ef\u4ee5\u901a\u8fc7<code>frame()<\/code>\u83b7\u53d6\u5c4f\u5e55\u5750\u6807\u7cfb\u7684 x \u548c y \u5750\u6807\u3002<\/pre>\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    \n    var body: some View {\n        ScrollView {\n            ZStack {\n                VStack {\n                    RoundedRectangle(cornerRadius: 20)\n                        .foregroundColor(Color.green)\n                        .frame(width: 300, height: 300)\n                    \n                    RoundedRectangle(cornerRadius: 20)\n                        .foregroundColor(Color.red)\n                        .frame(width: 300, height: 300)\n                    \n                    RoundedRectangle(cornerRadius: 20)\n                        .foregroundColor(Color.purple)\n                        .frame(width: 300, height: 300)\n                    \n                }\n                \n                GeometryReader { geometry in\n                    VStack {\n                        \/\/ \u5c3a\u5bf8\n                        Text(\"Geometry width: \\(geometry.size.width)\")\n                        Text(\"Geometry height: \\(geometry.size.height)\")\n                        \n                        \/\/ \u5750\u6807\n                        Text(\"Geometry X: \\(geometry.frame(in: .global).origin.x)\")\n                        Text(\"Geometry Y: \\(geometry.frame(in: .global).origin.y)\")\n                        Text(\"Geometry minX: \\(geometry.frame(in: .global).minX)\")\n                        Text(\"Geometry maxX: \\(geometry.frame(in: .global).maxX)\")\n                        \n                        \/\/ \u5b89\u5168\u533a\u57df\n                        Text(\"Geometry safeAreaInsets.bottom: \\(geometry.safeAreaInsets.bottom)\")\n                        Text(\"Geometry safeAreaInsets.top: \\(geometry.safeAreaInsets.top)\")\n                    }\n                }\n            }\n        }.edgesIgnoringSafeArea(.all) \/\/ \u89c2\u5bdf\u6709\u65e0\u6b64\u53e5\u7684\u5185\u5bb9\u53d8\u5316\n    }\n}<\/pre>\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\/07\/image-22-844x1024.png\" alt=\"\" class=\"wp-image-291\" width=\"415\" height=\"503\" srcset=\"https:\/\/92it.top\/wp-content\/uploads\/2020\/07\/image-22-844x1024.png 844w, https:\/\/92it.top\/wp-content\/uploads\/2020\/07\/image-22-247x300.png 247w, https:\/\/92it.top\/wp-content\/uploads\/2020\/07\/image-22-768x932.png 768w, https:\/\/92it.top\/wp-content\/uploads\/2020\/07\/image-22.png 1142w\" sizes=\"(max-width: 415px) 100vw, 415px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u82f9\u679c\u5b98\u65b9\u5b9a\u4e49\uff1aA container view that defines its content as a f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/241"}],"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=241"}],"version-history":[{"count":16,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions"}],"predecessor-version":[{"id":313,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions\/313"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}