在SwiftUI中有条件地使用视图

Question

我试图找出正确的方法，有条件地包括一个视图与swiftui。我不能直接在视图中使用if，必须使用堆栈视图才能做到这一点。

这是可行的，但似乎会有更干净的方法。

var body: some View {
    HStack() {
        if keychain.get("api-key") != nil {
            TabView()
        } else {
            LoginView()
        }
    }
}

Answer 1

你没有把它包括在你的问题中，但我猜你在没有堆栈的情况下得到的错误如下？

函数声明了一个不透明的返回类型，但其正文中没有返回语句来推断基础类型

这个错误为您提供了一个很好的提示，但是为了理解它，您需要理解不透明返回类型的概念。这就是如何调用前缀为some关键字的类型。我在WWDC没有看到任何苹果工程师深入研究这个问题（也许我错过了各自的演讲？），这就是为什么我自己做了很多研究，并写了一篇关于这些类型如何工作以及为什么它们在SwiftUI中用作返回类型的文章。

另外还有一个详细的技术说明

如果你想完全理解正在发生的事情，我建议你读这两本书。

这里有一个简单的解释：

具有不透明结果类型（某些Type）
的函数或属性必须始终返回相同的具体类型。

在您的示例中，body属性根据条件返回不同的类型：

var body: some View {
    if someConditionIsTrue {
        TabView()
    } else {
        LoginView()
    }
}

如果someConditionIsTrue，它将返回一个TabView，否则返回一个LoginView。这违反了规则，这就是编译器抱怨的原因。

如果将条件包装在堆栈视图中，堆栈视图将在其自身的泛型类型中包含两个条件分支的具体类型：

HStack<ConditionalContent<TabView, LoginView>>

因此，无论实际返回哪个视图，堆栈的结果类型始终相同，因此编译器不会抱怨。

实际上，SwiftUI专门为这个用例提供了一个视图组件，正如您在上面的示例中所看到的，它实际上是堆栈内部使用的组件：

它具有以下泛型类型，泛型占位符将从您的实现中自动推断：

ConditionalContent<TrueContent, FalseContent>

我建议使用该视图容器而不是堆栈，因为它使其他html" target="_blank">开发人员在语义上明确了它的用途。

Answer 2

我需要有条件地将一个视图嵌入到另一个视图中，因此我最终创建了一个方便的if函数：

extension View {
   @ViewBuilder
   func `if`<Content: View>(_ conditional: Bool, content: (Self) -> Content) -> some View {
        if conditional {
            content(self)
        } else {
            self
        }
    }
}

这确实会返回一个AnyView，这并不理想，但感觉它在技术上是正确的，因为您在编译时并不真正知道它的结果。

在我的例子中，我需要将视图嵌入到ScrollView中，因此它看起来像这样：

var body: some View {
    VStack() {
        Text("Line 1")
        Text("Line 2")
    }
    .if(someCondition) { content in
        ScrollView(.vertical) { content }
    }
}

但您也可以使用它有条件地应用修饰符：

var body: some View {
    Text("Some text")
    .if(someCondition) { content in
        content.foregroundColor(.red)
    }
}

更新：在使用此选项之前，请阅读使用条件修饰符的缺点：https://www.objc.io/blog/2021/08/24/conditional-view-modifiers/

Answer 3

避免使用额外容器（如HStack）的最简单方法是将body属性注释为@ViewBuilder，如下所示：

@ViewBuilder
var body: some View {
    if user.isLoggedIn {
        MainView()
    } else {
        LoginView()
    }
}