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 ?

CodePudding user response：

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))
    }
}

2. 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
    }
}