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 本身不会像 {{1} } 在前台。我从 https://stackoverflow.com/a/59733037/560942

借用了 GeometryReader

删除 GeometryReader 后，您可以使用 GeometryReader 将其他 Spacer 推送到屏幕顶部。

VStack

Swift UI 将 VStack 子项高度调整为内容高度

1 个答案: