I have a simplest of codes, which doesn't work as expected:
struct ContentView: View {
#State private var showSheet = false
var body: some View {
VStack {
Button("Press to show details") {
showSheet = true
}
}
.fullScreenCover(isPresented: $showSheet) {
Color.black.opacity(showSheet ? 0.5 : 1)
}
}
}
I expect the sheet to appear semi-transparent after I press the button, but it is black. The value of showSheet is false in debugger
If I add a close button, and keep pressing the buttons - it fixes itself after the second try - that is: a second time the cover is shown as semi-transparent
VStack {
Button("Press to show details") {
showSheet = true
}
}
.fullScreenCover(isPresented: $showSheet) {
Color.black.opacity(showSheet ? 0.5 : 1)
.overlay(
Button("Press to show details") {
showSheet = false
}
)
}
If I add an observer it also fixes itself. I'm lost completely
VStack {
Button("Press to show details") {
showSheet = true
}
}
.fullScreenCover(isPresented: $showSheet) {
Color.red.opacity(showSheet ? 0.5 : 1)
}
.onChange(of: showSheet) { newValue in
print(newValue)
}
Related
I want to better understand binding data across view, so I made this demo app
First View - if isShowing is true, navigating to SecondView (binding value)
struct ParentView: View {
#State var isShowing = false
#State var value = 5
var body: some View {
NavigationView {
if value != 5 {
ThirdView(isShowing: $isShowing)
} else {
NavigationLink(isActive: $isShowing) {
SecondView(value: $value)
} label: {
Text("Go to second view")
}
}
}
}
}
Second view - updating ParentView value
struct SecondView: View {
#Binding var value: Int
#Environment(\.presentationMode) private var presentationMode
var body: some View {
VStack {
Button {
value = 5
presentationMode.wrappedValue.dismiss()
} label: {
Text("Return 5")
}
Button {
value = 1
presentationMode.wrappedValue.dismiss()
} label: {
Text("Return 1")
}
}
}
}
ThirdView - showing in FirstView in case value is not 5
struct ThirdView: View {
#Binding var isShowing: Bool
var body: some View {
ZStack {
Button {
isShowing.toggle()
} label: {
Text("Its a problem... Go to second view")
}
}
}
}
I tried to toggle isShowing in ThirdView so it can open SecondView to update value again.
But when button is clicked in ThirdView, it doesnt do anything.
The way you have things set up, it won't change. When value != 5, your `NavigationLink does not exist in the view. Instead, you want to trigger it programmatically like this:
struct ParentView: View {
#State var isShowing = false
#State var value = 5
var body: some View {
NavigationView {
VStack {
Text(value.description)
if value != 5 {
ThirdView(isShowing: $isShowing)
} else {
// Change out the NavigationLink for a button that sets isShowing.
Button {
isShowing = true
} label: {
Text("Go to second view")
}
}
}
// By placing it in the background, it is always available to be triggered.
.background(
NavigationLink(isActive: $isShowing) {
SecondView(value: $value)
} label: {
EmptyView()
}
)
}
}
}
Lastly, you don't need to toggle isShowing in ThirdView. You are better off either dismissing the view or setting the value to false. Otherwise, you can get confused what it is doing when you are in your various views.
I have an image that I apply a 360 rotation on to have the effect of loading/spinning. It works fine until I add Text underneath, the image still spins but it bounces vertically.
Here is code to see it:
import SwiftUI
#main
struct SpinnerApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ContentView: View {
#State var isAnimating = false
#State var text = ""
var animation: Animation {
Animation.linear(duration: 3.0)
.repeatForever(autoreverses: false)
}
var body: some View {
HStack {
Spacer()
VStack {
Circle()
.foregroundColor(Color.orange)
.frame(height: 100)
.rotationEffect(Angle(degrees: self.isAnimating ? 360 : 0.0))
.animation(self.isAnimating ? animation : .default)
.onAppear { self.isAnimating = true }
.onDisappear { self.isAnimating = false }
if self.text != "" {
Text(self.text)
}
}
Spacer()
}
.background(Color.gray)
.onAppear(perform: {
DispatchQueue.main.asyncAfter(deadline: .now()+4, execute: {
self.text = "Test"
})
})
}
}
I replaced the image with a Circle so you won't be able to see the spinning/animation, but you can see the circle bouncing vertically once we set the text. If the text was there from the beginning and it didn't change then all is fine. The issue only happens if the text is added later or if it got updated at some point.
Is there a way to fix this?
Just link animation to dependent state value, like
//... other code
.rotationEffect(Angle(degrees: self.isAnimating ? 360 : 0.0))
.animation(self.isAnimating ? animation : .default, value: isAnimating) // << here !!
//... other code
Try using explicit animations instead, with withAnimation. When you use .animation(), SwiftUI sometimes tries to animate the position of your views too.
struct ContentView: View {
#State var isAnimating = false
#State var text = ""
var animation: Animation {
Animation.linear(duration: 3.0)
.repeatForever(autoreverses: false)
}
var body: some View {
HStack {
Spacer()
VStack {
Circle()
.foregroundColor(Color.orange)
.overlay(Image(systemName: "plus")) /// to see the rotation animation
.frame(height: 100)
.rotationEffect(Angle(degrees: self.isAnimating ? 360 : 0.0))
.onAppear {
withAnimation(animation) { /// here!
self.isAnimating = true
}
}
.onDisappear { self.isAnimating = false }
if self.text != "" {
Text(self.text)
}
}
Spacer()
}
.background(Color.gray)
.onAppear(perform: {
DispatchQueue.main.asyncAfter(deadline: .now()+4, execute: {
self.text = "Test"
})
})
}
}
Result:
I need to show a login screen when the user session is expired. I tried to achieve this by changing the current window:
#main
struct ResetViewHierarchyApp: App {
#StateObject private var state = appState
var body: some Scene {
WindowGroup {
if state.isLoggedIn {
ContentView()
} else {
LogInView()
}
}
}
}
When no modal views are presented then it works fine. If only one modal view is presented, it also works, the modal view is dismissed. But if there are more than one modal views are presented, then the root view is replaced, but only the topmost modal view is dismissed. Here is ContentView:
struct ContentView: View {
#State private var isPresentingSheet1 = false
#State private var isPresentingSheet2 = false
var body: some View {
Text("Hello, world!")
.padding()
Button(action: {
isPresentingSheet1 = true
}, label: {
Text("Present Sheet")
.padding()
}).sheet(isPresented: $isPresentingSheet1) {
sheetView1
}
}
}
private extension ContentView {
var sheetView1: some View {
VStack {
Text("Sheet 1")
.padding()
Button(action: {
isPresentingSheet2 = true
}, label: {
Text("Present Sheet")
.padding()
}).sheet(isPresented: $isPresentingSheet2) {
sheetView2
}
}
}
var sheetView2: some View {
VStack {
Text("Sheet 2")
.padding()
Button(action: {
appState.isLoggedIn = false
}, label: {
Text("Log Out")
.padding()
})
}
}
}
The same happens if I use fullScreenCover instead of sheet.
Does anybody know how to solve this issue, to dismiss all the presented modals at once?
I've solved this issue with UIKit windows:
#StateObject private var state = appState
#State private var contentWindow: UIWindow?
var body: some Scene {
WindowGroup {
EmptyView()
.onAppear {
updateContentWindow(isLoggedIn: state.isLoggedIn)
}.onReceive(state.$isLoggedIn) { isLoggedIn in
updateContentWindow(isLoggedIn: isLoggedIn)
}
}
}
var window: UIWindow? {
guard let scene = UIApplication.shared.connectedScenes.first,
let windowSceneDelegate = scene.delegate as? UIWindowSceneDelegate,
let window = windowSceneDelegate.window else {
return nil
}
return window
}
func updateContentWindow(isLoggedIn: Bool) {
contentWindow?.isHidden = true
contentWindow = nil
if let windowScene = window?.windowScene {
contentWindow = UIWindow(windowScene: windowScene)
contentWindow?.windowLevel = UIWindow.Level.normal
if isLoggedIn {
contentWindow?.rootViewController = UIHostingController(rootView: ContentView())
} else {
contentWindow?.rootViewController = UIHostingController(rootView: LogInView())
}
contentWindow?.makeKeyAndVisible()
}
}
It is indeed a strange bug.. however I found a workaround for it.
You can keep your States of the modal View inside your Observable / Environment Object. When logging out, you have to make sure to close all your sheets.
Here is a example:
First adding showSheet as Published Value in the AppState
class AppState : ObservableObject {
#Published var isLoggedIn : Bool = true
#Published var showSheet1 : Bool = false
#Published var showSheet2 : Bool = false
}
When logging out, turn all your sheets to false.
Button(action: {
self.state.isLoggedIn = false
self.state.showSheet1 = false
self.state.showSheet2 = false
}, label: {
Text("Log Out")
.padding()
})
Of course you have to use these values in your Button for toggling sheet and in your sheet.
.sheet(isPresented: $state.showSheet2) {
Edit:
Even simpler, you don't have to manually set it to false in the LogOut action. Instead do it all in the appState
#Published var isLoggedIn : Bool = true {
willSet {
if newValue == false {
showSheet1 = false
showSheet2 = false
}
}
}
I want to present the two destinations view in full screen mode from a single view.
Below is a sample of my code. Seem that the function only works for single presentation, if I have a second fullScreenCover defined, the first fullScreenCover didn't work properly.Is that any workaround at this moment?
import SwiftUI
struct TesFullScreen: View {
init(game : Int){
print(game)
}
var body: some View {
Text("Full Screen")
}
}
ContentView
import SwiftUI
struct ContentView: View {
#State var showFullScreen1 : Bool = false
#State var showFullScreen2 : Bool = false
var body: some View {
NavigationView {
VStack {
Spacer()
Button(action: { self.showFullScreen1 = true }) {
Text("Show Full Screen 1")
}
Button(action: { self.showFullScreen2 = true }) {
Text("Show Full Screen 2")
}
Spacer()
}
.navigationBarTitle("TextBugs", displayMode: .inline)
}
.fullScreenCover(isPresented: self.$showFullScreen1){
TesFullScreen(game: 1)
}
.fullScreenCover(isPresented: self.$showFullScreen2){
TesFullScreen(game: 2)
}
}
}
Not always the accepted answer works (for example if you have a ScrollView with subviews (cells in former days) which holds the buttons, that set the navigational flags).
But I found out, that you also can add the fullScreen-modifier onto an EmptyView. This code worked for me:
// IMPORTANT: Has to be within a container (e.g. VStack, HStack, ZStack, ...)
if myNavigation.flag1 || myNavigation.flag2 {
EmptyView().fullScreenCover(isPresented: $myNavigation.flag1)
{ MailComposer() }
EmptyView().fullScreenCover(isPresented: $myNavigation.flag2)
{ RatingStore() }
}
Usually some same modifier added one after another is ignored. So the simplest fix is to attach them to different views, like
struct FullSContentView: View {
#State var showFullScreen1 : Bool = false
#State var showFullScreen2 : Bool = false
var body: some View {
NavigationView {
VStack {
Spacer()
Button(action: { self.showFullScreen1 = true }) {
Text("Show Full Screen 1")
}
.fullScreenCover(isPresented: self.$showFullScreen1){
Text("TesFullScreen(game: 1)")
}
Button(action: { self.showFullScreen2 = true }) {
Text("Show Full Screen 2")
}
.fullScreenCover(isPresented: self.$showFullScreen2){
Text("TesFullScreen(game: 2)")
}
Spacer()
}
.navigationBarTitle("TextBugs", displayMode: .inline)
}
}
}
Alternate is to have one .fullScreenCover(item:... modifier and show inside different views depending on input item.
The only thing that worked for me was the answer in this link:
https://forums.swift.org/t/multiple-sheet-view-modifiers-on-the-same-view/35267
Using the EmptyView method or other solutions always broke a transition animation on one of the two presentations. Either transitioning to or from that view and depending on what order I chose them.
Using the approach by Lantua in the link which is using the item argument instead of isPresented worked in all cases:
enum SheetChoice: Hashable, Identifiable {
case a, b
var id: SheetChoice { self }
}
struct ContentView: View {
#State var sheetState: SheetChoice?
var body: some View {
VStack {
...
}
.sheet(item: $sheetState) { item in
if item == .a {
Text("A")
} else {
Text("B")
}
}
}
}
The sheetState needs to be optional for it to work.
In swift or objective-c, I can set exclusiveTouch property to true or YES, but how do I do it in swiftUI?
Xcode 11.3
Set exclusiveTouch and isMultipleTouchEnabled properties inside your struct init() or place it in AppDelegate.swift for the whole app:
struct ContentView: View {
init() {
UIButton.appearance().isMultipleTouchEnabled = false
UIButton.appearance().isExclusiveTouch = true
UIView.appearance().isMultipleTouchEnabled = false
UIView.appearance().isExclusiveTouch = true
//OR
for subView in UIView.appearance().subviews {
subView.isMultipleTouchEnabled = false
subView.isExclusiveTouch = true
UIButton.appearance().isMultipleTouchEnabled = false
UIButton.appearance().isExclusiveTouch = true
}
}
var body: some View {
VStack {
Button(action: {
print("BTN1")
}){
Text("First")
}
Button(action: {
print("BTN2")
}){
Text("Second")
}
}
}
}
Can be handled something like below :
struct ContentView: View {
#State private var isEnabled = false
var body: some View {
VStack(spacing: 50) {
Button(action: {
self.isEnabled.toggle()
}) {
Text("Button 1")
}
.padding(20)
.disabled(isEnabled)
Button(action: {
self.isEnabled.toggle()
}) {
Text("Button 2")
}
.padding(50)
.disabled(!isEnabled)
}
}
}