SwiftUI自定义Dropdown切换时头部图片跳动问题求助

我创建了一个自定义Dropdown，点击时底部视图会展开。但观察到切换展开状态时，头部的图片会先跳到中间再恢复原位，而文本位置保持不变。

问题代码 #

struct ListSample: View {
    
    var body: some View {
        List {
            Dropdown()
            Dropdown()
            Dropdown()
        }
    }
}

struct Dropdown: View {
    
    @State var showBox = false
    @State var rotateDeg = 0.0
    
    var body: some View {
        VStack {
            showHideBox
            VStack {
                if showBox {
                    Rectangle()
                        .frame(height: 200)
                }
            }
            Spacer()
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0)
        .clipped()
        .animation(.easeOut, value: showBox)
        .transition(.slide)
    }
    
    var showHideBox: some View {
        HStack {
            Image(systemName: "squareshape.split.2x2")
            Text(showBox ? "Hide Box" : "Show Box")
                .font(.caption)
            Spacer()
            Image(systemName: "chevron.right")
                .foregroundColor(.accentColor)
                .rotationEffect(.degrees(rotateDeg))
        }
        .onTapGesture {
            withAnimation {
                showBox.toggle()
                rotateDeg = showBox ? 90 : 0
            }
        }
        .padding(6)
    }
}

解决方案 #

问题根源在于Dropdown视图中的Spacer()和全局动画设置，导致List单元格布局在动画过程中出现异常偏移。通过以下修改可以修复：

• 移除冗余的Spacer()：它会在视图展开/收起时强制改变布局空间，引发头部元素位置跳动
• 给展开元素单独设置动画：替代全局动画，避免影响头部布局的稳定性
• 简化视图层级：去掉不必要的VStack包裹，降低布局计算复杂度

修改后的代码：

struct ListSample: View {
    var body: some View {
        List {
            Dropdown()
            Dropdown()
            Dropdown()
        }
    }
}

struct Dropdown: View {
    @State var showBox = false
    @State var rotateDeg = 0.0
    
    var body: some View {
        VStack(spacing: 0) { // 明确设置spacing避免额外间距干扰
            showHideBox
            // 仅给展开的矩形添加过渡动画
            if showBox {
                Rectangle()
                    .frame(height: 200)
                    .transition(.slide)
            }
        }
        .frame(maxWidth: .infinity)
        .clipped()
    }
    
    var showHideBox: some View {
        HStack {
            Image(systemName: "squareshape.split.2x2")
            Text(showBox ? "Hide Box" : "Show Box")
                .font(.caption)
            Spacer()
            Image(systemName: "chevron.right")
                .foregroundColor(.accentColor)
                .rotationEffect(.degrees(rotateDeg))
        }
        .onTapGesture {
            withAnimation(.easeOut) {
                showBox.toggle()
                rotateDeg = showBox ? 90 : 0
            }
        }
        .padding(6)
    }
}

如果需要进一步优化，还可以给List添加.listStyle(.plain)，避免List默认的单元格动画干扰，但上述修改已能解决核心的图片跳动问题。

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