SwiftUI Button自定义

image.png

1. 默认样式

// 默认是automatic
Button("默认"){}
Button("automatic"){}.buttonStyle(.automatic).foregroundColor(Color.mint)
Button("bordered"){}.buttonStyle(.bordered).foregroundColor(Color.mint)
Button("borderedProminent"){}.buttonStyle(.borderedProminent)

2. 自定义文本按钮

自定义label，可实现各种想要的效果。

 Button(action:  label: {
Text("背景样式")
.foregroundStyle(Color.white)
.padding(6)
.padding(.horizontal,16) 
.background(color)
})
                
Button(action: {}, label: {
Text("边框样式")
.foregroundStyle(color)
.padding(6)
.padding(.horizontal,16)
.border(color, width: {})
})

3. SFSymbol按钮

通过SFSymbol的设置，实现各种效果，还可基于状态，实现动态效果。

 Button(action: {}, label: {
                     Image(systemName: "multiply")
                        .bold()
                        .foregroundColor(.white)
                        .padding(6)
                        .background(Color.black.opacity(0.58))
                        .clipShape(RoundedRectangle(cornerRadius: 8))
                })
                
 Button(action:{}, label: {
                     Image(systemName: "magnifyingglass")
                        .foregroundColor(.black)

                })
                
                
 Button(action: {}, label: {
                     Image(systemName: "play.circle.fill")
                        .font(.largeTitle)
                        .bold()
                        .foregroundColor(.mint)
                })
                
Button(action: {}, label: {
                     Image(systemName: "forward.end")
                        .bold()
                        .foregroundColor(.white)
                        .padding(6)
                        .background(Color.black.opacity(0.58))
                        .clipShape(RoundedRectangle(cornerRadius: 8))
                })

4. 图文型按钮

这是另一种常用的按钮样式，直观、实用。

Button(action: {}, label: {
                HStack{
                    Image(systemName: "apple.logo")
                    Text("Sign in with Apple")
                }
                .foregroundStyle(Color.white)
                .padding(10)
                .padding(.horizontal,44)
                .background(Capsule().fill(color))
            })