SwiftUI - 同时动画视图过渡和位置变化

Question

我有一个黄色的容器，里面有一个绿色的视图。我想移动容器，同时隐藏/显示内部绿色视图，并带有动画。目前，我使用.offset 进行移动，使用if 声明绿色视图的过渡。

问题是，虽然黄色容器移动了，但绿色视图却没有。它只是在目标偏移处淡入淡出。我希望它也能沿着黄色容器移动。

This is what I get currently	This is what I want

这是我的代码：

struct ContentView: View {
    @State var showingSubview = false
    
    var body: some View {
        VStack {
            Button("Show Subview") {
                withAnimation(.easeInOut(duration: 2)) {
                    showingSubview.toggle()
                }
            }
            
            if showingSubview {
                Text("Subview")
                    .padding()
                    .background(Color.green)
            }
        }
        .padding()
        .background(Color.yellow)
        .offset(x: showingSubview ? 150 : 0, y: 0)
    }
}

如何让绿色视图随着黄色容器一起移动，因为它淡入淡出？最好是继续使用if 或switch 语句进行插入/删除。

Answer 1

您可以在动画时更改高度。

代码版本 #1

这不会褪色并出现在黄色矩形内。

代码：

struct ContentView: View {
    @State var showingSubview = false

    var body: some View {
        VStack(spacing: 0) {
            Button("Show Subview") {
                withAnimation(.easeInOut(duration: 2)) {
                    showingSubview.toggle()
                }
            }

            Text("Subview")
                .padding()
                .background(Color.green)
                .padding(.top)
                .frame(height: showingSubview ? nil : 0, alignment: .top)
                .clipped()
        }
        .padding()
        .background(Color.yellow)
        .offset(x: showingSubview ? 150 : 0, y: 0)
    }
}

结果 #1

代码版本 #2

此版本将淡出并显示在底部边缘，如您的 GIF 所示。

代码：

struct ContentView: View {
    @State var showingSubview = false

    var body: some View {
        VStack(spacing: 0) {
            Button("Show Subview") {
                withAnimation(.easeInOut(duration: 2)) {
                    showingSubview.toggle()
                }
            }

            Text("Subview")
                .padding()
                .background(Color.green)
                .padding(.top)
                .frame(height: showingSubview ? nil : 0, alignment: .top)
                .padding(.bottom)
                .background(Color.yellow)
                .clipped()
                .opacity(showingSubview ? 1 : 0)
        }
        .padding([.horizontal, .top])
        .background(Color.yellow)
        .padding(.bottom)
        .offset(x: showingSubview ? 150 : 0, y: 0)
    }
}

结果 #2