删除阴影 SwiftUI 旁边的空格

Posted 2023-03-06

【中文标题】删除阴影 SwiftUI 旁边的空格

【英文标题】：Remove whitespace next to shadow SwiftUI

【发布时间】：2022-01-10 15:54:09

【问题描述】：

就像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) 以解决此问题。

【参考方案1】：

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

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

【讨论】：

这在这个例子中绝对有效。问题是这是一个最小的可重现示例，在我的实际代码中它仍然无法正常工作。如果我无法弄清楚，我将使用不同的最小示例编辑问题以捕获其他问题

事实证明，我的应用程序中的问题是由默认 minLength 处的折叠 Spacer 引起的。不过感谢您的帮助！