[英]How to have a dynamic List of Views using SwiftUI
我可以做一个静态列表,比如
List {
View1()
View2()
}
但是我如何从一个数组中创建一个动态的元素列表? 我尝试了以下操作,但出现错误:包含控制流语句的闭包不能与函数构建器“ViewBuilder”一起使用
let elements: [Any] = [View1.self, View2.self]
List {
ForEach(0..<elements.count) { index in
if let _ = elements[index] as? View1 {
View1()
} else {
View2()
}
}
}
有什么解决办法吗? 我想要完成的是一个包含非静态输入的动态元素集的列表。
看起来答案与将我的视图包装在AnyView
struct ContentView : View {
var myTypes: [Any] = [View1.self, View2.self]
var body: some View {
List {
ForEach(0..<myTypes.count) { index in
self.buildView(types: self.myTypes, index: index)
}
}
}
func buildView(types: [Any], index: Int) -> AnyView {
switch types[index].self {
case is View1.Type: return AnyView( View1() )
case is View2.Type: return AnyView( View2() )
default: return AnyView(EmptyView())
}
}
}
有了这个,我现在可以从服务器获取视图数据并组合它们。 此外,它们仅在需要时才被实例化。
if/let
流控制语句不能在@ViewBuilder
块中使用。
这些特殊块内的流控制语句被转换为结构。
例如
if (someBool) {
View1()
} else {
View2()
}
被转换为ConditionalValue<View1, View2>
。
并非所有流控制语句都在这些块中可用,即switch
,但这在未来可能会改变。
在函数构建器进化提案中更多地了解这一点。
在您的具体示例中,您可以按如下方式重写代码:
struct ContentView : View {
let elements: [Any] = [View1.self, View2.self]
var body: some View {
List {
ForEach(0..<elements.count) { index in
if self.elements[index] is View1 {
View1()
} else {
View2()
}
}
}
}
}
您可以使用子视图的动态列表,但您需要注意类型和实例化。 作为参考,这是一个动态的“汉堡包”演示, github/swiftui_hamburger 。
// Pages View to select current page
/// This could be refactored into the top level
struct Pages: View {
@Binding var currentPage: Int
var pageArray: [AnyView]
var body: AnyView {
return pageArray[currentPage]
}
}
// Top Level View
/// Create two sub-views which, critially, need to be cast to AnyView() structs
/// Pages View then dynamically presents the subviews, based on currentPage state
struct ContentView: View {
@State var currentPage: Int = 0
let page0 = AnyView(
NavigationView {
VStack {
Text("Page Menu").color(.black)
List(["1", "2", "3", "4", "5"].identified(by: \.self)) { row in
Text(row)
}.navigationBarTitle(Text("A Page"), displayMode: .large)
}
}
)
let page1 = AnyView(
NavigationView {
VStack {
Text("Another Page Menu").color(.black)
List(["A", "B", "C", "D", "E"].identified(by: \.self)) { row in
Text(row)
}.navigationBarTitle(Text("A Second Page"), displayMode: .large)
}
}
)
var body: some View {
let pageArray: [AnyView] = [page0, page1]
return Pages(currentPage: self.$currentPage, pageArray: pageArray)
}
}
我找到了比上面的答案更简单的方法。
创建您的自定义视图。
确保您的视图是可识别的
(它告诉 SwiftUI 它可以通过查看它们的 id 属性来区分 ForEach 内部的视图)
例如,假设您只是将图像添加到 HStack,您可以创建一个自定义的 SwiftUI 视图,例如:
struct MyImageView: View, Identifiable {
// Conform to Identifiable:
var id = UUID()
// Name of the image:
var imageName: String
var body: some View {
Image(imageName)
.resizable()
.frame(width: 50, height: 50)
}
}
然后在你的 HStack 中:
// Images:
HStack(spacing: 10) {
ForEach(images, id: \.self) { imageName in
MyImageView(imageName: imageName)
}
Spacer()
}
你可以通过多态来做到这一点:
struct View1: View {
var body: some View {
Text("View1")
}
}
struct View2: View {
var body: some View {
Text("View2")
}
}
class ViewBase: Identifiable {
func showView() -> AnyView {
AnyView(EmptyView())
}
}
class AnyView1: ViewBase {
override func showView() -> AnyView {
AnyView(View1())
}
}
class AnyView2: ViewBase {
override func showView() -> AnyView {
AnyView(View2())
}
}
struct ContentView: View {
let views: [ViewBase] = [
AnyView1(),
AnyView2()
]
var body: some View {
List(self.views) { view in
view.showView()
}
}
}
您现在可以直接在@ViewBuilder
块中使用控制流语句,这意味着以下代码完全有效:
struct ContentView: View {
let elements: [Any] = [View1.self, View2.self]
var body: some View {
List {
ForEach(0 ..< elements.count) { index in
if let _ = elements[index] as? View1 {
View1()
} else {
View2()
}
}
}
}
}
除了公认的答案,你可以使用@ViewBuilder
,避免AnyView
彻底:
@ViewBuilder
func buildView(types: [Any], index: Int) -> some View {
switch types[index].self {
case is View1.Type: View1()
case is View2.Type: View2()
default: EmptyView()
}
}
是否可以根据需要返回不同的View
?
简而言之:有点
正如在swift.org 中完整描述的那样,让多个Type返回为不透明类型是不可能的
如果具有不透明返回类型的函数从多个位置返回,则所有可能的返回值必须具有相同的类型。 对于泛型函数,该返回类型可以使用函数的泛型类型参数,但它仍然必须是单一类型。
那么当静态传递一些不同的视图时, List
如何做到这一点呢?
List 不返回不同的类型,它返回填充了一些内容视图的EmptyView
。 构建器能够围绕您传递给它的任何类型的视图构建包装器,但是当您使用越来越多的视图时,它甚至根本不会编译! (例如尝试传递 10 多个视图,看看会发生什么)
如您所见, List
内容是某种ListCoreCellHost
其中包含一个视图子集,证明它只是它所代表内容的容器。
如果我有很多数据(如联系人)并想为此填写一个列表怎么办?
您可以按照此处所述符合Identifiable
或使用identified(by:)
功能。
如果任何联系人可以有不同的看法怎么办?
当你称他们为接触时,这意味着他们是一回事! 您应该考虑 OOP 使它们相同并使用inheritance
优势。 但与UIKit
不同的是, SwiftUI
是基于结构的。 他们不能互相继承。
那么解决方法是什么呢?
您必须将要显示的所有类型的视图包装到单个View
类型中。 EmptyView
的文档不足以利用它(目前)。 但!!! 幸运的是,你可以使用UIKit
我如何利用UIKit
为此
UIKit
之上实现View1
和View2
。ContainerView
。ContainerView
并表示View1
或View2
和适合的大小。UIViewRepresentable
并实现它的要求。List
显示一个ContainerView
的列表,所以现在它是一个可以表示多个视图的单一类型斯威夫特 5
这似乎对我有用。
struct AMZ1: View {
var body: some View {
Text("Text")
}
}
struct PageView: View {
let elements: [Any] = [AMZ1(), AMZ2(), AMZ3()]
var body: some View {
TabView {
ForEach(0..<elements.count) { index in
if self.elements[index] is AMZ1 {
AMZ1()
} else if self.elements[index] is AMZ2 {
AMZ2()
} else {
AMZ3()
}
}
}
我也想在同一个列表中使用不同的视图,因此实现了一个高级列表视图,请参见此处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.