animation - 如何使用 SwiftUI 在按下按钮时更改图像的边框？

Question

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

这是导航链接：

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 的特定部分（在本例中为图像的边框）。

标签： animationbuttonswiftuiswiftui-navigationlink

Answer 1

您可以使用PrimitiveButtonStyle和传递特定视图并执行您的操作。

这是演示：

创建风格

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)
        }
    }
}

如何使用？

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()
            }))
        }
    }
}