blocks|key|1792115|text|更新和泛化了@arsenius代码。现在，您可以轻松地绑定父视图的状态变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1792116|struct+ChildSizeReader<Content:+View>:+View+{
++++@Binding+var+size:+CGSize
++++let+content:+()+->+Content
++++var+body:+some+View+{
++++++++ZStack+{
++++++++++++content()
++++++++++++++++.background(
++++++++++++++++++++GeometryReader+{+proxy+in
++++++++++++++++++++++++Color.clear
++++++++++++++++++++++++++++.preference(key:+SizePreferenceKey.self,+value:+proxy.size)
++++++++++++++++++++}
++++++++++++++++)
++++++++}
++++++++.onPreferenceChange(SizePreferenceKey.self)+{+preferences+in
++++++++++++self.size+=+preferences
++++++++}
++++}
}

struct+SizePreferenceKey:+PreferenceKey+{
++++typealias+Value+=+CGSize
++++static+var+defaultValue:+Value+=+.zero

++++static+func+reduce(value+_:+inout+Value,+nextValue:+()+->+Value)+{
++++++++_+=+nextValue()
++++}
}|code-block|syntax|javascript|1792117|用法：|1792118|struct+ChildSizeReaderExample:+View+{
++++@State+var+textSize:+CGSize+=+.zero
++++var+body:+some+View+{
++++++++VStack+{
++++++++++++ChildSizeReader(size:+$textSize)+{
++++++++++++++++Text("Hello+I+am+some+arbitrary+text.")
++++++++++++}
++++++++++++Text("My+size+is+\(textSize.debugDescription)!")
++++++++}
++++}
}|1792119|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Updated and generalized @arsenius code. Now you can easily bind a parent view's state variable.

<pre><code>struct ChildSizeReader&lt;Content: View&gt;: View {
 @Binding var size: CGSize
 let content: () -&gt; Content
 var body: some View {
 ZStack {
 content()
 .background(
 GeometryReader { proxy in
 Color.clear
 .preference(key: SizePreferenceKey.self, value: proxy.size)
 }
 )
 }
 .onPreferenceChange(SizePreferenceKey.self) { preferences in
 self.size = preferences
 }
 }
}

struct SizePreferenceKey: PreferenceKey {
 typealias Value = CGSize
 static var defaultValue: Value = .zero

 static func reduce(value _: inout Value, nextValue: () -&gt; Value) {
 _ = nextValue()
 }
}
</code></pre>

Usage:

<pre><code>struct ChildSizeReaderExample: View {
 @State var textSize: CGSize = .zero
 var body: some View {
 VStack {
 ChildSizeReader(size: $textSize) {
 Text("Hello I am some arbitrary text.")
 }
 Text("My size is \(textSize.debugDescription)!")
 }
 }
}
</code></pre>

blocks|key|1577116|text|以下是公认答案的一个可重用变体：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1577117|public+protocol+CGSizePreferenceKey:+PreferenceKey+where+Value+==+CGSize+{}

public+extension+CGSizePreferenceKey+{
++++static+func+reduce(value+_:+inout+CGSize,+nextValue:+()+->+CGSize)+{
++++++++_+=+nextValue()
++++}
}

public+extension+View+{
++++func+onSizeChanged<Key:+CGSizePreferenceKey>(
++++++++_+key:+Key.Type,
++++++++perform+action:+@escaping+(CGSize)+->+Void)+->+some+View
++++{
++++++++self.background(GeometryReader+{+geo+in
++++++++++++Color.clear
++++++++++++++++.preference(key:+Key.self,+value:+geo.size)
++++++++})
++++++++.onPreferenceChange(key)+{+value+in
++++++++++++action(value)
++++++++}
++++}
}|code-block|syntax|javascript|1577118|用法：|1577119|struct+Example:+View+{
++++var+body:+some+View+{
++++++++Text("Hello,+World!")
++++++++++++.onSizeChanged(ExampleViewSize.self)+{+size+in
++++++++++++++++print("size:+\(size)")
++++++++++++}
++++}
}

struct+ExampleViewSize:+CGSizePreferenceKey+{
++++static+var+defaultValue:+CGSize+=+.zero
}|1577120|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here's a reusable variant of the accepted answer:
<pre class="lang-swift prettyprint-override"><code>public protocol CGSizePreferenceKey: PreferenceKey where Value == CGSize {}

