如何制作Liquid Glass风格的SwiftUI圆形Next按钮？

问题根源在于Button的.plain样式会为内部图标保留默认水平内边距，chevron这类窄图标会让按钮实际水平尺寸略大于你设置的44pt，最终clipShape(Circle())裁剪后呈现胶囊形；而加号图标本身宽高接近，所以能显示为圆形。

以下两种方案可以实现完美圆形按钮：

方案一：将样式逻辑移至Button Label内部 #

把frame、background和clipShape直接应用在图标所在的Label里，强制固定尺寸：

.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Button {
            // 按钮操作逻辑
        } label: {
            Image(systemName: "chevron.forward")
                .fontWeight(.medium)
                .frame(width: 44, height: 44)
                .background(.white.opacity(0.3))
                .clipShape(Circle())
        }
        .buttonStyle(.plain)
    }
}

方案二：自定义ButtonStyle（推荐） #

通过自定义样式完全控制按钮布局，还能轻松添加按压态反馈效果：

// 自定义圆形玻璃按钮样式
struct CircularGlassButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .fontWeight(.medium)
            .frame(width: 44, height: 44)
            // 按压时降低透明度模拟交互反馈
            .background(.white.opacity(configuration.isPressed ? 0.2 : 0.3))
            .clipShape(Circle())
    }
}

// 在工具栏中使用
.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Button {
            // 按钮操作逻辑
        } label: {
            Image(systemName: "chevron.forward")
        }
        .buttonStyle(CircularGlassButtonStyle())
    }
}

原理说明 #

原代码中样式是应用在Button本身上，Button会根据内部图标自动调整最小尺寸，导致实际宽高不一致；将样式移至Label内部或用自定义样式固定宽高后，背景和裁剪严格基于44x44的正方形，就能得到标准圆形。

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