如何为 SwiftUI 列表的部分添加阴影？

Question

我有一个 SwiftUI 视图，它在List视图中使用Section视图。 我要做的是在该部分周围添加一些阴影，以便该部分的内容与主视图的背景明显分开。 但是，无论我尝试过什么并在 Google 上搜索过，我都无法在整个部分中显示阴影。 作为参考，下面的第一张图片是一个模型，是我试图让我的代码看起来的样子。 第二张图片是我的 SwiftUI 视图的夸张版本，以帮助我调试正在发生的事情。 如您所知，没有显示阴影。

最后，以下是我的代码。 我已经尝试了我能找到的一切，包括更新 UITableView 的Appearance ； 但是，我认为我正在更新错误的内容。 任何帮助，将不胜感激！ 谢谢！

代码：

struct CatalogView: View {
    @ObservedObject var viewModel: CatalogViewModel

    init(viewModel: CatalogViewModel) {
        self.viewModel = viewModel
    
        UITableView.appearance().backgroundColor = UIColor.cyan
        UITableView.appearance().layer.masksToBounds = false
        UITableView.appearance().layer.shadowColor = UIColor.red.cgColor
        UITableView.appearance().layer.shadowOpacity = 1
        UITableView.appearance().layer.shadowRadius = 100
        UITableView.appearance().layer.shadowOffset = .init(width: 10, height: 10)
    }

    var body: some View {
        NavigationView {
            List {
                Section(LocalizedStringKey("CatalogView.Program.Catalog")) {
                    ForEach(viewModel.programs) {
                        Text($0.name)
                    }
                }
                .shadow(color: Color.red, radius: 25, x: 0, y: 0)
                .headerProminence(.increased)
            }
            .navigationTitle(viewModel.navigationTitle)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    PlusButton {
                        print("Hi")
                    }
                }
            }
        }
        .navigationViewStyle(.stack)
    }
}

Answer 1

试试这个代码

struct ContentView: View {
init() { UITableView.appearance().backgroundColor = UIColor.clear }

var body: some View {
    NavigationView {
        List {
            Section(header: Text("Important tasks")) {
                Text("Hello World")
                Text("Hello World")
                Text("Hello World")
            }
            Section(header: Text("Main tasks")) {
                Text("Hello World")
                Text("Hello World")
                Text("Hello World")
            }
            
        }
        .padding()
        .shadow(color: Color.red, radius: 10, x: 5, y: 5)
        .background(Color(UIColor.systemGray4).ignoresSafeArea())
        .navigationTitle("Menu")
    }
}

}

Answer 2

由于UIKit ，您必须清除UITableView的背景颜色。

init(viewModel: CatalogViewModel) {
        self.viewModel = viewModel
    
        UITableView.appearance().backgroundColor = UIColor.clear
        ....................
}

将您的阴影代码添加到List之外而不是Section之外，然后添加背景颜色以查看

List {
       Section(LocalizedStringKey("CatalogView.Program.Catalog")) {
         ForEach(viewModel.programs) {
            Text($0.name)
         }
       }
       .headerProminence(.increased)
}
.shadow(color: Color.red, radius: 25, x: 0, y: 0) //=====> add this line for shadow 
.background(Color(UIColor.cyan).ignoresSafeArea()) //=====> add this line for background color