如何使视图与其内容一样高

Question

我怎样才能使视图具有最小尺寸、最大尺寸和介于两者之间的垂直 space 消耗内容所需的数量？

struct SubView<Content: View>: View {
    
    private let content: () -> Content
    
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }
    
    var body: some View {
        VStack(alignment: .leading) {
            
            Text("Text")
                .padding([.leading, .trailing])
            
            ZStack {
                Color(.red)
                self.content()
            }
            .clipShape(RoundedRectangle(cornerRadius: 20))
        }
        .padding()
    }
}

struct SubView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            SubView {
                Text("A")
            }
            SubView {
                VStack {
                    Text("A")
                    Text("B")
                    Text("C")
                    Text("D")
                }
            }
        }
    }
}

在上面的示例中，两个视图的大小都已调整为最大大小。但我想让两个矩形都采用其内容的大小，如下所示：

到目前为止，我只知道如何使用 frame 修改器设置固定高度或无限 maxHeight，但这些都不会带来所需的结果。

Answer 1

您可以将 Color.red 移到后台（而不是 ZStack）：

struct SubView<Content: View>: View {
    // ...

    var body: some View {
        VStack(alignment: .leading) {
            Text("Text")
                .padding([.leading, .trailing])
            
            self.content()
                .padding()
                .frame(maxWidth: .infinity)
                .background(
                    RoundedRectangle(cornerRadius: 20)
                        .fill(Color.red)
                )
                .padding([.leading, .trailing])
        }
        .padding()
    }
}

如何使视图与其内容一样高

How to make a view as high as its content

layout

swift

swiftui