SwiftUI：数组非空但无合格行时如何隐藏List并显示图片

问题核心 #

当前代码仅处理了数组元素数为0的空状态，但当数组有元素但所有行都不符合显示条件时，List仍会渲染对应数量的空白区域——因为每个listRow即使无内容，也是符合View协议的视图，List会为其保留布局空间。

解决方案 #

方法1：提前判断是否存在可见行 #

即使无法提前过滤数组，也可以通过遍历数组统计是否有符合显示条件的元素，以此决定显示空状态图片还是List。

步骤1：提取统一的显示判断逻辑

将listRow中的显示判断逻辑抽离为可复用的属性，避免代码重复：

// 替换为你的JSON模型类型
extension YourJSONModel {
    var shouldShowRow: Bool {
        // 这里复制你在listRow中使用的实际判断条件
        self.isActive && self.updateDate > Date()
    }
}

步骤2：在MainView中判断可见行状态

添加计算属性判断是否存在可见行，修改body逻辑：

struct MainView: View {
    let myArray: [YourJSONModel]
    
    // 判断数组中是否有符合显示条件的元素
    private var hasVisibleRows: Bool {
        myArray.contains(\.shouldShowRow)
    }
    
    var body: some View {
        // 数组为空 或 无可见行时，显示空状态图片
        if myArray.isEmpty || !hasVisibleRows {
            displayMyImage // 你的空状态图片视图
        } else {
            List(myArray) { arrayItem in
                listRow(arrayItem)
            }
            .scrollContentBackground(.hidden)
        }
    }
}

步骤3：更新listRow的逻辑

复用统一的判断逻辑，确保视图显示一致：

struct listRow: View {
    let arrayItem: YourJSONModel
    
    var body: some View {
        if arrayItem.shouldShowRow {
            // 你的行内容视图
            Text(arrayItem.content)
        } else {
            EmptyView()
        }
    }
}

方法2：隐藏无效行的布局空间（备选） #

如果无法提取判断逻辑，可让无效行的高度为0并隐藏分隔线，再结合方法1的判断彻底避免空白：

struct listRow: View {
    let arrayItem: YourJSONModel
    
    private var shouldShow: Bool {
        // 原有的判断逻辑
        arrayItem.isActive && arrayItem.updateDate > Date()
    }
    
    var body: some View {
        Group {
            if shouldShow {
                // 行内容
                Text(arrayItem.content)
            } else {
                EmptyView()
            }
        }
        // 无效行高度设为0
        .frame(height: shouldShow ? nil : 0)
        // 隐藏分隔线
        .listRowSeparator(.hidden)
        // 清空行背景
        .listRowBackground(Color.clear)
    }
}

注意：此方法需配合方法1的hasVisibleRows判断，否则List本身仍会占据极小的布局空间。

关键说明 #

• 优先选择方法1，从根源上避免渲染空白List，性能更优。
• 抽离统一的判断逻辑可保证listRow和MainView的判断条件一致，避免出现逻辑冲突。

内容的提问来源于stack exchange，提问作者Jim Wartnick