public extension CGSizePreferenceKey {
 static func reduce(value _: inout CGSize, nextValue: () -&gt; CGSize) {
 _ = nextValue()
 }
}

public extension View {
 func onSizeChanged&lt;Key: CGSizePreferenceKey&gt;(
 _ key: Key.Type,
 perform action: @escaping (CGSize) -&gt; Void) -&gt; some View
 {
 self.background(GeometryReader { geo in
 Color.clear
 .preference(key: Key.self, value: geo.size)
 })
 .onPreferenceChange(key) { value in
 action(value)
 }
 }
}
</code></pre>
Usage:
<pre class="lang-swift prettyprint-override"><code>struct Example: View {
 var body: some View {
 Text(&quot;Hello, World!&quot;)
 .onSizeChanged(ExampleViewSize.self) { size in
 print(&quot;size: \(size)&quot;)
 }
 }
}

struct ExampleViewSize: CGSizePreferenceKey {
 static var defaultValue: CGSize = .zero
}
</code></pre>

blocks|key|1577122|text|//+SizeModifier.swift
import+Foundation
import+SwiftUI

struct+SizePreferenceKey:+PreferenceKey+{
++++static+var+defaultValue:+CGSize+=+.zero
++++
++++static+func+reduce(value:+inout+CGSize,+nextValue:+()+->+CGSize)+{
++++++++value+=+nextValue()
++++}
}

struct+SizeModifer:+ViewModifier+{
++++
++++private+var+sizeView:+some+View+{
++++++++GeometryReader+{+geometry+in
++++++++++++Color.clear.preference(key:+SizePreferenceKey.self,+value:+geometry.size)
++++++++}
++++}
++++
++++func+body(content:+Content)+->+some+View+{
++++++++content
++++++++++++.background(sizeView)
++++}
++++
}

extension+View+{
++++func+onSizeChanged(_+handler:+@escaping+(CGSize)+->+Void)+->+some+View+{
++++++++self
++++++++++++.modifier(SizeModifer())
++++++++++++.onPreferenceChange(SizePreferenceKey.self,+perform:+{+value+in
++++++++++++++++handler(value)
++++++++++++})
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1577123|下面是它的使用方法：|unstyled|1577124|//+ContentView
import+SwiftUI

struct+ContentView:+View+{
++++
++++@State+private+var+childSize:+CGSize+=+.zero
++++
++++var+body:+some+View+{
++++++++Text("My+size+\(childSize.width)x\(childSize.height)")
++++++++++++.padding()
++++++++++++.onSizeChanged+{+size+in
++++++++++++++++childSize+=+size
++++++++++++}
++++}
}

struct+ContentView_Previews:+PreviewProvider+{
++++static+var+previews:+some+View+{
++++++++ContentView()
++++}
}|1577125|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>// SizeModifier.swift
import Foundation
import SwiftUI

struct SizePreferenceKey: PreferenceKey {
 static var defaultValue: CGSize = .zero
 
 static func reduce(value: inout CGSize, nextValue: () -&gt; CGSize) {
 value = nextValue()
 }
}

struct SizeModifer: ViewModifier {
 
 private var sizeView: some View {
 GeometryReader { geometry in
 Color.clear.preference(key: SizePreferenceKey.self, value: geometry.size)
 }
 }
 
 func body(content: Content) -&gt; some View {
 content
 .background(sizeView)
 }
 
}

extension View {
 func onSizeChanged(_ handler: @escaping (CGSize) -&gt; Void) -&gt; some View {
 self
 .modifier(SizeModifer())
 .onPreferenceChange(SizePreferenceKey.self, perform: { value in
 handler(value)
 })
 }
}
</code></pre>
Here is how to use it:
<pre><code>// ContentView
import SwiftUI

struct ContentView: View {
 
 @State private var childSize: CGSize = .zero
 
 var body: some View {
 Text(&quot;My size \(childSize.width)x\(childSize.height)&quot;)
 .padding()
 .onSizeChanged { size in
 childSize = size
 }
 }
}

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
 ContentView()
 }
}
</code></pre>

