SwiftUI实现带嵌套子视图的层级视图：求简洁实现方案

针对你当前通过数组索引控制竖线显示的临时方案，这里提供两种更简洁、可维护性更高的优化思路：

方案一：移除索引依赖，用元素判断替代 #

核心思路是直接通过元素本身判断是否为最后一项，同时提取复用组件减少重复代码：

// 数据结构假设（需与你的实际结构匹配）
struct Property: Identifiable {
    let id = UUID()
    let zones: [Zone]
}

struct Zone: Identifiable, Equatable {
    let id = UUID()
    let name: String
}

struct NewShapeView: View {
    let properties: [Property]
    
    var body: some View {
        ForEach(properties) { property in
            VStack(alignment: .leading, spacing: 0) {
                // 直接遍历Zone元素，无需依赖索引
                ForEach(property.zones) { zone in
                    ZoneContainer(zone: zone, isLastZone: zone == property.zones.last)
                }
            }
        }
    }
}

// 整合单个Zone的完整视图，简化父组件逻辑
struct ZoneContainer: View {
    let zone: Zone
    let isLastZone: Bool
    
    var body: some View {
        VStack(spacing: 0) {
            LineView(zoneName: zone.name)
            SubView(showVerticalLine: !isLastZone)
        }
    }
}

// 复用线条组件，统一样式管理
struct VerticalLine: View {
    var height: CGFloat = 40
    
    var body: some View {
        Rectangle()
            .frame(width: 1, height: height)
    }
}

struct HorizontalLine: View {
    var width: CGFloat = 40
    
    var body: some View {
        Rectangle()
            .frame(width: width, height: 1)
    }
}

struct LineView: View {
    let zoneName: String
    
    var body: some View {
        HStack(alignment: .bottom, spacing: 0) {
            VerticalLine()
            HorizontalLine()
            Text(zoneName)
        }
    }
}

struct SubView: View {
    var showVerticalLine: Bool
    
    var body: some View {
        HStack(spacing: 0) {
            // 用占位符保证布局对齐，避免显示/隐藏竖线时的偏移
            if showVerticalLine {
                VerticalLine(height: 36)
            } else {
                Spacer().frame(width: 1)
            }
            Spacer().frame(width: 32, height: 36)
            Image(systemName: "speaker.wave.2.fill")
            Text("Some Paradise - L’impératrice")
                .font(.subheadline)
                .foregroundColor(.gray)
                .padding(.leading, 4)
        }
    }
}

优化点说明 #

• 移除索引依赖：通过zone == property.zones.last判断是否为最后一项，避免索引操作带来的潜在错误（如数组元素顺序变更时的逻辑失效）
• 组件复用：提取VerticalLine和HorizontalLine统一管理线条样式，后续修改只需调整这两个组件
• 布局稳定性：在SubView的非竖线分支添加宽度占位，确保右侧内容始终对齐，避免布局跳动

方案二：背景绘制贯穿竖线，彻底消除条件判断 #

如果竖线需要贯穿整个Property的所有Zone，可直接用背景绘制全局竖线，完全去掉条件判断逻辑：

struct NewShapeView: View {
    let properties: [Property]
    
    var body: some View {
        ForEach(properties) { property in
            VStack(alignment: .leading, spacing: 0) {
                ForEach(property.zones) { zone in
                    VStack(spacing: 0) {
                        LineView(zoneName: zone.name)
                        SubView()
                    }
                }
            }
            // 背景绘制贯穿整个Property的左侧竖线
            .background(
                GeometryReader { geo in
                    Rectangle()
                        .frame(width: 1, height: geo.size.height)
                        .alignmentGuide(.leading) { $0[.leading] }
                }
            )
        }
    }
}

struct LineView: View {
    let zoneName: String
    
    var body: some View {
        HStack(alignment: .bottom, spacing: 0) {
            Spacer().frame(width: 1) // 占位对齐背景竖线
            HorizontalLine()
            Text(zoneName)
        }
    }
}

struct SubView: View {
    var body: some View {
        HStack(spacing: 0) {
            Spacer().frame(width: 1) // 占位对齐背景竖线
            Spacer().frame(width: 32, height: 36)
            Image(systemName: "speaker.wave.2.fill")
            Text("Some Paradise - L’impératrice")
                .font(.subheadline)
                .foregroundColor(.gray)
                .padding(.leading, 4)
        }
    }
}

// 复用的线条组件同方案一
struct HorizontalLine: View {
    var width: CGFloat = 40
    
    var body: some View {
        Rectangle()
            .frame(width: width, height: 1)
    }
}

优化点说明 #

• 零条件判断：利用背景绘制全局竖线，子视图只需通过占位Spacer对齐，代码逻辑极简
• 布局一致性：竖线贯穿整个Property区域，视觉效果更统一，不会出现局部断连的情况
• 低维护成本：无需关注数组元素数量变化，布局逻辑完全由背景自动适配

内容的提问来源于stack exchange，提问作者Abhishek Choudhary