SwiftUIGradient使Spacer無用-有解無憂

我正在創建一個帶有背景漸變的居中卡片，我希望高度與內容一致，如下所示：

Swift UI Gradient 使 Spacer 無用

問題是當我在卡片內部使用漸變組件時，因為卡片高度占用了可用空間，而忽略了 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")
        }
    }
}

Swift UI Gradient 使 Spacer 無用漸變的結果是一張全高的卡片，但我需要像第一張圖片一樣具有“自動”的高度

uj5u.com熱心網友回復：

而不是ZStackuse background，比如

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

ZStack擴展到最大視圖（這是 Gradient，因為它沒有自己的大小并占用所有可用空間），而backgroundoroverlay適合目標視圖的大小（content在您的情況下）。

另見https://stackoverflow.com/a/63446622/12299030

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/401292.html

標籤：迅速 iPhone 代码迅捷

上一篇：np.random.rand以某種方式產生大于1的浮點數

下一篇：如何在SwiftUI中反序列化嵌套的JSON物件