Animation 如何使用SwiftUI更改按键上图像的边框？

我有一个由图像和一些文本组成的导航链接，我想在按下链接时更改图像的边框颜色

以下是导航链接：

NavigationLink(destination: TrickSelectView()) {
    HStack{
        Image("learnTricksButton")
            .resizable()
            .clipShape(Circle())
            .overlay(Circle().stroke(Color(red: 0.95, green: 0.32, blue: 0.34), lineWidth: 4))
            .shadow(radius: 7)
            .frame(width: width, height: width)
                                
         VStack{
            Text("Trick")
                .font(.system(.largeTitle, design: .rounded))
                .foregroundColor(Color(red: 0.13, green: 0.15, blue: 0.22))

            Text("Personalise your learning!")
                .font(.system(.subheadline, design: .rounded))
                .foregroundColor(Color(red: 0.28, green: 0.32, blue: 0.37))
          }
     }.padding(.bottom, 50)
}.buttonStyle(LearnButtonEffect())

以下是迄今为止我对按钮样式的了解：

struct LearnButtonEffect: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .background(configuration.isPressed ? Color.green.opacity(0.5) : Color.green)
            .shadow(color: Color.gray, radius: 10, x: 0, y: 0)
            .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
    }
}

一般来说，我想知道如何在按钮样式定义中引用NavigationLink的特定部分（在本例中为图像边框）。

因为在SwiftUI中，我们不保留对任何视图的任何引用。相反，我们更改值（

@State

，

@Binding

，

@observeobject

，

@StatObject

）。视图被反映出来

struct ContentView:View{
@State var isActive=false//启动导航
@State var isClicked=false//跟踪单击的时间
var body：一些观点{
导航视图{
导航链接(
目的地：文本（“目的地”），
isActive:$isActive，
标签：{
按钮（操作：{
isActive=true
isClicked=true
}，标签：{
HStack{
图像（“LearnTrackButton”）
.可调整大小（）
.clipShape（圆（））
.overlay（圆圈（）.stroke（isClicked？Color.黑色：颜色（红色：0.95，绿色：0.32，蓝色：0.34），线宽：4））
.阴影（半径：7）
.框架（宽度：100，高度：100）
VStack{
文本（“技巧”）
.font（.system（.largeTitle，设计：。四舍五入））
.foregroundColor（颜色（红色：0.13，绿色：0.15，蓝色：0.22））
文本（“个性化学习！”）
.font（.system（.subheadline，设计：。四舍五入））
.foregroundColor（颜色（红色：0.28，绿色：0.32，蓝色：0.37））
}
}.padding（.bottom，50）
})
})
}
}
}

您可以使用

基本按钮样式

传递特定视图并执行操作

以下是演示：

创造一种风格

struct LearnButtonEffectButtonStyle: PrimitiveButtonStyle {
    var image: Image
    var action: () -> Void
    
    func makeBody(configuration: PrimitiveButtonStyle.Configuration) -> some View {
        ButtonView(configuration: configuration, image: image, action: action)
    }
    
    struct ButtonView: View {
        @State private var pressed = false
        
        let configuration: PrimitiveButtonStyle.Configuration
        let image: Image
        var action: () -> Void
        
        var body: some View {
            return HStack{
                image
                    .resizable()
                    .clipShape(Circle())
                    .overlay(Circle().stroke(self.pressed ? Color.yellow : Color.blue, lineWidth: 4)) // <<- You can change here .overlay(Circle().stroke(self.pressed ? Color.yellow : Color.blue, lineWidth: 4))
                    .shadow(radius: 7)
                    .frame(width: 100, height: 50)
                    .border(self.pressed ? Color.yellow : Color.blue, width: 2) //<<- remove it if not required
                configuration.label
            }
            .padding(.bottom, 50)
            .onLongPressGesture(minimumDuration: 0.2, maximumDistance: .infinity, pressing: { pressing in
                withAnimation(.easeInOut(duration: 0.2)) {
                    self.pressed = pressing
                }
                if !pressing {
                    action()
                }
            }, perform: {
                print("Perform")
            })
            .background(self.pressed ? Color.green.opacity(0.5) : Color.green)
            .shadow(color: Color.gray, radius: 10, x: 0, y: 0)
            .scaleEffect(self.pressed ? 0.9 : 1.0)
        }
    }
}

---

我认为OP想要的是唯一的图像，而不是整个按钮。@RajaKishan是的

struct ContentView: View {
    
    @State private var isActive = false
    
    var body: some View {
        NavigationView{
            NavigationLink(destination: Text("test"), isActive: $isActive) {
                VStack{
                    Text("Trick")
                        .font(.system(.largeTitle, design: .rounded))
                        .foregroundColor(Color(red: 0.13, green: 0.15, blue: 0.22))
                    
                    Text("Personalise your learning!")
                        .font(.system(.subheadline, design: .rounded))
                        .foregroundColor(Color(red: 0.28, green: 0.32, blue: 0.37))
                }
            }.buttonStyle(LearnButtonEffectButtonStyle(image: Image("learnTricksButton"), action: {
                self.isActive.toggle()
            }))
        }
    }
}