Hello,
When I run the following view on my iPhone with VoiceOver enabled, I encounter the following problem with the VoiceOver cursor.
struct ContentView: View {
var body: some View {
VStack {
TabView {
ForEach(1..<6) { index in
Button(
action: { },
label: {
ZStack {
GeometryReader { geo in
Image(systemName: "\(index).circle")
.resizable()
.scaledToFill()
.frame(width: geo.size.width)
.clipped()
}
}
}
)
.buttonStyle(PlainButtonStyle())
.padding([.bottom], 50)
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
.padding()
}
}
I move the VoiceOver cursor to the tabview dots for paging and swipe up with one finger to go to the next tab.
The tabview jumps to the next tab.
But when the VoiceOver cursor focuses the tabview,
the previous tab is shown again.
You can also see that the border of the VoiceOver cursor extends into the previous tab.
I suspect it has to do with the fact that despite the clipped modifier, the size of the image remains the same and extends into the previous tab.
How can I fix this?
Regards
Pawel
Post
Replies
Boosts
Views
Activity
Hello,
When I run the following view on my iPhone with VoiceOver enabled, I encounter an issue with the voiceover cursor when I perform the following steps:
Move the VoiceOver cursor to the tabview dots for paging.
Swipe up with one finger to go to the next tab.
--> Tabview moves to the next tab.
--> The VoiceOver cursor jumps up to the tab.
But instead of the actual tab the previous tab is shown in the tabview again.
You can also see that the border of the VoiceOver cursor extends into the previous tab.
I suspect it has to do with the fact that despite the clipped modifier, the size of the image remains the same and extends into the previous tab.
struct ContentView: View {
var body: some View {
VStack {
TabView {
ForEach(1..<6) { index in
Button(
action: { },
label: {
ZStack {
GeometryReader { geo in
Image(systemName: "\(index).circle")
.resizable()
.scaledToFill()
.frame(width: geo.size.width)
.clipped()
}
}
}
)
.buttonStyle(PlainButtonStyle())
.padding([.bottom], 50)
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
.padding()
}
}
How can I fix this?
Best regards
Pawel
Hello,
with the following setup the bottom toolbar on SubView disappears as soon as I navigate down to SubSubView and go back to SubView.
I tested this behavior on different simulators and my own device iPhone 12pro with Xcode 12.5.
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: SubView()) {
Text("Go to sub view")
.font(.largeTitle)
}
.navigationTitle("Content")
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct SubView: View {
var body: some View {
List {
NavigationLink(destination: SubSubView()) {
Text("Go to sub sub view")
}
}
.navigationTitle("Sub View")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .bottomBar) {
Button(action: {}, label: {
Text("Action")
})
}
}
}
}
struct SubSubView: View {
var body: some View {
Text("end of way")
.font(.largeTitle)
.navigationTitle("Sub Sub View")
.navigationBarTitleDisplayMode(.inline)
}
}
Regards
Pawel