Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically hiding view in SwiftUI

Tags:

swift

swiftui

I'm trying to conditionally hide a DatePicker in SwiftUI. However, I'm having any issue with mismatched types:

var datePicker = DatePicker($datePickerDate) if self.showDatePicker {     datePicker = datePicker.hidden() } 

In this case, datePicker is a DatePicker<EmptyView> type but datePicker.hidden() is a _ModifiedContent<DatePicker<EmptyView>, _HiddenModifier>. So I cannot assign datePicker.hidden() to datePicker. I've tried variations of this and can't seem to find a way that works. Any ideas?

UPDATE

You can unwrap the _ModifiedContent type to get the underlying type using it's content property. However, this doesn't solve the underlying issue. The content property appears to just be the original, unmodified date picker.

like image 610
Jake Avatar asked Jun 07 '19 07:06

Jake


People also ask

How do I hide views in SwiftUI?

Use an opacity(_:) modifier with a value of 0 so that the layout accounts for the error message whether or not it's visible. You can also use this strategy for removing a view that doesn't affect other views' placement, like a view inside an overlay(alignment:content:) modifier.

How do I make an image invisible in SwiftUI?

Any SwiftUI view can be partially or wholly transparent using the opacity() modifier. This accepts a value between 0 (completely invisible) and 1 (fully opaque), just like the alpha property of UIView in UIKit.


1 Answers

The simplest and most common way to hide a view is like the following:

struct ContentView: View {     @State private var showText = true      var body: some View {         VStack {             Button("Toggle text") {                 showText.toggle()             }              if showText {                 Text("Hello World!")             }         }     } } 

This removes the Text view from the hierarchy when showText equals false. If you wish to have an option to preserve the space or want it as a modifier, see below.


I created an extension, so you can use a modifier, like so to hide the view:

Text("Hello World!")     .isHidden(true) 

Or for complete removal:

Text("Label")     .isHidden(true, remove: true) 

The extension below is also available on GitHub here if you want to use Swift Packages: GeorgeElsham/HidingViews.


Here is the code to create the View modifier:

I recommend you use this code in its own file (remember to import SwiftUI):

extension View {     /// Hide or show the view based on a boolean value.     ///     /// Example for visibility:     ///     ///     Text("Label")     ///         .isHidden(true)     ///     /// Example for complete removal:     ///     ///     Text("Label")     ///         .isHidden(true, remove: true)     ///     /// - Parameters:     ///   - hidden: Set to `false` to show the view. Set to `true` to hide the view.     ///   - remove: Boolean value indicating whether or not to remove the view.     @ViewBuilder func isHidden(_ hidden: Bool, remove: Bool = false) -> some View {         if hidden {             if !remove {                 self.hidden()             }         } else {             self         }     } } 
like image 198
George Avatar answered Oct 14 '22 22:10

George