在SwiftUI中动态隐藏视图

Question

我试图在SwiftUI中有条件地隐藏DatePicker。但是，我对类型不匹配有任何疑问：

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

在这种情况下，datePicker是DatePicker<EmptyView>类型，而datePicker.hidden()是_ModifiedContent<DatePicker<EmptyView>, _HiddenModifier>。因此，我无法将datePicker.hidden()分配给datePicker。我尝试过这种方法的变种，但似乎找不到可行的方法。有什么想法吗？

更新

您可以解开_ModifiedContent类型以使用其content属性获得基础类型。但是，这不能解决根本问题。 content属性似乎只是未经修改的原始日期选择器。

Answer 1

您可以改为设置Alpha，这也将保留视图的布局空间，并且不会像其他答案一样强制您添加虚拟视图：

 onClick={() => addToCart(product)}

我希望struct ContentView : View { @State var showDatePicker = true @State var datePickerDate: Date = Date() var body: some View { VStack { DatePicker($datePickerDate) .opacity(showDatePicker ? 1 : 0) } } } 修饰符稍后能引起争论。

Answer 2

这是在SwiftUI中显示/隐藏视图的简单方法。

1. 添加@State变量：

   @State var showLogo = false
   

2. 添加如下条件：

   VStack {
               if showLogo == true {
               Image(systemName: "house.fill")
                   .resizable()
                   .frame(width: 100, height: 100, alignment: .center)
                   .foregroundColor(Color("LightGreyFont"))
                   .padding(.bottom, 20)
               }
               Text("Real State App")
                   .font(Font.custom("Montserrat-Regular", size: 30))
           }.padding(.vertical, 25)
   

3. 将@State变量的状态更改为显示/隐藏视图，如下所示：

   Button(action: {
                   withAnimation{
                       self.showLogo.toggle()
                   }
   
               }, label: {
                   Text("Login").font(.system(size: 20, weight: .medium, design: .default))
                       .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
                       .foregroundColor(Color("BlackFont"))
                       .cornerRadius(10)
   
               })
   

Answer 3

我创建了一个扩展，因此您可以使用修饰符，如下所示：

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

我建议您在自己的文件中使用此代码（请记住import SwiftUI）：

extension View {
    /// Whether the view is hidden.
    /// - Parameter bool: Set to `true` to hide the view. Set to `false` to show the view.
    func isHidden(_ bool: Bool) -> some View {
        modifier(HiddenModifier(isHidden: bool))
    }
}


/// Creates a view modifier that can be applied, like so:
///
/// ```
/// Text("Hello World!")
///     .isHidden(true)
/// ```
///
/// Variables can be used in place so that the content can be changed dynamically.
private struct HiddenModifier: ViewModifier {

    fileprivate let isHidden: Bool

    fileprivate func body(content: Content) -> some View {
        Group {
            if isHidden {
                content.hidden()
            } else {
                content
            }
        }
    }
}

Answer 4

您还可以在任何opacity上使用View修饰符：

ActivityIndicator(tint: .black)
   .opacity(self.isLoading ? 1.0 : 0.0)

Answer 5

对于将来需要它的人，我创建了一个ViewModifier，它使用一个Binding<Bool>作为参数，因此您可以通过设置{{1 }}变量。

所有代码段都需要 showDatePicker: Bool。

import SwiftUI：

ViewModifier

函数：

struct Show: ViewModifier {
    @Binding var isVisible: Bool

    @ViewBuilder
    func body(content: Content) -> some View {
        if isVisible {
            content
        } else {
            content.hidden()
        }
    }
}

您可以像这样使用它：

extension View {
    func show(isVisible: Binding<Bool>) -> some View {
        ModifiedContent(content: self, modifier: Show(isVisible: isVisible))
    }
}

Answer 6

我发现可以以这种方式隐藏或显示日期选择器，而不是动态设置变量并在视图中使用它：

struct ContentView : View {
    @State var showDatePicker = true
    @State var datePickerDate: Date = Date()

    var body: some View {
        VStack {
            if self.showDatePicker {
                DatePicker($datePickerDate)
            } else {
                DatePicker($datePickerDate).hidden()
            }
        }
    }
}

或者，可选地，不包括日期选择器而不是将其隐藏：

struct ContentView : View {
    @State var showDatePicker = true
    @State var datePickerDate: Date = Date()

    var body: some View {
        VStack {
            if self.showDatePicker {
                DatePicker($datePickerDate)
            }
        }
    }
}

Answer 7

命令并单击有问题的视图，然后在Beta 5中选择“创建条件”选项。我对其中一个视图（LiftsCollectionView）进行了此操作，并生成了以下内容：

    if suggestedLayout.size.height > 150 {
      LiftsCollectionView()
    } else {
      EmptyView()
    }

Answer 8

即使没有占位符视图或调用 hidden（iOS13.1 和 Swift 5），以下内容也可以工作

struct Foo: View {
    @State var condition: Bool

    var body: some View {
        if self.condition {
            Text("Hello")
        }
    }
}

如果不查看 @ViewBuilder 实现，很难确切知道，但是在评估条件时，如果默认情况下失败，我们似乎会得到 EmptyView。

所以这相当于这里的一些答案，但更简单。