SwiftUI：动画展开列表部分答案

【问题标题】：SwiftUI: Animate Expand List SectionSwiftUI：动画展开列表部分
【发布时间】：2020-12-21 22:48:13
【问题描述】：

目标：在按下按钮时以展开/折叠样式为部分的外观和消失设置动画。类似于列表中标准行的动画效果。

当前：部分从前缘进入动画，向后缘向外动画。

已尝试：我已尝试对每个部分进行视图翻译，但动画效果并不成功，而且还破坏了行内的选择器。

代码：

struct SectionAnimation: View {
@State var showSection = false
@State var showList = false

var body: some View {
    Form {
        Button(action: {
            withAnimation{
                showSection.toggle()
            }
        }, label: {
            Text("Show Section")
        })

        if showSection {
            Section(header: Text("Section One")){
                Text("First")
            }
            Section(header: Text("Section Two")){
                Text("Second")
            }
            Section(header: Text("Section Three")){
                Text("Third")
            }
        }

//How I want it to look
        Button(action: {
            withAnimation{
                showList.toggle()
            }
        }, label: {
            Text("Show List")
        })

        if showList {
            Text("First")
            Text("Second")
            Text("Third")
        }


    }
    .listStyle(GroupedListStyle())
    
}
}

【问题讨论】：

标签： swift swiftui

【解决方案1】：

我试图实现类似的目标，这就是我所做的：

在表单中创建Text，然后添加.foregroundColor(.blue)，使其看起来像一个按钮，而不是文本，并使用.onTapGesture，它工作。

struct SectionAnimation: View {
@State var showSection = false
@State var showList = false
var body: some View {
    Form {
        Text("Show Section")
            .foregroundColor(.blue)
            .onTapGesture {
                showSection.toggle()
            }

        if showSection {
            Section(header: Text("Section One")){
                Text("First")
            }
            Section(header: Text("Section Two")){
                Text("Second")
            }
            Section(header: Text("Section Three")){
                Text("Third")
            }
        }
        
            Button(action: {
                withAnimation{
                    showList.toggle()
                }
            }, label: {
                Text("Show List")
            })

            if showList {
                Text("First")
                Text("Second")
                Text("Third")
            }
        }.listStyle(GroupedListStyle())
    }
}

【讨论】：

这不会为显示设置动画。就像withAnimation{ showSection.toggle() } 从按钮操作中删除一样。
我知道这不是流畅的动画，但比边到边的动画要好。我也在试图弄清楚这一点。
我同意，同时这也是我在我的应用程序中使用的方法。谢谢。

【解决方案2】：

用ScrollView 很容易实现

var body: some View {
    
    
    GeometryReader { geometry in
        ScrollView(.vertical) {
             VStack{
                Button(action: {
                    withAnimation{
                        showSection.toggle()
                    }
                }, label: {
                    Text("Show Section")
                })

                if showSection {
                    Section(header: Text("Section One")){
                        Text("First")
                    }
                    Section(header: Text("Section Two")){
                        Text("Second")
                    }
                    Section(header: Text("Section Three")){
                        Text("Third")
                    }
                }

        //How I want it to look
                Button(action: {
                    withAnimation{
                        showList.toggle()
                    }
                }, label: {
                    Text("Show List")
                })

                if showList {
                    Text("First")
                    Text("Second")
                    Text("Third")
                }


            }
             }
             .padding()
             .frame(width: geometry.size.width)
             .frame(minHeight: geometry.size.height)

        }
    }

【讨论】：