{"id":4566,"date":"2021-12-14T19:25:27","date_gmt":"2021-12-14T11:25:27","guid":{"rendered":"http:\/\/123.57.164.21\/?p=4566"},"modified":"2021-12-14T19:25:27","modified_gmt":"2021-12-14T11:25:27","slug":"geometryreader%e7%9a%84%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=4566","title":{"rendered":"GeometryReader\u7684\u4f7f\u7528"},"content":{"rendered":"\n

GeometryReader<\/strong>\u662f\u4e00\u4e2a\u5bb9\u5668\u89c6\u56fe\uff0c\u6839\u636e\u5176\u81ea\u8eab\u5927\u5c0f\u548c\u5750\u6807\u7a7a\u95f4\u5b9a\u4e49\u5176\u5185\u5bb9\u3002<\/p>\n\n\n\n

\/\/\/ A container view that defines its content as a function of its own\n\/\/\/ size and coordinate space. Returns a flexible preferred size to its\n\/\/\/ parent layout.\n@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)\n@frozen public struct GeometryReader<Content> : View where Content : View {\n\n    public var content: (GeometryProxy) -> Content\n\n    @inlinable public init(@ViewBuilder content: @escaping (GeometryProxy) -> Content)\n\n    \/\/\/ The type of view representing the body of this view.\n    \/\/\/\n    \/\/\/ When you create a custom view, Swift infers this type from your\n    \/\/\/ implementation of the required `body` property.\n    public typealias Body = Never\n}\n<\/pre>\n\n\n\n
\u5982\u679c\u4f60\u60f3\u8981\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e00\u4e2a\u77e9\u5f62\uff0c\u5927\u5c0f\u662f\u7236\u7ea7\u89c6\u56fe\u7684\u4e00\u534a\u3002\u4f4d\u7f6e\u4f4d\u4e8e\u7236\u7ea7\u89c6\u56fe\u53f3\u8fb9\u8ddd\u91cc5\u50cf\u7d20\u7684\u89c6\u56fe\u3002 \u6b64\u65f6\u5c31\u53ef\u4ee5\u4f7f\u7528GeometryReader\u3002<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
struct ContentView: View {\n    var body: some View {\n        VStack {\n            Text(\"Hello There!\")\n            MyRectangle()\n\n        }.frame(width: 150, height: 100).border(Color.black)\n    }\n}\n\nstruct MyRectangle: View {\n    var body: some View {\n        GeometryReader { geometry in\n            Rectangle()\n                .path(in: CGRect(x: geometry.size.width + 5,\n                                 y: 0,\n                                 width: geometry.size.width \/ 2.0,\n                                 height: geometry.size.height \/ 2.0))\n                .fill(Color.red)\n        }\n    }\n}<\/pre>\n\n\n\n
GeometryProxy<\/h4>\n\n\n\n
GeometryReader\u5c3e\u968f\u95ed\u5305\u7c7b\u578b\u662f\uff1a<\/p>\n\n\n\n
(GeometryProxy) -> Content\n<\/pre>\n\n\n\n
GeometryProxy\u7c7b\u4e2d\u6709\u4e24\u4e2a\u8ba1\u7b97\u578b\u5c5e\u6027\uff0c\u4e00\u4e2a\u65b9\u6cd5\uff0c\u548c\u4e00\u4e2a\u4e0b\u6807\u53d6\u503c:<\/p>\n\n\n\n
\/\/\/ Acts as a proxy for access to the size and coordinate space (for\n\/\/\/ anchor resolution) of the container view.\n@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)\npublic struct GeometryProxy {\n\n    \/\/\/ The size of the container view.\n    \/\/\/\u7236\u7ea7\u89c6\u56fe\u5efa\u8bae\u7684\u5927\u5c0f\n    public var size: CGSize { get }\n\n    \/\/\/ Resolves the value of `anchor` to the container view.\n    \/\/\/\u901a\u8fc7\u4e0b\u6807\u53d6\u503c\u6765\u83b7\u53d6\u4e00\u4e2a\u951a\u70b9\n    public subscript<T>(anchor: Anchor<T>) -> T { get }\n\n    \/\/\/ The safe area inset of the container view.\n    \/\/\/\u5bb9\u5668\u89c6\u56fesafeAreaInsets\n    public var safeAreaInsets: EdgeInsets { get }\n\n    \/\/\/ The container view's bounds rectangle converted to a defined\n    \/\/\/ coordinate space.\n    \/\/\/\u7236\u7ea7\u89c6\u56fe\u5efa\u8bae\u533a\u57df\u7684\u5927\u5c0f\u4f4d\u7f6e\n    public func frame(in coordinateSpace: CoordinateSpace) -> CGRect\n}\n<\/pre>\n\n\n\n
\u7236\u7ea7\u89c6\u56fe\u4f1a\u81ea\u52a8\u5b89\u6392GeometryReader<\/strong>\u7684\u89c6\u56fe\u5927\u5c0f\uff0c\u5982\u4e0b\u4f8b\uff1a<\/p>\n\n\n\n
struct ContentView: View {\n    var body: some View {\n        VStack {\n            GeometryReader { geo in\n                Text(\"Hello, World!\")\n                    .frame(width: geo.size.width * 0.9, height: 40)\n                    .background(Color.red)\n            }.background(Color.green)\n\n            Text(\"More text\")\n                .background(Color.blue)\n        }\n    }\n}\n<\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\u53ef\u4ee5\u770b\u5230\uff0c\u201cMore text\u201d\u88ab\u63a8\u5230\u4e86\u5e95\u90e8\uff0c\u800cGeometryReader\u5360\u636e\u4e86\u5269\u4f59\u7684\u6240\u6709\u7a7a\u95f4\uff0c\u4f46\u662f\u8fd9\u662f\u4e00\u4e2a\u9996\u9009\u5927\u5c0f\uff0c\u800c\u4e0d\u662f\u7edd\u5bf9\u5927\u5c0f\uff0c\u8fd9\u610f\u5473\u7740\u5b83\u4ecd\u7136\u4f9d\u8d56\u4e8e\u5b83\u7684\u7236\u7ea7\u3002<\/p>\n\n\n\n
\u63a5\u4e0b\u6765\u91cd\u70b9\u6765\u4e86\uff1a<\/p>\n\n\n\n
public func frame(in coordinateSpace: CoordinateSpace) -> CGRect\n<\/pre>\n\n\n\n
frame<\/strong>\u65b9\u6cd5\u66b4\u9732\u7ed9\u6211\u4eec\u4e86\u7236\u7ea7\u89c6\u56fe\u5efa\u8bae\u533a\u57df\u7684\u5927\u5c0f\u4f4d\u7f6e\uff0c\u53ef\u4ee5\u901a\u8fc7 .local<\/em> \/ .global<\/em> \/ .named()<\/em> \u6765\u83b7\u53d6\u4e0d\u540c\u7684\u5750\u6807\u7a7a\u95f4\u3002<\/p>\n\n\n\n
\u5982\u4e0b\u4f8b\uff1a<\/p>\n\n\n\n
struct OuterView: View {\n    var body: some View {\n        VStack {\n            Text(\"Top\")\n            InnerView()\n                .background(Color.green)\n            Text(\"Bottom\")\n        }\n    }\n}\n\nstruct InnerView: View {\n    var body: some View {\n        HStack {\n            Text(\"Left\")\n            GeometryReader { geo in\n                Text(\"Center\")\n                    .background(Color.blue)\n                    .onTapGesture {\n                        print(\"Global center: \\(geo.frame(in: .global).midX) x \\(geo.frame(in: .global).midY)\")\n                        print(\"Custom center: \\(geo.frame(in: .named(\"Custom\")).midX) x \\(geo.frame(in: .named(\"Custom\")).midY)\")\n                        print(\"Local center: \\(geo.frame(in: .local).midX) x \\(geo.frame(in: .local).midY)\")\n                    }\n            }\n            .background(Color.orange)\n            Text(\"Right\")\n        }\n    }\n}\n\nstruct ContentView: View {\n    var body: some View {\n        OuterView()\n            .background(Color.red)\n            .coordinateSpace(name: \"Custom\")\n    }\n}\n<\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\u8f93\u51fa\u4e3a\uff1a<\/p>\n\n\n\n
Global center: 182.5 x 345.75\nCustom center: 182.5 x 325.75\nLocal center: 144.5 x 292.75\n<\/pre>\n\n\n\n
3\u4e2a\u70b9\u8f93\u51fa\u7684\u5750\u6807\u90fd\u4e0d\u540c\uff0c\u662f\u56e0\u4e3a\u5b83\u4eec\u7684\u5750\u6807\u7cfb\u53c2\u7167\u70b9\u662f\u4e0d\u540c\u7684\uff1a<\/p>\n\n\n\n
  • .global\u7684\uff080,0\uff09\u662f\u6574\u4e2a\u5c4f\u5e55\u7684\u5de6\u4e0a\u89d2\uff0c\u5305\u62ec\u4e86safe area<\/strong>\uff0c<\/li>
  • OuterView\u901a\u8fc7\u4fee\u9970\u7b26\u201c.coordinateSpace(name: “Custom”)\u201d\u81ea\u5b9a\u4e49\u4e86\u5750\u6807\u7a7a\u95f4\uff0c.named()\u7684\uff080,0\uff09\u662fOuterView\u5de6\u4e0a\u89d2\uff0c\u4e0d\u5305\u62ecsafe area<\/strong>\uff0c<\/li>
  • .local\u7684\uff080,0\uff09\u662fInnerView\u5de6\u4e0a\u89d2<\/li><\/ul>\n\n\n\n
    \u4f60\u60f3\u4f7f\u7528\u54ea\u4e2a\u5750\u6807\u7a7a\u95f4\u53d6\u51b3\u4e8e\u4f60\u60f3\u56de\u7b54\u7684\u95ee\u9898:<\/p>\n\n\n\n
    • \u60f3\u77e5\u9053\u8fd9\u4e2a\u89c6\u56fe\u5728\u5c4f\u5e55\u4e0a\u7684\u4ec0\u4e48\u4f4d\u7f6e?\u4f7f\u7528\u5168\u5c40\u7a7a\u95f4\u3002<\/li>
    • \u60f3\u77e5\u9053\u8fd9\u4e2a\u89c6\u56fe\u76f8\u5bf9\u4e8e\u5b83\u7684\u7236\u89c6\u56fe\u7684\u4f4d\u7f6e\u5417?\u4f7f\u7528\u672c\u5730\u7a7a\u95f4\u3002<\/li>
    • \u5982\u4f55\u77e5\u9053\u8fd9\u4e2a\u89c6\u56fe\u76f8\u5bf9\u4e8e\u5176\u4ed6\u89c6\u56fe\u7684\u4f4d\u7f6e?\u4f7f\u7528\u81ea\u5b9a\u4e49\u7a7a\u95f4\u3002<\/li><\/ul>\n\n\n\n
      \u4e0b\u9762\u6211\u4eec\u4f7f\u7528GeometryReader\u753b\u4e00\u4e2a\u6bcf\u4e2a\u89d2\u6307\u5b9a\u4e0d\u540c\u7684\u534a\u5f84\u7684\u77e9\u5f62\u3002<\/p>\n\n\n\n
      \"\"<\/figure><\/div>\n\n\n\n
      struct ContentView: View {\n    var body: some View {\n        HStack {\n            Text(\"SwiftUI\")\n                .foregroundColor(.black).font(.title).padding(15)\n                .background(RoundedCorners(color: .green, tr: 30, bl: 30))\n            \/\/ .overlay(RoundedCorners(color: .green, tr: 30, bl: 30).opacity(0.5))\n            Text(\"Devler\")\n                .foregroundColor(.black).font(.title).padding(15)\n                .background(RoundedCorners(color: .blue, tl: 30, br: 30))\n            \/\/ .overlay(RoundedCorners(color: .blue, tl: 30, br: 30).opacity(0.5))\n\n        }.padding(20).border(Color.gray).shadow(radius: 3)\n    }\n}\n\nstruct RoundedCorners: View {\n    var color: Color = .black\n    var tl: CGFloat = 0.0\n    var tr: CGFloat = 0.0\n    var bl: CGFloat = 0.0\n    var br: 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                \/\/ We make sure the redius does not exceed the bounds dimensions\n                let tr = min(min(self.tr, h \/ 2), w \/ 2)\n                let tl = min(min(self.tl, h \/ 2), w \/ 2)\n                let bl = min(min(self.bl, h \/ 2), w \/ 2)\n                let br = min(min(self.br, 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","protected":false},"excerpt":{"rendered":"
      GeometryReader\u662f\u4e00\u4e2a\u5bb9\u5668\u89c6\u56fe\uff0c\u6839\u636e\u5176\u81ea\u8eab\u5927\u5c0f\u548c\u5750\u6807\u7a7a\u95f4\u5b9a\u4e49\u5176\u5185\u5bb9\u3002 \u5982\u679c\u4f60\u60f3\u8981\u81ea\u5b9a\u4e49\u7ed8\u5236\u4e00\u4e2a\u77e9\u5f62 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/4566"}],"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=4566"}],"version-history":[{"count":2,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/4566\/revisions"}],"predecessor-version":[{"id":4572,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/4566\/revisions\/4572"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}