SwiftUI快速构建一个拟态按钮

22 阅读1分钟

开发新式计算器的时候,想搞一个拟态的主题,没有搜到相关的文章,后面搞出来了,这里记录分享一下

效果图

代码:

import SwiftUI
struct Button01FinalView: View {
    var body: some View {        
        Button {

        } label: {            
            Text("按钮")        
        }        
        .buttonStyle(Button01FinalButtonStyle())    
    }

}

struct Button01FinalButtonStyle:ButtonStyle {

    func makeBody(configuration: Configuration) -> some View {
        configuration.label            
            .frame(width:150,height: 60)            
            .font(.system(size: configuration.isPressed ? 22 : 24))            
            .background(                
                  Color.white                    
                        .shadow(.inner(color:.white, radius: 5, x: configuration.isPressed ? 0 : 5 ,y: configuration.isPressed ? 0 : 5))                    
                        .shadow(.inner(color:.gray.opacity(0.5), radius: 5, x: configuration.isPressed ? 0 : -5 ,y: configuration.isPressed ? 0 : -5))            
            )            
            .clipShape(RoundedRectangle(cornerRadius: 10))            
            .shadow(color:.gray.opacity(0.2), radius: configuration.isPressed ? 0 : 10)
    }
}

#Preview {    
    Button01FinalView()
}

关于我:

目前开发了上线了新式计算器藏本金角人生3个APP

如果有想搞点自己的小东西的同学,欢迎一起交流:Mr_seven100