主页 / coding / 问题 / 78857449
Accepted
visandres
Asked: 2024-08-11 11:24:03 +0800 CST

旋转动画不适用于 ViewBuilder 函数

  • 772

我正在尝试使用 SwiftUI 来更好地理解它，但我无法理解这种行为上的差异。在此示例代码中，为什么结构视图能够旋转而 @ViewBuilder 函数却不能旋转？

struct ContentView: View {
    @State var isSpinning = false
    
    var body: some View {
        StructView()
        funcView()
    }
    
    @ViewBuilder
    func funcView() -> some View {
        @State var isSpinning = false
        VStack {
            Button {
                isSpinning.toggle()
            }label: {
                Text("Spin me")
            }
            Image(systemName: "arrow.clockwise")
                .font(.system(size: 80))
                .foregroundColor(.blue)
                .rotationEffect(.degrees(isSpinning ? 360 : 0))
                .animation(.easeInOut(duration: 1), value: isSpinning)
        }
        .padding()
    }
    
    struct StructView: View {
        @State var isSpinning = false
        
        var body: some View {
            VStack {
                Button {
                    isSpinning.toggle()
                }label: {
                    Text("Spin me")
                }
                Image(systemName: "arrow.clockwise")
                    .font(.system(size: 80))
                    .foregroundColor(.blue)
                    .rotationEffect(.degrees(isSpinning ? 360 : 0))
                    .animation(.easeInOut(duration: 1), value: isSpinning)
            }
            .padding()
        }
    }

}
swift

1 个回答

  1. Best Answer

    它是否是一个@ViewBuilder函数，或者它是否是一个单独的函数，对于 SwiftUI 来说并不重要。这和你将其内联funcView并直接放入是一样的body。

    var body: some View {
    StructView()
    
    @State var isSpinning = false
    VStack {
        Button {
            isSpinning.toggle()
        }label: {
            Text("Spin me")
        }
        Image(systemName: "arrow.clockwise")
            .font(.system(size: 80))
            .foregroundColor(.blue)
            .rotationEffect(.degrees(isSpinning ? 360 : 0))
            .animation(.easeInOut(duration: 1), value: isSpinning)
    }
    .padding()
}

    问题在于，它@State 不能作为局部变量使用。SwiftUI 并非设计用于跟踪@State局部变量。s应始终在结构体中@State声明为实例属性View。

    在您的代码中，您也这样做了。您@State var isSpinning = false直接在 中声明ContentView，但又在 中声明funcView，因此对isSpinning中的引用funcView全部解析为@State在 中声明的funcView。

    @State var isSpinning = false您应该删除中的行funcView，现在对的引用isSpinning将解析为中声明的行ContentView，并且视图将按预期工作。

    请注意，写入所有内容（调用资金/属性实际上等同于此）和将视图组件分成不同的结构之间存在差异。body@ViewBuilderView

    通过将内容放入单独的View结构中，您可以有效地为视图更新创建“屏障”。例如，StructView.body不会在每次发生ContentView更改时调用，因为StructView它不依赖于中的任何内容ContentView。

    另一方面，每次 中有所变化时funcView 都会ContentView被调用，因为您实际上是在 中调用它ContentView.body。

    View因此，一般来说，将视图分成单独的结构体比将视图分成单独的@ViewBuilder funcs 或@ViewBuilder var同一结构体中的 s要好View。这样，视图层次结构顶部的更新不会导致其他所有内容也更新。

    这里我添加了一些print来演示差异：

    struct ContentView: View {
    @State var isSpinning = false
    
    @State var something = "Foo"
    
    var body: some View {
        StructView()
        funcView()
        Button("Change something") {
            something = "Bar"
        }
        Text("Something: \(something)")
    }
    
    @ViewBuilder
    func funcView() -> some View {
        let _ = print("funcView Called")
        VStack {
            Button {
                isSpinning.toggle()
            }label: {
                Text("Spin me")
            }
            Image(systemName: "arrow.clockwise")
                .font(.system(size: 80))
                .foregroundColor(.blue)
                .rotationEffect(.degrees(isSpinning ? 360 : 0))
                .animation(.easeInOut(duration: 1), value: isSpinning)
        }
        .padding()
    }
    
    struct StructView: View {
        @State var isSpinning = false
        
        var body: some View {
            let _ = print("StructView.body Called")
            VStack {
                Button {
                    isSpinning.toggle()
                }label: {
                    Text("Spin me")
                }
                Image(systemName: "arrow.clockwise")
                    .font(.system(size: 80))
                    .foregroundColor(.blue)
                    .rotationEffect(.degrees(isSpinning ? 360 : 0))
                    .animation(.easeInOut(duration: 1), value: isSpinning)
            }
            .padding()
        }
    }
}
    • 1

相关问题