如何为 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([=10=].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([=11=].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

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

How to add a drop shadow for a SwiftUI List's Section?

listview

uitableview

ios

swift

swiftui