按下按钮后如何显示列表（使用动画）？

Question

我想要按下按钮搜索


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

searchUser() 中的列表显示具有此名字和姓氏的朋友的姓名及其详细信息显示在搜索按钮下方的此视图中，一旦按下按钮但带有动画？谢谢

我尝试制作动画，但没有成功。有谁知道我该怎么做？

Answer 1

您可以 show/hide 有条件地查看，方法是将它们放在 if 块中。

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

相反，

您可以使用视图修饰符 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))
    }
}

用法

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

按下按钮后如何显示列表（使用动画）？

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

animation

list

ios

swiftui

相反，