如何在 SwiftUI 中基于 SF Symbols 获得相同大小的圆形图像？

Question

在我的应用程序中，我想获得基于相同大小的 SF 符号的简单圆形按钮。但是，相同的方法会根据符号产生不同的图像大小。 例如，带有加号的图像大于减号。

为了解决这个问题，我使用了 ZStack 技巧，在该技巧中，我在减号下方放置了一个透明的加号。但我认为这不是最好的解决方案。有没有更好的解决方案？

HStack{
    
    Image(systemName: "plus")
        .padding()
                .overlay(
                    Circle()
                        .stroke(Color.primary,
                                lineWidth:1))
        
        
    Image(systemName: "minus")
        .padding()
                .overlay(
                    Circle()
                        .stroke(Color.primary,
                                lineWidth:1))
    //my solution
    ZStack {
      Image(systemName: "plus")
        .padding()
        .opacity(0.0)
        .overlay(
            Circle()
                .stroke(Color.primary,
                        lineWidth:1))
      Image(systemName: "minus")
    }
    
}

中间的“减号”比右边的“加号”、“减号”要小——我的解决方案：

Answer 1

您可以使用 ViewModifier 或者如果是按钮 ButtonStyle

视图修改器

    @available(iOS 13.0, *)
struct fillButtonCircle: ViewModifier {
    var foregroundColor: Color = .white
    var backgroundColor: Color = .green
    var dimension: CGFloat = 10
    func body(content: Content) -> some View {
        content
            .foregroundColor(foregroundColor)
            .padding(dimension)
            .background(backgroundColor)
            .clipShape(Circle())
            .frame(width: dimension, height: dimension)
            .overlay(
                Circle()
                    .stroke(Color.primary,
                            lineWidth:1))
    }
}

按钮样式

    @available(iOS 13.0, *)
struct CircleScaleButton: ButtonStyle {
    var color: Color = .blue
    var maxHeight: CGFloat = 35
    
    public func makeBody(configuration: Self.Configuration) -> some View {
        
            configuration.label
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: maxHeight, alignment: .center)
                .foregroundColor(.black)
                .background(RoundedRectangle(cornerRadius: 35/2.0).fill(self.color))
                .compositingGroup()
                .clipShape(Circle())
                .overlay(
                    Circle()
                        .stroke(Color.primary,
                                lineWidth:1))
                .opacity(configuration.isPressed ? 0.8 : 1.0)
                .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
    }
}

例子

    struct SwiftUIViewTest: View {
    var body: some View {
       
                
        VStack {
            Text("Button")
            
            HStack {
                Button(action: {}, label: {
                    Image(systemName: "plus")
                })
                .buttonStyle(CircleScaleButton(color: .clear, maxHeight: 45))
                
                Button(action: {}, label: {
                    Image(systemName: "minus")
                })
                .buttonStyle(CircleScaleButton(color: .clear, maxHeight: 45))
            }
            
            Spacer()
                .frame(height: 50)
            
            Text("Image")
            HStack {
               
                Image(systemName: "plus")
                    .modifier(fillButtonCircle(foregroundColor: .black, backgroundColor: .clear, dimension: 40))
                               
                Image(systemName: "minus")
                    .modifier(fillButtonCircle(foregroundColor: .black, backgroundColor: .clear, dimension: 40))
            }
                   
        }
            
    }
}

Answer 2

使用 .circle

---

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        HStack {
            
            Image(systemName: "plus.circle")
                .resizable()
                .frame(width: 50, height: 50, alignment: .center)

            
            
            Image(systemName: "minus.circle")
                .resizable()
                .frame(width: 50, height: 50, alignment: .center)
            
        }

    }
}