Add a safe area to List after hiding the navigation bar in SwiftUI

Question

I want to customize the navigation bar, but the refresh control is covered by the custom navigation bar after hiding the navigation. How can I adjust the position of the refresh control?


import SwiftUI

struct ContentView: View {
    
    
    var body: some View {
        NavigationView {
            HomeNavigationBarView {
                List {
                    NavigationLink {
                        EmptyView()
                    } label: {
                        Text("Hello, world!")
                    }
                }
                .listStyle(.insetGrouped)
                .refreshable {
                    
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Here is my custom navbar


struct HomeNavigationBarView<Content: View>: View {
    
    let content: () -> Content
    
    var body: some View {
        ZStack(alignment: .top) {
            content()
            HStack {
                Image("logo")
                    .resizable()
                    .frame(width: 44, height: 44)
            }
            .frame(height: insetTop(), alignment: .bottom)
            .frame(maxWidth: .infinity)
            .background(.red.opacity(0.1))
        }
        .navigationBarHidden(true)
    }
}

private func insetTop() -> CGFloat {
    
    let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
    let window = windowScene?.windows.first
    return window?.safeAreaInsets.top ?? 0       // 20或47
}

score 0 · Answer 1 · answered Dec 12 '22 at 13:18

Padding should be there in List .padding(.top, insetTop()) to fix position of refresh control.

struct ContentView: View {

    var body: some View {
        NavigationView {
            HomeNavigationBarView {
                List {
                    NavigationLink {
                        EmptyView()
                    } label: {
                        Text("Hello, world!")
                    }
                }
                .padding(.top, insetTop())
                .refreshable {
                }
            }
        }
    }
}

It's not a simple padding problem, I updated the answer – gaohomway Dec 14 '22 at 06:49 — gaohomway, Dec 14 '22 at 06:49

score 0 · Accepted Answer · answered Dec 14 '22 at 06:51

0

The way of adding safe area in iOS15+ perfectly solves this problem


List {

}
.safeAreaInset(edge: .top, spacing: 0) {
    Rectangle()
        .fill(.clear)
        .frame(height: insetTop() + 44)
}

answered Dec 14 '22 at 06:51

gaohomway

2,132
1
20
37

Add a safe area to List after hiding the navigation bar in SwiftUI

2 Answers2