SwiftUI TabView With Full Screen Background Color Ignoring Safe Area
import SwiftUI | |
struct ContentView: View { | |
@State private var currentIndex = 0 | |
private let colors: [Color] = [.red, .white, .blue, .green, .yellow] | |
private var whiteIsSelected: Bool { | |
colors[currentIndex] == .white | |
} | |
var body: some View { | |
TabView(selection: $currentIndex.animation()) { | |
ForEach(0..<colors.count) { index in | |
Text("Page \(index + 1)") | |
.foregroundColor(whiteIsSelected ? .black : .white) | |
.font(.title) | |
.tag(index) | |
} | |
} | |
.background( | |
colors[currentIndex].edgesIgnoringSafeArea(.all) | |
) | |
.tabViewStyle( | |
PageTabViewStyle(indexDisplayMode: .always) | |
) | |
.indexViewStyle( | |
// need white to have a background otherwise the page indiators won't be visible | |
PageIndexViewStyle(backgroundDisplayMode: whiteIsSelected ? .always : .automatic) | |
) | |
} | |
} | |
struct ContentView_Previews: PreviewProvider { | |
static var previews: some View { | |
ContentView() | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
Added the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Gif of it in action: https://imgur.com/S1ly9Fk