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

Posted 2023-02-24

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

【英文标题】：How to get round shape images of the same size based on SF Symbols in SwiftUI?

【发布时间】：2021-03-24 13:52:46

【问题描述】：

在我的应用程序中，我想获得基于相同大小的 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")
    
    

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

【参考方案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))
            
                   
        
            
    

【讨论】：

非常感谢！按钮的尺寸确实相同。另外，使用 ButtonStyle 使界面看起来更漂亮。这对我来说是一项新技能。

@vtezin 请验证答案是否正确

完成。再次感谢您的回答））

【参考方案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)
            
        

    

【讨论】：

感谢您的回答，但我使用不同的符号并希望所有按钮的设计一致，加号和减号仅用于说明问题。