悬停自定义按钮时的矩形叠加

Posted 2023-02-24

【中文标题】悬停自定义按钮时的矩形叠加

【英文标题】：Rectangle overlay on hovering a custom button

【发布时间】：2020-05-07 09:39:23

【问题描述】：

我正在尝试定义一个自定义按钮样式，悬停时会在该按钮周围弹出一个矩形。

struct CustomButtonStyle: ButtonStyle 
@State private var isOverButton = false

func makeBody(configuration: Self.Configuration) -> some View 

    ZStack 
        configuration.label
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding()
            .foregroundColor(.white)
            .background(Color("Frost1"))
    
    .padding(3)
    .onHover  over in
        self.isOverButton = over
        print("isOverButton:", self.isOverButton, "over:", over)
    
    .overlay(VStack 
        if self.isOverButton 
            Rectangle()
                .stroke(Color("Frost1"), lineWidth: 2)
         else 
            EmptyView()
        
    )

打印行显示设置变量“isOverButton”不起作用。我应该使用哪种类型的变量状态，可以从“onHover”更新并更新“overlay”？

【参考方案1】：

这里有一个解决方案。使用 Xcode 11.4 测试。

struct TestOnHoverButton: View 
    var body: some View 
        Button("Button") 
            .buttonStyle(CustomButtonStyle())
    


struct CustomButtonStyle: ButtonStyle 

    private struct CustomButtonStyleView<V: View>: View 
        @State private var isOverButton = false

        let content: () -> V

        var body: some View 
            ZStack 
                content()
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.blue)
            
            .padding(3)
            .onHover  over in
                self.isOverButton = over
                print("isOverButton:", self.isOverButton, "over:", over)
            
            .overlay(VStack 
                if self.isOverButton 
                    Rectangle()
                        .stroke(Color.blue, lineWidth: 2)
                 else 
                    EmptyView()
                
            )
        
    

    func makeBody(configuration: Self.Configuration) -> some View 
        CustomButtonStyleView  configuration.label