删除阴影 SwiftUI 旁边的空格

Question

就像this 问题一样，我想在底部标签栏上方有一个阴影，所以我以类似的方式创建了一个自定义的。然而，在该示例和我的示例（如下所示）中，阴影正上方有一条不受欢迎的空白，阻止它直接在滚动视图顶部分层。

注意“45”是如何被空白而不是阴影覆盖的。有什么办法可以去掉空格，让我的影子直接覆盖滚动视图？

示例代码：

struct ContentView: View {
    @State var selectedTab: Tab = .events

    var body: some View {
        VStack {
            ScrollView {
                ForEach(0..<100, id: \.self) { index in
                    HStack {
                        Spacer()
                        Text("\(index)")
                        Spacer()
                    }

                }
            }

            ZStack {
                Color.white
                    .frame(height: 30)
                    .shadow(color: .gray.opacity(0.2), radius: 1, x: 0, y: -2)

                HStack {
                    BottomTabBarItem(name: "square.stack", selectedName: "square.stack.fill", directedTab: .events, selectedTab: $selectedTab)
                        .padding(.leading, 20)
                    Spacer()
                    BottomTabBarItem(name: "person.3", selectedName: "person.3.fill", directedTab: .groups, selectedTab: $selectedTab)
                    Spacer()
                    BottomTabBarItem(name: "magnifyingglass", selectedName: "magnifyingglass", directedTab: .search, selectedTab: $selectedTab)
                    Spacer()
                    BottomTabBarItem(name: "bell", selectedName: "bell.fill", directedTab: .requests, selectedTab: $selectedTab)
                    Spacer()
                    BottomTabBarItem(name: "person", selectedName: "person.fill", directedTab: .profile, selectedTab: $selectedTab)
                        .padding(.trailing, 20)
                }
            }
        }
    }
}

struct BottomTabBarItem: View {
    let name: String
    let selectedName: String

    let directedTab: Tab
    @Binding var selectedTab: Tab

    private func getWeight() -> Font.Weight {
        if name != "magnifyingglass" {
            return .light
        } else {
            if selectedTab == directedTab {
                return .bold
            } else {
                return .light
            }
        }
     }

     var body: some View {
        Button {
            selectedTab = directedTab
        } label: {
            Image(systemName: selectedTab == directedTab ? selectedName: name)
                .font(.system(size: 20, weight: getWeight()))
                .foregroundColor(.black)
                .opacity(0.85)
        }
    }
}

enum Tab {
    case events
    case requests
    case profile
    case utilities
    case groups
    case search
}

编辑：

下面的答案解决了这个最小示例的问题，但是 对于我的实际应用程序代码，问题是由于ScrollView 和TabBar 之间的Spacer。折叠时，Spacer 仍然有一个最小长度，它在阴影的正上方显示为空白。我将Spacer 更改为Spacer(minLength:0) 以解决此问题。

Answer 1

在您的情况下，只需要零间距（使用 Xcode 13 / iOS 15 测试）

var body: some View {
    VStack(spacing: 0) {      // << here !!
        ScrollView {
            ForEach(0..<100, id: \.self) { index in