SwiftUI工具栏实现圆角矩形按钮区域及样式适配问题

一、实现圆角矩形按钮效果 #

无需依赖Storyboard/XIB，直接通过SwiftUI的视图修饰符和自定义样式就能实现你要的效果，核心是给Toolbar内的Button添加带圆角的背景，并保留系统交互反馈：

基础实现代码 #

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("主内容区域")
                .toolbar {
                    // 左侧返回类圆角按钮
                    ToolbarItem(placement: .navigationBarLeading) {
                        Button(action: {
                            // 按钮逻辑
                        }) {
                            Image(systemName: "arrow.left")
                                .padding(8)
                        }
                        .background(.tertiary, in: RoundedRectangle(cornerRadius: 8))
                        .foregroundColor(.primary)
                    }
                    
                    // 右侧多按钮组
                    ToolbarItem(placement: .navigationBarTrailing) {
                        HStack(spacing: 8) {
                            Button(action: {}) {
                                Image(systemName: "square.and.pencil")
                                    .padding(8)
                            }
                            .background(.tertiary, in: RoundedRectangle(cornerRadius: 8))
                            
                            Button(action: {}) {
                                Image(systemName: "ellipsis.circle")
                                    .padding(8)
                            }
                            .background(.tertiary, in: RoundedRectangle(cornerRadius: 8))
                        }
                    }
                }
        }
    }
}

增强交互的自定义按钮样式 #

如果需要更贴近系统原生的按压动态效果，可以自定义ButtonStyle：

struct RoundedToolbarButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(8)
            .background(
                configuration.isPressed ? .quaternary : .tertiary,
                in: RoundedRectangle(cornerRadius: 8)
            )
            .foregroundColor(.primary)
    }
}

// 使用方式
Button(action: {}) {
    Image(systemName: "arrow.left")
}
.buttonStyle(RoundedToolbarButtonStyle())

二、解决.windowToolBarStyle(.unifiedCompact)下项目过小问题 #

该样式默认会压缩Toolbar元素尺寸，可通过以下两种方式强制调整：

• 强制设置最小尺寸：给按钮内容添加固定最小宽高，避免被压缩

  Button(action: {}) {
      Image(systemName: "arrow.left")
          .frame(minWidth: 32, minHeight: 32)
          .padding(8)
  }
  .background(.tertiary, in: RoundedRectangle(cornerRadius: 8))
  

• 指定常规控件尺寸：通过controlSize强制使用系统常规尺寸

  Button(action: {}) {
      Image(systemName: "arrow.left")
          .padding(8)
  }
  .controlSize(.regular)
  .background(.tertiary, in: RoundedRectangle(cornerRadius: 8))
  

• macOS额外适配：配合.toolbarItemSize调整ToolbarItem整体尺寸

  ToolbarItem(placement: .navigationBarLeading) {
      Button(action: {}) {
          Image(systemName: "arrow.left")
              .padding(8)
      }
      .background(.tertiary, in: RoundedRectangle(cornerRadius: 8))
  }
  .toolbarItemSize(.regular)
  

内容的提问来源于stack exchange，提问作者Karl Ehrlich