在 SwiftUI 中使用选项进行条件渲染

Question

来自 React 背景很容易只在定义了值的情况下渲染视图。它看起来像这样：

function Component ({ profile }) {
  return (
    <div>{profile && <div>{profile.name}}</div>
  )
}

但我发现在 SwiftUI 中复制这种模式要困难得多。理想情况下，我们可以在视图中使用条件展开，但这目前不起作用。我能想出的唯一解决方案真的很不优雅：

struct ProfileView : View {
    var profile: Profile?

    var body : some View {
        if let profile = profile {
            return Text("profile: \(profile.bio)")
        }  else {
            return Text("")
        }
    }
}

struct LayoutView : View {
    @State var profile: Profile?
    var body : some View {
        Group {
            ProfileView(profile: profile)
        }
    }.onAppear(perform: fetch)

    // fetch method 
}

有没有人有一些更好的使用可选值进行条件渲染的策略？

Answer 1

您可以反过来使用map 来处理可选项，如下所示：

struct ProfileView : View {
    var profile: Profile?

    var body : some View {
        profile.map { Text("profile: \($0.bio)") }
    }
}

（在此示例中，$0 是您未包装的 profile。）

如果需要 else 情况：

profile.map { Text($0.bio) } ?? Text("Not available")

Answer 2

这样做：

struct LayoutView : View {
    @State var profile: Profile?
    var body : some View {
        Group {
            if profile != nil {
                ProfileView(profile: profile!)
            }
        }
    }.onAppear(perform: fetch)

    // fetch method 
}

Answer 3

我会在子视图ProfileView 中使用@Binding，以确保文本在更改时与profile 数据同步。这就是我要做的一切：

struct Profile {
    var bio: String = "Biography"
}

struct ProfileView : View {
    @Binding var profile: Profile?
    private var profileText: String {
        get {
            profile == nil ? "" : "profile: " + profile!.bio
        } // set part is not necessary if we don't set the text from the view
        set {
            self.profile?.bio = newValue
        }
    }

    var body : some View {
        Text(profileText)
    }
}

struct LayoutView : View {
    @State var profile: Profile?
    var body : some View {
        Group {
            ProfileView(profile: $profile)
        }
    }
}

// check it via preview
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        LayoutView(profile: Profile())
    }
}