Swift UI 渐变使 Spacer 无用

Question

我正在创建一个带有背景渐变的居中卡片，我希望高度与内容一致，如下所示：

问题是当我在卡片内部使用渐变组件时，因为卡片高度占用了自由 space 并且它忽略了 VStack 外部的 Spacer

import SwiftUI

struct TunedModable<Content: View>: View {
    @ViewBuilder var content:() ->  Content
    
    var body: some View {
        
            VStack {
                Spacer()
                
                ZStack {
                    LinearGradient(
                        gradient: Gradient(
                            colors: [.gray, .green]
                        ),
                        startPoint: .bottom,
                        endPoint: .top
                    )
                    VStack {
                        content()
                    }
                }
                .frame(maxWidth: .infinity)
                .background()
                .clipShape(
                    RoundedRectangle(cornerRadius: 25.0, style: .continuous)
                )
                
                
                Spacer()
                Text("Testing").foregroundColor(.white)
            }.frame(minWidth:0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).padding().background(.indigo)
        }
    
}

struct TunedModable_Previews: PreviewProvider {
    static var previews: some View {
        TunedModable {
            Text("Hello")
        }
    }
}

带有渐变的结果是一张全高的卡片，但我需要像第一张图片一样具有“自动”的高度

Answer 1

而不是 ZStack 使用 background，比如

 content()
   .background(
      LinearGradient(
        gradient: Gradient(
            colors: [.gray, .green]
        ),
        startPoint: .bottom,
        endPoint: .top
    ))

ZStack 扩展到最大视图（这是渐变，因为它没有自己的大小并消耗所有可用的 space），而 background 或 overlay 适合目标视图的大小（content 在你的情况下）。

另见

Swift UI 渐变使 Spacer 无用

Swift UI Gradient make Spacer useless

iphone

xcode

swift

swiftui