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

Posted 2023-02-23

【中文标题】WatchOS SwiftUI 动画视图调整父级大小

【英文标题】：WatchOS SwiftUI animation view resizing parent

【发布时间】：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

抱歉延迟回复

【参考方案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 不是最近的代码。

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