Question 131367 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – iOS 15 Swift UI VStack Animation doesn't push down rows as part of animating

I am just getting started with Swift UI today and followed a tutorial to have expanding sections. Everything went well and animated well until a deprecated warning came up for .animation(.default). I used the recommended method which converted to .animation(.default, value: isOpen) which also works, but the VStack does not animate the rows and looks terrible. Is there something I can do to remedy this?

Example with just .animation(.default)

enter image description here

Example with adjustment to .animation(.default, value: isOpen)

enter image description here

import SwiftUI

struct FilterTest: View {
    var body: some View {
        ScrollView{
            HeaderCellTest()
            HeaderCellTest()
            HeaderCellTest()
            HeaderCellTest()
            
            Spacer()
        }
    }
}

struct HeaderCellTest: View {
    @State private var isOpen: Bool = false
    
    var body: some View {
        content
            .padding(.leading)
            .frame(maxWidth: .infinity)
    }
    
    private var content: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack {
                Text("HEADING")
            }
            .onTapGesture { isOpen.toggle() }
            if isOpen {
                Group {
                    Text("Item")
                    Text("Item")
                    Text("Item")
                    Text("Item")
                    Text("Item")
                }
                .padding(.leading)
                
            }
            Divider()
        }
        .animation(.default, value: isOpen)
    }
}


struct FilterTest_Previews: PreviewProvider {
    static var previews: some View {
        FilterTest()
    }
}
Tags:

2

Answers


  1. 0

    You should use VStack and delete Group!

    struct FilterTest: View {
    var body: some View {
        ScrollView{
            HeaderCellTest()
            HeaderCellTest()
            HeaderCellTest()
            HeaderCellTest()
            
            Spacer()
        }
    }
}

struct HeaderCellTest: View {
    @State private var isOpen: Bool = false
    
    var body: some View {
        content
            .padding(.leading)
            .frame(maxWidth: .infinity)
    }
    
    private var content: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack {
                Text("HEADING")
            }
            .onTapGesture { isOpen.toggle() }
            if isOpen {
                VStack {                 // <<: Here!
                    Text("Item")
                    Text("Item")
                    Text("Item")
                    Text("Item")
                    Text("Item")
                }
                .padding(.leading)
                
            }
            Divider()
        }
        .animation(.default, value: isOpen)
    }
}
    Login or Signup to reply.
  2. 0

    When you want to animate a change you need to surround et modify value with a withAnimation block.

    CF documentation:
    https://developer.apple.com/documentation/swiftui/withanimation(:🙂

    Edited code :

    private var content: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack {
                Text("HEADING")
            }
            .onTapGesture {
                // <--- Add block for animation --->
                withAnimation {
                    isOpen.toggle()
                }
            }
            if isOpen {
                Group {
                    Text("Item")
                    Text("Item")
                    Text("Item")
                    Text("Item")
                    Text("Item")
                }
                .padding(.leading)

            }
            Divider()
        }
        .animation(.default, value: isOpen)
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search