iPadOS UIKit侧边栏导航栏按钮Liquid Glass效果实现求助

问题根源 #

侧边栏的导航栏默认配置和内容视图不一致——要么没启用玻璃态样式，要么按钮的自定义背景覆盖了Liquid Glass效果，导致只有内容视图的按钮能正常显示。

SwiftUI 解决方案（基于NavigationSplitView） #

如果你的侧边栏是用SwiftUI的NavigationSplitView实现的，按以下两步调整：

1. 强制开启侧边栏导航栏的玻璃态背景：

struct SidebarView: View {
    var body: some View {
        NavigationStack {
            List {
                // 侧边栏列表内容
            }
            .navigationTitle("侧边栏")
            // 显式设置导航栏可见并应用玻璃态材质
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbarBackground(.ultraThinMaterial, for: .navigationBar)
            // 可选：让导航栏随滚动适配样式
            .toolbarScrollableAxes(.vertical)
        }
    }
}

2. 给侧边栏导航栏按钮添加玻璃态背景：
   如果按钮是自定义样式，避免使用不透明背景，直接套用玻璃态材质：

.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Button(action: toggleSidebar) {
            Image(systemName: "sidebar.left")
        }
        .background(.ultraThinMaterial, in: Circle())
    }
}

UIKit 解决方案（基于UISplitViewController） #

如果是UIKit的分栏控制器，参考以下配置：

1. 配置侧边栏导航栏为玻璃态：

// 获取侧边栏对应的导航控制器
guard let sidebarNav = splitViewController?.viewControllers.first as? UINavigationController else { return }
// 同步滚动边缘样式与标准样式，开启透明玻璃态效果
sidebarNav.navigationBar.scrollEdgeAppearance = sidebarNav.navigationBar.standardAppearance
sidebarNav.navigationBar.scrollEdgeAppearance?.backgroundColor = UIColor.systemBackground.withAlphaComponent(0.1)
sidebarNav.navigationBar.isTranslucent = true

2. 给导航栏按钮添加玻璃态背景：
   若使用自定义按钮，通过UIVisualEffectView实现玻璃态效果：

let toggleBtn = UIBarButtonItem()
// 创建玻璃态背景视图
let bgView = UIVisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial))
bgView.frame = CGRect(x: 0, y: 0, width: 34, height: 34)
bgView.layer.cornerRadius = 17
bgView.clipsToBounds = true
// 添加按钮图标
let iconView = UIImageView(image: UIImage(systemName: "sidebar.left"))
iconView.tintColor = .label
iconView.frame = bgView.bounds
iconView.contentMode = .center
bgView.contentView.addSubview(iconView)
// 绑定按钮事件
toggleBtn.customView = bgView
toggleBtn.action = #selector(toggleSidebar)
toggleBtn.target = self

必查项 #

• 确保App部署目标为iOS 15及以上，低版本系统不支持ultraThinMaterial这类Liquid Glass相关材质。
• 检查侧边栏导航栏是否被设置了固定的不透明背景色，这会直接覆盖玻璃态效果。
• 侧边栏的滚动视图（如List、UITableView）需将contentInsetAdjustmentBehavior设为.automatic，保证导航栏能与滚动行为联动。

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