Question

我想知道当列表的数据源为空时如何在列表中提供空状态视图。下面是一个示例，其中我必须将其包装在if/else语句中。是否有更好的替代方法，还是有办法在List上创建修饰符，从而使之成为可能，即List.emptyView(Text("No data available..."))。

import SwiftUI

struct EmptyListExample: View {

    var objects: [Int]

    var body: some View {
        VStack {
            if objects.isEmpty {
                Text("Oops, loos like there's no data...")
            } else {
                List(objects, id: \.self) { obj in
                    Text("\(obj)")
                }
            }
        }
    }

}

struct EmptyListExample_Previews: PreviewProvider {

    static var previews: some View {
        EmptyListExample(objects: [])
    }

}

Answer 1

解决方案之一是使用@ViewBuilder：

struct EmptyListExample: View {
    var objects: [Int]

    var body: some View {
        listView
    }

    @ViewBuilder
    var listView: some View {
        if objects.isEmpty {
            emptyListView
        } else {
            objectsListView
        }
    }

    var emptyListView: some View {
        Text("Oops, loos like there's no data...")
    }

    var objectsListView: some View {
        List(objects, id: \.self) { obj in
            Text("\(obj)")
        }
    }
}

Answer 2

为此我非常喜欢使用附加到 overlay 的 List，因为它是一个非常简单、灵活的修饰符：

struct EmptyListExample: View {

    var objects: [Int]

    var body: some View {
        VStack {
            List(objects, id: \.self) { obj in
                Text("\(obj)")
            }
            .overlay(Group {
                if objects.isEmpty {
                    Text("Oops, loos like there's no data...")
                }
            })
        }
    }
}

它的优点是可以很好地居中，如果您在图像中使用较大的占位符等，它们将填充与列表相同的区域。

Answer 3

我尝试了@pawello2222 的方法，但是如果传递的对象的内容从空（0）变为非空（>0），或者相反，视图不会被重新渲染，但如果对象的内容是永远不为空。

以下是我一直以来的工作方式：

struct SampleList: View {

    var objects: [IdentifiableObject]

    var body: some View {
    
        ZStack {
        
            Empty() // Show when empty
        
            List {
                ForEach(objects) { object in
                    // Do something about object
                }
            }
            .opacity(objects.isEmpty ? 0.0 : 1.0)
        }
    }  
}

Answer 4

您可以像这样制作 ViewModifier 以显示空视图。此外，为了方便使用，请使用 View 扩展名。

这是演示代码，

//MARK: View Modifier
struct EmptyDataView: ViewModifier {
    let condition: Bool
    let message: String
    func body(content: Content) -> some View {
        valideView(content: content)
    }
    
    @ViewBuilder
    private func valideView(content: Content) -> some View {
        if condition {
            VStack{
                Spacer()
                Text(message)
                    .font(.title)
                    .foregroundColor(Color.gray)
                    .multilineTextAlignment(.center)
                Spacer()
            }
        } else {
            content
        }
    }
}

//MARK: View Extension
extension View {
    func onEmpty(for condition: Bool, with message: String) -> some View {
        self.modifier(EmptyDataView(condition: condition, message: message))
    }
}

示例（如何使用）

struct EmptyListExample: View {
    
    @State var objects: [Int] = []
    
    var body: some View {
        NavigationView {
            List(objects, id: \.self) { obj in
                Text("\(obj)")
            }
            .onEmpty(for: objects.isEmpty, with: "Oops, loos like there's no data...") //<--- Here
            .toolbar {
                ToolbarItemGroup(placement: .navigationBarTrailing) {
                    Button("Add") {
                        objects = [1,2,3,4,5,6,7,8,9,10]
                    }
                    Button("Empty") {
                        objects = []
                    }
                }
            }
        }
    }
}

Answer 5

您可以创建自定义修饰符，在列表为空时替换占位符视图。像这样使用它：

List(items) { item in
    Text(item.name)
}
.emptyPlaceholder(items) {
    Image(systemName: "nosign")
}

这是修饰符：

struct EmptyPlaceholderModifier<Items: Collection>: ViewModifier {
    let items: Items
    let placeholder: AnyView

    @ViewBuilder func body(content: Content) -> some View {
        if !items.isEmpty {
            content
        } else {
            placeholder
        }
    }
}

extension View {
    func emptyPlaceholder<Items: Collection, PlaceholderView: View>(_ items: Items, _ placeholder: @escaping () -> PlaceholderView) -> some View {
        modifier(EmptyPlaceholderModifier(items: items, placeholder: AnyView(placeholder())))
    }
}

SwiftUI列出空状态视图/修饰符

5 个答案: