如何为SwiftUI List的Section添加下拉阴影?

clj7thdc  于 2023-05-05  发布在  Swift
关注(0)|答案(2)|浏览(148)

我有一个SwiftUI视图,它在List视图中使用了Section视图。我想做的是在部分周围添加一些阴影,以便部分的内容与主视图的背景清楚地分开。然而,无论我尝试和谷歌,我不能得到一个下拉阴影显示周围的整个部分。作为参考,下面的第一张图片是一个模型,也是我试图让我的代码看起来像什么。第二张图片是我的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)
    }
}
ztigrdn8

ztigrdn81#

试试这个代码

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")
    }
}

}

b09cbbtk

b09cbbtk2#

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

相关问题