如何在iPadOS复刻Journal应用工具栏按钮的玻璃效果切换

要实现你想要的效果，需要结合状态管理、glassEffect和自定义的激活/悬停样式切换，以下是调整后的代码：

import SwiftUI

struct ToolbarButtonView: View {
    // 跟踪按钮激活状态
    @State private var isButtonActive = false
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Hello, World!")
            }
            .toolbar {
                ToolbarItemGroup(placement: .primaryAction) {
                    CustomToolbarButton(isActive: $isButtonActive)
                }
            }
        }
    }
}

// 封装自定义工具栏按钮
struct CustomToolbarButton: View {
    @Binding var isActive: Bool
    // 跟踪Pencil悬停状态
    @State private var isHovered = false
    
    var body: some View {
        Button {
            isActive.toggle()
        } label: {
            Image(systemName: "pencil.tip.crop.circle")
                .font(.title)
                .foregroundStyle(isActive ? .white : .tint)
        }
        // 悬停时显示玻璃效果，激活时禁用
        .glassEffect(isActive ? .disabled : .regular.tint(.orange).interactive(),
                     for: .hover)
        // 激活时设置实心背景
        .background(isActive ? Color.orange : Color.clear)
        .clipShape(Circle())
        // 监听Pencil悬停事件
        .onHover { hovering in
            isHovered = hovering
        }
    }
}

#Preview {
    ToolbarButtonView()
}

关键调整说明： #

• 用@State跟踪按钮的激活状态和悬停状态，实现样式的动态切换
• 给glassEffect添加条件判断：激活时禁用玻璃效果，悬停时启用带橙色色调的交互式玻璃效果
• 激活状态下给按钮添加实心橙色背景，同时切换图标颜色为白色以保证对比度
• 用onHover监听Pencil的悬停事件，配合glassEffect的.interactive()实现响应式效果

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