如何实现macOS 26控制中心的液态玻璃磁贴效果？

WWDC25推出的.glassEffect修饰器仅能实现整体透明度均匀的圆形玻璃按钮效果，而macOS 26控制中心的磁贴具备边角区域更高的半透明性和亮度，是否有办法实现这种效果？

我的尝试代码： #

struct LiquidGlassButtonStyle: ButtonStyle {

    @State private var backgroundLuminosity: Double = 1.0
    private var adaptiveGlassTint: Color? {
        if backgroundLuminosity > 0.7 { return Color.black.opacity(0.2) }
        if backgroundLuminosity < 0.4 { return Color.white.opacity(0.5) }
        return nil
    }
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(adaptiveGlassTint)
            .glassEffect()
            .mask(
                Circle()
            )
            .saturation(1.5)
            .brightness(0.05)
            .overlay(
                Circle().stroke(
                    AngularGradient(
                        gradient: Gradient(colors: [
                            .white, .white.opacity(0.2), .white, .white.opacity(0.2), .white
                        ]),
                        center: .center,
                        startAngle: .degrees(0),
                        endAngle: .degrees(360)
                    ),
                    lineWidth: 0.6
                )
                .rotationEffect(.degrees(45))
                .opacity(0.7)
                .padding(-0.6)
            )
            .background(
                Circle().stroke(
                    AngularGradient(
                        gradient: Gradient(colors: [
                            .white, .white.opacity(0.15), .white, .white.opacity(0.15), .white
                        ]),
                        center: .center,
                        startAngle: .degrees(0),
                        endAngle: .degrees(360)
                    ),
                    lineWidth: 1
                )
                .rotationEffect(.degrees(45))
                .opacity(0.6)
            )
            .scaleEffect(configuration.isPressed ? 0.95 : 1)
            .animation(.bouncy, value: configuration.isPressed)
    }
}

解决方案 #

要实现边角更通透明亮的效果，需在原生.glassEffect基础上叠加分层渐变蒙版，核心是通过径向渐变提亮边角区域，配合自适应色调优化明暗背景表现。

修改后的代码示例：

struct LiquidGlassButtonStyle: ButtonStyle {
    // 可结合背景亮度读取逻辑动态调整，此处简化为固定值
    private let backgroundLuminosity: Double = 1.0
    
    private var adaptiveGlassTint: Color? {
        if backgroundLuminosity > 0.7 { return Color.black.opacity(0.15) }
        if backgroundLuminosity < 0.4 { return Color.white.opacity(0.4) }
        return nil
    }
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(adaptiveGlassTint)
            .glassEffect()
            // 叠加对角径向渐变，提亮边角区域
            .overlay(
                Group {
                    Circle()
                        .fill(
                            RadialGradient(
                                gradient: Gradient(colors: [.white.opacity(0.25), .white.opacity(0.1), .clear]),
                                center: .topLeading,
                                startRadius: 0,
                                endRadius: 80
                            )
                            .blendMode(.screen)
                        )
                    Circle()
                        .fill(
                            RadialGradient(
                                gradient: Gradient(colors: [.white.opacity(0.25), .white.opacity(0.1), .clear]),
                                center: .bottomTrailing,
                                startRadius: 0,
                                endRadius: 80
                            )
                            .blendMode(.screen)
                        )
                }
            )
            .mask(Circle())
            .saturation(1.4)
            .brightness(configuration.isPressed ? 0 : 0.08)
            .overlay(
                Circle().stroke(
                    AngularGradient(
                        gradient: Gradient(colors: [.white, .white.opacity(0.2), .white, .white.opacity(0.2), .white]),
                        center: .center,
                        startAngle: .degrees(0),
                        endAngle: .degrees(360)
                    ),
                    lineWidth: 0.6
                )
                .rotationEffect(.degrees(45))
                .opacity(configuration.isPressed ? 0.5 : 0.7)
                .padding(-0.6)
            )
            .background(
                Circle().stroke(
                    AngularGradient(
                        gradient: Gradient(colors: [.white.opacity(0.8), .white.opacity(0.15), .white.opacity(0.8), .white.opacity(0.15), .white.opacity(0.8)]),
                        center: .center,
                        startAngle: .degrees(0),
                        endAngle: .degrees(360)
                    ),
                    lineWidth: 1
                )
                .rotationEffect(.degrees(45))
                .opacity(configuration.isPressed ? 0.4 : 0.6)
            )
            .scaleEffect(configuration.isPressed ? 0.95 : 1)
            .animation(.bouncy(duration: 0.2), value: configuration.isPressed)
    }
}

关键调整点：

• 新增两个对角径向渐变叠加层，使用screen混合模式提亮边角，模拟高通透感
• 优化自适应色调的透明度，让玻璃效果更贴合系统风格
• 亮度、边框透明度随按压状态动态变化，增强交互反馈
• 调整饱和度参数，提升视觉层次感

进阶优化建议：

• 读取按钮所在位置的实际背景颜色亮度，动态调整渐变强度和色调
• 给渐变添加轻微模糊，让边角过渡更自然

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