WatchOS SwiftUI 动画视图调整父级大小答案

【问题标题】：WatchOS SwiftUI animation view resizing parentWatchOS SwiftUI 动画视图调整父级大小
【发布时间】：2020-02-08 02:46:22
【问题描述】：

我在 swiftUI 视图内的圆圈上有一个简单的动画，但是当我在其父视图中使用该视图时，它会在动画期间调整父视图的大小。如果我将相同的动画直接复制到父视图中，它会按预期工作。

我的动画视图是：

struct Spinner: View{

@State private var spin = false

var body: some View {
    Image(systemName: "arrow.2.circlepath")
        .resizable()
        .frame(width: 50, height: 40)
        .rotationEffect(
            .degrees(spin ? 360: 0)
        )
        .animation(
            Animation.linear(duration: 1).repeatForever(autoreverses: false)
        )
        .onAppear(){
            self.spin.toggle()
        }

    }
}

内部滚动视图：

 ScrollView {
        VStack {
            Text("Hello World").bold()            
            Button(action: {}){
                Spinner()
            }
        }
    }

但是在视图内部是有效的：

直接在视图中

 ScrollView {
        VStack {
            Text("Hello World").bold()            
            Button(action: {}){
                Image(systemName: "arrow.2.circlepath")
                .resizable()
                .frame(width: 50, height: 40)
                .rotationEffect(
                     .degrees(spin ? 360: 0)
                )
                .animation(
                      Animation.linear(duration: 1).repeatForever(autoreverses: false)
                )
                .onAppear(){
                    self.spin.toggle()
                }
            }
        }
    }

【问题讨论】：

如果不介意可以添加一些示例代码以了解更多
更新了@HarshalBhavsar
第二张图也可以是gif吗？
完成@HarshalBhavsar
抱歉延迟回复

标签： ios xcode swiftui watchos

【解决方案1】：

我尝试了你的两个代码块

案例 1

struct Spinner: View{

    @State private var spin = false

    var body: some View {
        Image(systemName: "arrow.2.circlepath")
            .resizable()
            .frame(width: 50, height: 40)
            .rotationEffect(
                .degrees(spin ? 360: 0)
        )
            .animation(
                Animation.linear(duration: 1).repeatForever(autoreverses: false)
        )
            .onAppear(){
                self.spin.toggle()
        }
    }
}

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("Hello World").bold()
                Text("Hello World").bold()
                Text("Hello World").bold()
                Text("Hello World").bold()
                Button(action: {}){
                    Spinner()
                }
                Text("Hello World").bold()
                Text("Hello World").bold()
                Text("Hello World").bold()
                Text("Hello World").bold()
            }
        }
    }
}

案例 2

struct ContentView: View {
    @State private var spin = false

    var body: some View {
        ScrollView {
            VStack {
                Text("Hello World").bold()
                Text("Hello World").bold()
                Text("Hello World").bold()
                Text("Hello World").bold()
                Button(action: {}){
                    Image(systemName: "arrow.2.circlepath")
                        .resizable()
                        .frame(width: 50, height: 40)
                        .rotationEffect(
                            .degrees(spin ? 360: 0)
                    )
                        .animation(
                            Animation.linear(duration: 1).repeatForever(autoreverses: false)
                    )
                        .onAppear(){
                            self.spin.toggle()
                    }
                }
                Text("Hello World").bold()
                Text("Hello World").bold()
                Text("Hello World").bold()
                Text("Hello World").bold()
            }
        }
    }
}

注意：我添加了一些额外的标签以使内容可滚动

以上两个都给出了相同的结果，我认为你以前的 gif 不是最近的代码。

请再试一次，看看是否有效。如果您在示例中添加的代码是正确的应该可以工作

【讨论】：