History
Loading...
Learn a little bit every day
Learn a little bit every day
Loading...
September 7, 2025
.safeAreaInset() instead of .ignoresSafeArea() when you want content to flow into safe areas while maintaining proper spacing. This modifier creates a custom safe area boundary that other views respect, perfect for floating toolbars or custom tab bars.Using safeAreaInset creates a floating toolbar that scrollable content automatically avoids, while the toolbar itself extends into the safe area. This maintains content visibility without manual padding calculations.
struct ContentView: View {
var body: some View {
ScrollView {
LazyVStack(spacing: 16) {
ForEach(0..<20) { index in
RoundedRectangle(cornerRadius: 12)
.fill(Color.blue.opacity(0.3))
.frame(height: 80)
.padding(.horizontal)
}
}
}
.safeAreaInset(edge: .bottom) {
HStack {
Button("Action 1") { }
Spacer()
Button("Action 2") { }
}
.padding()
.background(.ultraThinMaterial)
}
}
}This approach provides automatic content inset adjustment, maintains visual hierarchy, and handles different device safe areas gracefully without requiring device-specific layout code or complex geometry calculations.