Swiftui 将 VStack 子项高度调整为内容高度

Question

我有一个带有三个孩子的 VStack。这些孩子中的每一个都有一个 HStack，左边有一些文本和一个空白区域。这是预览的屏幕截图，其中 VStack 子项周围带有突出显示的边框，每个 HStack 周围都有突出显示的边框。

如何将每个 VStack 子项设置为缩小到 HStack 的高度并消除底部的空白空间？现在问题似乎是由默认情况下 VStack 填充整个屏幕并将每个孩子设置为相等的高度引起的。

当前代码：

import Foundation
import SwiftUI


struct NameAndConnection: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text(data.name)
               .font(.headline)
               .fontWeight(.semibold)
               .foregroundColor(Color.black)
               .frame(alignment: .leading)
   
            Text(data.connection)
               .font(.callout)
               .fontWeight(.medium)
               .foregroundColor(Color.gray)
               .frame(alignment: .leading)
        }
    }
}

struct Description: View {
    var body: some View {
        Text(data.description)
    }
}

struct Post: View {
    var body: some View {
        GeometryReader { geo in
            HStack(alignment: .top, spacing: 0) {
                Spacer()
                VStack(alignment: .leading) {
                    NameAndConnection()
                    Description()
                        .padding(.top, 1.0)
                }
                .frame(width: geo.size.width * 0.75)
            }
        }
    }
}



struct PostView: View {
    var body: some View {
        GeometryReader { geo in
            VStack() {
                Post()
                Post()
                Post()
            }
        }
    }
}

Answer 1

GeometryReader 将占用所有可用空间。一般而言，尽量少用GeometryReader 并针对不同的屏幕尺寸提出其他更灵活的解决方案，这被广泛认为是一种好的做法。

当您必须使用它时，通常测量View 的背景会很有帮助——这样，View 本身就不会像GeometryReader 在前景中那样增长。我从https://stackoverflow.com/a/59733037/560942借了GeometryReader

删除GeometryReaders 后，您可以使用Spacer 将另一个VStacks 推到屏幕顶部。

struct GeometryGetter: View {
    @Binding var rect: CGRect

    var body: some View {
        GeometryReader { (g) -> Path in
            print("width: \(g.size.width), height: \(g.size.height)")
            DispatchQueue.main.async {
                self.rect = g.frame(in: .global)
            }
            return Path() // could be some other dummy view
        }
    }
}

struct Post: View {
    @State private var rect1: CGRect = CGRect()
    
    var body: some View {
        HStack(alignment: .top, spacing: 0) {
            Spacer()
            VStack(alignment: .leading) {
                NameAndConnection()
                Description()
                    .padding(.top, 1.0)
            }.frame(width: rect1.width * 0.75)
        }
        .background(GeometryGetter(rect: $rect1))
        .border(Color.green)
    }
}



struct ContentView: View {
    var body: some View {
            VStack() {
                Post()
                Post()
                Post()
                Spacer()
            }
    }
}