SwiftUI导航栏自定义Button与Menu尺寸不一致问题排查

在App中自定义导航栏内按钮和菜单外观时，分别实现了BarButtonStyle（按钮样式）和BarMenuStyle（菜单样式）并应用到navigationBarTrailing的ToolbarItemGroup中，但导航栏里的菜单（左侧）和按钮（右侧）尺寸不一致，临时调整菜单padding效果不好，想知道问题出在哪？

按钮样式代码 #

struct BarButtonStyle: ButtonStyle {
    
    private let cornerRadiusWidth:CGFloat = 4.0
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(4)
            .foregroundColor(Color.barButtonForeground)
            .background(
                LinearGradient(gradient: Gradient(colors: [Color.barButtonBackground1, Color.barButtonBackground2]),
                                             startPoint: .top,
                                             endPoint: .bottom)
                )
            .cornerRadius(cornerRadiusWidth)                
    }
    
}

菜单样式代码 #

struct BarMenuStyle: MenuStyle {
    
    private let cornerRadiusWidth:CGFloat = 4.0
    
    func makeBody(configuration: Configuration) -> some View {
        Menu(configuration)
            .padding(4)
            .foregroundColor(Color.barButtonForeground)
            .background(
                LinearGradient(gradient: Gradient(colors: [Color.barButtonBackground1, Color.barButtonBackground2]),
                                             startPoint: .top,
                                             endPoint: .bottom)
            )
            .cornerRadius(cornerRadiusWidth)
    }
    
}

使用代码 #

// navigation bar trailing
ToolbarItemGroup(placement: .navigationBarTrailing) {
// the menu
    Menu {                  
    }
    label: {
        Image(systemName: displayType.info.image)
    }
    .menuStyle(BarMenuStyle())
// the button                       
    Button(action: {
    }) {
        Image(systemName: "list.number")
            //.resizable()
    }
    .buttonStyle(BarButtonStyle())
}

显示效果 #

问题出在MenuStyle的实现方式上：你直接给Menu(configuration)添加了padding和背景，但Menu本身内部默认带有额外的布局边距，和Button的默认布局逻辑不一样。而ButtonStyle是直接修改了label的布局，两者的层级不同，导致最终尺寸差异。

正确的做法是在MenuStyle中，直接修改configuration的label（也就是菜单的触发视图）的样式，和ButtonStyle的逻辑对齐，而不是给整个Menu加样式。

修改后的BarMenuStyle代码：

struct BarMenuStyle: MenuStyle {
    private let cornerRadiusWidth: CGFloat = 4.0
    
    func makeBody(configuration: Configuration) -> some View {
        Menu(configuration) {
            configuration.content
        } label: {
            configuration.label
                .padding(4)
                .foregroundColor(Color.barButtonForeground)
                .background(
                    LinearGradient(gradient: Gradient(colors: [Color.barButtonBackground1, Color.barButtonBackground2]),
                                   startPoint: .top,
                                   endPoint: .bottom)
                )
                .cornerRadius(cornerRadiusWidth)
        }
    }
}

原理说明 #

• ButtonStyle中，我们是直接对configuration.label添加样式，这是Button的触发视图，没有额外的容器边距。
• 原MenuStyle中，给Menu(configuration)添加样式，相当于给整个Menu容器加padding，而Menu内部的触发视图本身还有默认的内边距，叠加后导致整体尺寸偏大。
• 修改后，我们直接对Menu的label（触发视图）应用和Button完全一致的样式，两者的布局逻辑对齐，尺寸就会统一。

另外，你也可以给Button和Menu的触发视图统一设置固定的frame，比如.frame(width: 32, height: 32)，进一步确保尺寸完全一致：

比如在ButtonStyle的label后加：

.frame(width: 32, height: 32)

在MenuStyle的label后也加同样的frame，这样不管图标大小如何，容器尺寸都统一。

内容的提问来源于stack exchange，提问作者alex.bour