blocks|key|1577309|text|将GeometryReader添加到视图的背景并测量Color.clear的大小是可行的，但在我看来似乎很麻烦。我发现了不同的方法，我想分享。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1577310|struct+SomeView:+View+{

++++@State
++++var+bounds:+CGRect+=+.zero

++++var+body:+some+View+{
++++++++GeometryReader+{+geometry+in
++++++++++++Text("Hello+Stack+Overflow")
++++++++++++++++.anchorPreference(key:+BoundsPreferenceKey.self,+value:+.bounds)+{+geometry[$0]+}
++++++++++++++++.onPreferenceChange(BoundsPreferenceKey.self)+{+bounds+=+$0+}
++++++++}
++++}

}

private+struct+BoundsPreferenceKey:+PreferenceKey+{

++++static+var+defaultValue:+CGRect+=+.zero

++++static+func+reduce(value:+inout+CGRect,+nextValue:+()+->+CGRect)+{
++++++++value+=+nextValue()
++++}

}|code-block|syntax|javascript|1577311|在这种方法中，您使用GeometryReader包围子视图，并使用锚定首选项来获取包含视图在GeometryReader坐标中的位置和大小的CGRect。|1577312|该解决方案的一个潜在缺点是，如果您没有计划，GeometryReader可能会弄乱您的布局，因为它会扩展到占用所有可用空间。但是，如果出于布局目的需要子视图大小，则很可能已经使用GeometryReader来测量父视图大小。|1577313|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Adding GeometryReader to the background of a view and measuring size of Color.clear works but seems hacky to me. I have found different approach that I would like to share.
<pre><code>struct SomeView: View {

 @State
 var bounds: CGRect = .zero

 var body: some View {
 GeometryReader { geometry in
 Text(&quot;Hello Stack Overflow&quot;)
 .anchorPreference(key: BoundsPreferenceKey.self, value: .bounds) { geometry[$0] }
 .onPreferenceChange(BoundsPreferenceKey.self) { bounds = $0 }
 }
 }

}

private struct BoundsPreferenceKey: PreferenceKey {

 static var defaultValue: CGRect = .zero

 static func reduce(value: inout CGRect, nextValue: () -&gt; CGRect) {
 value = nextValue()
 }

}
</code></pre>
In this approach you surround child view with GeometryReader and use anchor preference to get CGRect that contains position and size of the view in GeometryReader coordinates.
One potential disadvantage of the solution is that GeometryReader can mess up your layout if you haven't plan for it, as it will expand to take all available space. However if you need child view size for layout purposes there is a good chance you already use GeometryReader to measure parent view size.

Is there any way to get the size of a child view in SwiftUI?

I'm basically looking to do the UIKit equivalent of:

<pre class="lang-swift prettyprint-override"><code>self.child.frame.origin.x -= self.child.intrinsicContentSize.width/2.0
</code></pre>

I don't think a GeometryReader would work since that returns the available size in the parent.

[Edit] I've found it's possible to get and save the dimensions using <code>.alignmentGuide(_, computeValue:)</code> though that's definitely a hack.

<pre class="lang-swift prettyprint-override"><code>LessonSliderText(text: self.textForProgress(self.progress), color: self.completedColor)
 .alignmentGuide(HorizontalAlignment.leading) { (dimensions) -&gt; Length in
 self.textSize = CGSize(width: dimensions.width, height: dimensions.height)
 return 0
 }
 .offset(x: self.width*self.currentPercentage - self.textSize.width / 2.0)
 .offset(y: -self.textSize.height/2.0)
 .animation(nil)
 .opacity(self.isDragging ? 1.0 : 0.0)
 .animation(.basic())
</code></pre>

<a href="https://i.stack.imgur.com/LmgDl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LmgDl.png" alt="What I&#39;m trying to accomplish"></a>

SwiftUI - Get size of child?

有没有办法在SwiftUI中得到一个子视图的大小？我基本上是在寻找UIKit的等价物，比如：self.child.frame.origin.x -= self.child.intrinsicContentSize.width/2.0我不认为GeometryReader会工作，因为它返回父对象中的可用大小。编辑我发现可以...

问SwiftUI -获取孩子的大小？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SwiftUI -获取孩子的大小？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SwiftUI -获取孩子的大小？
EN