如何在运行时动态调整SwiftUI中VStack的视图顺序？

SwiftUI原生没有为VStack提供类似HStack通过layoutDirection切换布局方向的直接API，但可以通过以下两种简洁方式实现上下反转，同时避免代码重复：

方法一：通过视图数组反转（推荐含交互/文本的场景） #

把需要展示的视图存入数组，根据状态决定是否反转数组，再用ForEach遍历渲染。这种方式不会改变视图本身的方向，适合包含文本、按钮等需要保持正常交互和显示的场景。

struct ContentView: View {
    @State var shouldFlip = false
    
    // 统一维护要展示的视图数组
    private let views: [any View] = [
        Color(.red),
        Color(.blue),
        Color(.yellow),
        Color(.green)
    ]
    
    var body: some View {
        VStack {
            ForEach(shouldFlip ? views.reversed() : views, id: \.self) { view in
                view
            }
        }
    }
}

方法二：通过视图变换反转（适合纯视觉元素场景） #

对整个VStack应用旋转和缩放变换，快速实现上下反转。这种方式代码更简洁，但会翻转视图内的所有内容（比如文本会倒过来），仅适合颜色、图标这类纯视觉元素。

// 自定义可翻转的VStack组件
struct FlippableVStack<Content: View>: View {
    let shouldFlip: Bool
    let content: () -> Content
    
    var body: some View {
        VStack(content: content)
            .rotationEffect(.degrees(shouldFlip ? 180 : 0))
            .scaleEffect(x: 1, y: shouldFlip ? -1 : 1)
    }
}

// 使用示例
struct ContentView: View {
    @State var shouldFlip = false
    
    var body: some View {
        FlippableVStack(shouldFlip: shouldFlip) {
            Color(.red)
            Color(.blue)
            Color(.yellow)
            Color(.green)
        }
    }
}

两种方法都只需要编写一次VStack内的视图内容，通过shouldFlip状态就能一键切换顺序，彻底避免了原代码中的重复问题。

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