how to appear a list (using animation) once the button is pressed?

Admin 1
Viewed 23

I want once I press the button search


                    VStack{
            Text("Enter friends first name")
                .font(.caption)
                .fontWeight(.bold)
                .foregroundColor(Color("Color"))
            
            
            TextField("firstname", text: $firstname)
                .padding()
                .keyboardType(.default)
                .background(Color.white)
                .autocapitalization(.none)
                .textFieldStyle(.roundedBorder)
                .shadow(color: Color.gray.opacity(0.1), radius: 5, x: 0, y: 2)
            
            Text("Enter friends last Name")
                .font(.caption)
                .fontWeight(.bold)
                .foregroundColor(Color("Color"))
            
            
            TextField("lastname", text: $lastname)
                .padding()
                .keyboardType(.default)
                .background(Color.white)
                .autocapitalization(.none)
                .textFieldStyle(.roundedBorder)
                .shadow(color: Color.gray.opacity(0.1), radius: 5, x: 0, y: 2)
            Button (action:{
                searchUser()
            },label:{
                Text("Search")
            })
            
        }

the list that is in searchUser()that shows the names of friends with this first name and last name and their details appears on the this view under the search button and once the button is pressed but with animation ? thanks

I tried to do the animation but it didn't work. does anyone know how can I do it ?

swiftui animation list ios
1 Answers

You can show/hide views conditionally by putting them inside if block.

struct ContentView: View {
    @State var shouldShowList = false
    var body: some View {
        
        VStack {
            if shouldShowList {
                VStack {
                    ForEach(0 ..< 5) { item in
                        Text("Hello, world!")
                            .padding()
                    }
                }
            }
            
            Button( shouldShowList ? "Hide" : "Show") {
                shouldShowList.toggle()
            }
        }
        .animation(.easeInOut, value: shouldShowList) // animation
    }
}

Instead,

You can use a view modifier to show/hide.

1. create your own ViewModifire
struct Show: ViewModifier {
    let isVisible: Bool

    @ViewBuilder
    func body(content: Content) -> some View {
        if isVisible {
            EmptyView()
        } else {
            content
        }
    }
}

extension View {
    func show(isVisible: Bool) -> some View {
        ModifiedContent(content: self, modifier: Show(isVisible: isVisible))
    }
}
  1. Usage
struct ContentView: View {
    @State var shouldShowList = false
    var body: some View {
        
        VStack {
            VStack {
                ForEach(0 ..< 5) { item in
                    Text("Hello, world!")
                        .padding()
                }
            }
            .show(isVisible: shouldShowList) //<= here
            
            Button( shouldShowList ? "Hide" : "Show") {
                shouldShowList.toggle()
            }
        }
        .animation(.easeInOut, value: shouldShowList) // animation
    }
}
user_94407090
Related