SwiftUI 中如何让按钮底部边框显示在 GlassEffect 上？

2026-11-06数据小陈

结论

在每个按钮的标签视图上应用 .glassEffect()，再用 .overlay(alignment: .bottom) 绘制选中状态的底边。GlassEffectContainer 用来容纳并协调其中的玻璃效果视图。若把 .glassEffect() 应用在容器外层，效果会作用于组合后的整体，而不是各个按钮。

原代码用 .background 在标签后方绘制底边。玻璃效果可能会遮住这层背景，因此可以改用玻璃效果视图的 overlay，让底边显示在效果上方。

修改示例

struct GroupedGlassBorder: View {
    @State private var selected = 1

    var body: some View {
        GlassEffectContainer {
            HStack {
                BorderButton(title: "One", num: 1, selected: $selected)
                BorderButton(title: "Two", num: 2, selected: $selected)
                BorderButton(title: "Three", num: 3, selected: $selected)
            }
        }
    }
}

struct BorderButton: View {
    var title: String
    var num: Int
    @Binding var selected: Int

    var body: some View {
        Button {
            selected = num
        } label: {
            Text(title)
                .padding(12)
                .glassEffect()
                .overlay(alignment: .bottom) {
                    Capsule()
                        .fill(selected == num ? .red : .clear)
                        .frame(height: 2)
                }
        }
    }
}

.glassEffect() 为按钮标签添加玻璃外观，后续的 overlay 在底部绘制 Capsule。当 selected == num 时，底边为红色；否则使用透明色隐藏。

注意事项

这项调整改变的是按钮玻璃效果与底边的绘制顺序。如果项目的目标系统或 SDK 不支持所用的 SwiftUI 玻璃效果 API，需要先确认该 API 的适用条件。仅凭题目中的代码，无法判断项目的具体配置。