为什么在swiftUI中颜色视图是透明的答案

【问题标题】：why is Color view transparent in swiftUI为什么在swiftUI中颜色视图是透明的
【发布时间】：2021-02-28 21:45:05
【问题描述】：

我有这张图片中的卡片要构建，这是代码：

struct ArticleCard: View {
    var article: Article

    var body: some View {
        ZStack {
            Color.white
                .border(Color(red: 0, green: 0, blue: 0, opacity: 0.2))
                .shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.2), radius: 0.0, x: 5, y: 5)
        
            VStack{
                Text(article.title)
                    .padding(.top, 5)
                    .padding(.leading)
                    .padding(.trailing)
                    .font(.title2)
              
                Image(article.coverUrl).resizable()
                    .frame(height: 200)
                    .padding(.leading)
                    .padding(.trailing)
            
                Text(article.title)
                    .padding(.leading)
                    .padding(.trailing)
                    .padding(.bottom)
            }
        }
    }
}

在 ZStack 中，我将 Color.white 放在那里作为卡片的背景，并给这个颜色视图一个阴影，但颜色似乎是透明的，因此我在边框的顶部和左侧有不需要的线条，我该如何摆脱它们？

【问题讨论】：

标签： swiftui

【解决方案1】：

你在错误的地方使用了边框和阴影，试试这个：

PS：没有理由使用 Color(red: 0, green: 0, blue: 0, opacity: 0.2) 你可以这样使用：Color.black.opacity( 0.2)

import SwiftUI

struct ContentView: View {
    var body: some View {

        ZStack {
            
            Color.white
            
            VStack {
                
                Text("article.title")
                    .padding()
                
                Image(systemName: "star")
                    .resizable()
                    .scaledToFit()

                Text("article.title")
                    .padding()
                
            }
        }
        .frame(width: 300, height: 300, alignment: .center)
        .border(Color(red: 0, green: 0, blue: 0, opacity: 0.2))
        .compositingGroup()
        .shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.2), radius: 0.0, x: 5, y: 5)

    }
}

我重构了您的代码以获得更好和更少的代码，您可以在应用程序中使用图像而不是文本。

import SwiftUI

struct ContentView: View {
    var body: some View {

        VStack {
            
            Text("your custom Text")
                .padding()
            
            Text("?")
                .font(Font.system(size: 150))

            Text("your custom Text")
                .padding()
            
        }
        .frame(width: 300, height: 300, alignment: .center)
        .background(Color.white)
        .border(Color.black.opacity(0.2))
        .compositingGroup()
        .shadow(color: Color.black.opacity(0.2), radius: 0.0, x: 5, y: 5)
        
    }
}

【讨论】：