[英]SwiftUI - reusable components with links to other views as parameters
我想在我的应用程序中创建可重用的组件。
我已经搜索过类似的问题。 但我只发现了更复杂的例子。
让我们试试这个简单的例子——一个可以根据传递的参数打开不同视图的按钮。 我有 2 个视图将作为工作表打开:
FirstView.swift
import SwiftUI
struct FirstView: View {
var body: some View {
Text("First view")
}
}
SecondView.swift
struct SecondView: View {
var body: some View {
Text("Second view")
}
}
ButtonView.swift这是我想在我的设计系统中用作可重用组件的视图。
import SwiftUI
struct ButtonView: View {
@State private var showModal: Bool = false
// This works
var text: String
// Here I am getting an error:
// Protocol 'View' can only be used as a generic constraint because it has Self or associated type requirements
var link: View
var body: some View {
VStack {
Spacer()
Button(action: {
self.showModal = true
}) {
Text(text)
.padding(20)
.foregroundColor(Color.white)
}.sheet(isPresented: self.$showModal) {
link
}
.background(Color.blue)
}
}
}
struct ButtonView_Previews: PreviewProvider {
static var previews: some View {
ButtonView(text: "TEST", link: FirstView())
}
}
ContentView.swift在这里我尝试使用相同的按钮组件,但具有不同的标签和链接。
import SwiftUI
struct ContentView: View {
var body: some View {
HStack {
ButtonView(text: "first", link: FirstView())
.padding()
ButtonView(text: "second", link: SecondView())
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
传递字符串参数有效。 标签不一样。 但我不能让它与不同视图的链接一起工作。 我收到一个错误:
Protocol 'View' 只能用作通用约束,因为它具有 Self 或关联的类型要求
保持第一个视图和第二个视图相同,为 ButtonView 使用以下内容:
struct ButtonView<Content : View>: View {
@State private var showModal: Bool = false
var text: String
// This is the generic content parameter
let content: Content
init(text: String, @ViewBuilder contentBuilder: () -> Content){
self.text = text
self.content = contentBuilder()
}
var body: some View {
VStack {
Spacer()
Button(action: {
self.showModal = true
}) {
Text(text)
.padding(20)
.foregroundColor(Color.white)
}.sheet(isPresented: self.$showModal) {
content
}
.background(Color.blue)
}
}
}
这里名为 content 的通用参数用于接收任何视图,初始化器与 @ViewBuilder 属性包装器一起使用来构建视图。现在在 ContentView 结构中按以下方式使用它:
struct ContentView: View {
var body: some View {
HStack {
ButtonView(text: "First") {
FirstView()
}
ButtonView(text: "Second") {
SecondView()
}
}
}
}
它会像一个魅力:)
此外,如果您想保留 ButtonView 的预览并且不希望它崩溃,则将预览添加为:
struct ButtonView_Previews: PreviewProvider {
static var previews: some View {
ButtonView(text: "First") {
FirstView()
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.