SwiftUI按钮圆角边缘出现双层边框问题求助

你的问题是因为SwiftUI的Button默认带有内置样式（比如交互状态下的边框或高亮效果），和你手动添加的overlay边框叠加在了一起，导致出现双层效果。

直接给Button加上buttonStyle(.plain)就能去掉默认样式，只保留你自定义的边框，修改后的代码如下：

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        Button(action: { action() }) {
            Label("Name", image: "info")
        }
        .buttonStyle(.plain) // 关键：移除默认按钮样式
        .frame(height: 40)
        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
        .foregroundColor(.green)
        .background(.clear)
        .overlay(
            Capsule(style: .continuous)
                .stroke(.green, lineWidth: 1)
        )
    }
}

如果之后需要自定义按钮的点击高亮效果，可以通过状态变量手动控制，示例如下：

@State private var isButtonPressed = false

// ...

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        Button(action: { action() }) {
            Label("Name", image: "info")
        }
        .buttonStyle(.plain)
        .frame(height: 40)
        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
        .foregroundColor(.green)
        .background(isButtonPressed ? Color.green.opacity(0.1) : .clear)
        .overlay(
            Capsule(style: .continuous)
                .stroke(isButtonPressed ? Color.green.opacity(0.8) : .green, lineWidth: 1)
        )
        .simultaneousGesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in isButtonPressed = true }
                .onEnded { _ in isButtonPressed = false }
        )
    }
}

这样就能完全掌控按钮的外观与交互状态，避免系统默认样式的干扰。

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