我试图在SwiftUI中有条件地隐藏一个DatePicker。然而，我遇到了类型不匹配的问题:
var datePicker = DatePicker($datePickerDate)
if self.showDatePicker {
datePicker = datePicker.hidden()
}
datePicker 是一个 DatePicker<EmptyView> 类型，但是 datePicker.hidden() 是一个 _ModifiedContent<DatePicker<EmptyView>, _HiddenModifier>。因此我不能将 datePicker.hidden() 赋值给 datePicker。我尝试了各种变化，但好像找不到可行的方法。有什么想法吗？content 属性取消包装 _ModifiedContent 类型以获取基础类型。 但是，这并没有解决潜在的问题。 content 属性似乎只是原始的、未修改的日期选择器。.opacity(isHidden ? 0 : 1)
hidden修饰符：extension View {
func hidden(_ shouldHide: Bool) -> some View {
opacity(shouldHide ? 0 : 1)
}
}
DatePicker($datePickerDate)
.hidden(showDatePicker)
hidden修饰符的原始行为不同，这两种方法都保留了隐藏视图的框架。
隐藏视图最简单、最常见的方法如下：
struct ContentView: View {
@State private var showText = true
var body: some View {
VStack {
Button("Toggle text") {
showText.toggle()
}
if showText {
Text("Hello World!")
}
}
}
}
当showText等于false时，这将从层次结构中删除Text视图。如果您希望保留空格或将其作为修饰符，请参见下文。
我创建了一个扩展，因此您可以使用修饰符来隐藏视图，如下所示：
Text("Hello World!")
.isHidden(true)
或者完全删除：
Text("Label")
.isHidden(true, remove: true)
如果您想使用Swift Packages，下面的扩展程序也可以在GitHub上找到：GeorgeElsham/HidingViews。
以下是创建View修饰符的代码：
我建议您将此代码放在单独的文件中（记得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
}
}
}
if/else语句意味着ViewBuilder会为if和else的输出分配不同的结构标识。即隐藏的视图!=显示的视图。因此，动画可能无法按预期工作，并且当隐藏/显示时，NS/UIViewRepresentable项将被重新生成。 - Giles我发现，与其在视图中动态设置变量并使用它，不如通过以下方式隐藏或显示日期选择器：
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)
}
}
}
}
.hidden()的目的是隐藏一个元素，使其在页面上不可见。 - Michael Ozeryanskyhidden()不接受布尔值。 - Michael Ozeryansky这是在SwiftUI中显示/隐藏视图的简单方法。
添加 @State 变量：
@State private var showLogo = false
添加以下条件：
VStack {
if showLogo {
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)
更改您的 @State 变量的状态以显示/隐藏视图，如下所示：
Button(action: {
withAnimation{
self.showLogo.toggle()
}
}, label: {
Text("登录").font(.system(size: 20, weight: .medium, design: .default))
.frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
.foregroundColor(Color("BlackFont"))
.cornerRadius(10)
})
.opacity(showLogo ? 1 : 0)修改器。
if showLogo == true
比较布尔值似乎有点可疑。而且在视图代码中使用分支逻辑被认为是一种不良实践。 - Ilya我现在更喜欢另一种方法，而不是我原来的答案（如下）：
根据您想要保留原始空间还是使其他视图占用隐藏的空间，有两种可能的解决方案。
DatePicker("Choose date", selection: $datePickerDate)
.opacity(showDatePicker ? 1 : 0)
即使我们只是在调整不透明度，当隐藏的DatePicker应该出现的位置被触摸时，也不会打开日历。
if showDatePicker {
DatePicker("Choose date", selection: $datePickerDate)
}
对于未来需要的人，我创建了一个ViewModifier，它以Bool作为参数，因此您可以将布尔值绑定到视图上以声明性地显示和隐藏视图，只需设置您的showDatePicker: Bool变量。
所有代码片段都需要import SwiftUI。
ViewModifier：struct Show: ViewModifier {
let isVisible: Bool
@ViewBuilder
func body(content: Content) -> some View {
if isVisible {
content
} else {
content.hidden()
}
}
}
extension View {
func show(isVisible: Bool) -> some View {
ModifiedContent(content: self, modifier: Show(isVisible: isVisible))
}
}
您可以像这样使用它：
var datePicker = DatePicker($datePickerDate)
.show(isVisible: showDatePicker)
Show不会改变isVisible，因此它不需要被绑定为var。您可以将其声明为普通的let isVisible: Bool，并且删除$，SwiftUI仍会在更改时重新创建视图。 - Aviel Gross我曾经遇到过同样的问题，我是通过以下方式解决的：
注意：我使用绑定(binding)来动态隐藏和/或显示。
1 - 创建修饰符(Modifier)
struct HiddenModifier: ViewModifier{
var isHide:Binding<Bool>
func body(content: Content) -> some View {
if isHide.wrappedValue{
content
.hidden()
}
else{
content
}
}
}
2 - 给视图添加修饰符：
extension View{
func hiddenModifier(isHide:Binding<Bool>) -> some View{
return self.modifier(HiddenModifier(isHide: isHide))
}
}
3 - 使用修饰符
struct CheckHiddenView: View {
@State var hide:Bool = false
var body: some View {
VStack(spacing: 24){
Text("Check Hidden")
.font(.title)
RoundedRectangle(cornerRadius: 20)
.fill(Color.orange)
.frame(width: 150, height: 150, alignment: .center)
.hiddenModifier(hide: $hide)
Button {
withAnimation {
hide.toggle()
}
} label: {
Text("Toggle")
}
.buttonStyle(.bordered)
}
}
}
测试
在 Beta 5 中，按住 Command 键单击相关视图，然后选择“Make Conditional”选项。我在我的一个视图（LiftsCollectionView）上执行了这个操作，并生成了以下代码：
if suggestedLayout.size.height > 150 {
LiftsCollectionView()
} else {
EmptyView()
}
EmptyView() 是关键点。它实际上抹掉了视图的存在，而 hidden() 只是使其透明但仍然存在。 - eonilimport SwiftUI
fileprivate struct HiddenIfModifier: ViewModifier {
var isHidden: Bool
init(condition: Bool) {
self.isHidden = condition
}
func body(content: Content) -> some View {
content
// Conditionally changing the parameters of modifiers
// is more efficient than conditionally applying a modifier
// (as in Cristina's ViewModifier implementation).
.opacity(isHidden ? 0 : 1)
.disabled(isHidden)
}
}
extension View {
/// Hides a view conditionally.
/// - Parameters:
/// - condition: Decides if `View` is hidden.
/// - Returns: The `View`, hidden if `condition` is `true`.
func hidden(if condition: Bool) -> some View {
modifier(HiddenIfModifier(condition: condition))
}
}
使用 -
DatePicker($datePickerDate)
.hidden(if: !self.showDatePicker)
View 上使用 opacity 修饰符：ActivityIndicator(tint: .black)
.opacity(self.isLoading ? 1.0 : 0.0)
remove = true 时，onAppear 回调将不会被调用。
.opacity(isHidden ? 0 : 1) 明显是正确的方法。
.hidden()也可以实现这一点，但是必须使用if else条件语句和.hidden()一起使用以保留空间，这似乎不是最优解。 - Mark Moeykens