如何根据 SwiftUI 中的字体大小定义按钮的大小

发布于07月12日

如果我已经有一个按钮，其字体大小由.font()修饰符定义，如下所示:

Button("Hello"){}
    .font(.system(size: 10))

我如何使用ButtonStyle和.buttonStyle()来决定这个按钮的大小？

struct CustomButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        let size = 2 * configuration.label.fontSize       // Something like this
        
        configuration.label
            .frame(width: size, height: size)
            .background(.red)
    }
    
}

或者这种方法还有其他 Select 吗？我试着直接使用.padding().但它不能正常工作.正如您在上面的屏幕截图中所看到的，由于SF符号的大小不同，因此生成了不同的大小.

func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(.red)
    }

推荐答案

SwiftUI允许创建字体，但不允许读取字体属性，因此您必须将其存储在某个模型层(例如UIFont)并从外部注入.或者根本不要使用它，而是使用一些动态的东西，如填充等，因为文本/标签会自动将字体大小调整为帧大小.

我的意思是:

private let uiFont = UIFont.preferredFont(forTextStyle: .title1)
private var font: Font { Font(uiFont as CTFont) }

var body: some View {
    HStack {
        Button(action: {}) {
            Image(systemName: "star")
        }

        Button(action: {}) {
            Image(systemName: "bolt.horizontal")
        }
    }
    .buttonStyle(CustomButtonStyle(font: uiFont)) // << !!
    .font(font)                                   // << !!

和风格

struct CustomButtonStyle: ButtonStyle {
    var font = UIFont.preferredFont(forTextStyle: .body)  // << default !!

    func makeBody(configuration: Configuration) -> some View {
        let size = font.lineHeight * 2.0 // << can use any param and/or factor !!
        configuration.label
            .frame(width: size, height: size)
            .background(.red)
    }
}

这给出了(Xcode 13.4/iOS 15.5):