如何：在swift ui按钮操作中激活.overlay

希望在单击按钮（）时使用.overlay为其提供边框。我正在使用@State var

@State var isActive=false

我还没有找到正确的方法，当按钮未被选中时，关闭边框

下面是一个带有按钮设置的示例

HStack

。。。

.overlay

是正确的方法吗？我正在寻找按钮周围的白色边框

HStack(spacing: 1) {
                    
 Button("App\nHelp", action: {print("app help"); self.isActive = true})
                        .foregroundColor(.white).font(Font.body.bold())
                        .frame(maxWidth: .infinity).padding(.vertical, 15)
                        .background(RoundedRectangle(cornerRadius: 8).fill(Color.yellow))
                        .multilineTextAlignment(.center)
                        .frame(maxWidth: .infinity)
                    
 Button("More\nApps", action: {print("more apps")})
                        .foregroundColor(.white).font(Font.body.bold())
                        .frame(maxWidth: .infinity).padding(.vertical, 15)
                        .background(RoundedRectangle(cornerRadius: 8).fill(Color.red))
                        .multilineTextAlignment(.center)
                        .frame(maxWidth: .infinity)
                }

---

如果我正确理解了您的目标，这里是一个使用自定义按钮样式的可能方法的演示

使用Xcode 12.1/iOS 14.1进行测试

和风格本身

struct ActiveBorderStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.blue).padding()
            .overlay(RoundedRectangle(cornerRadius: 16).stroke().foregroundColor(
                configuration.isPressed ? .blue : .clear))
    }
}

---

按照上面@Asperi的建议进行了一些修改，从而归档了该功能

      Button("More\nApps", action: {print("more apps"); self.isActiveMoreApps = true; self.isActiveAppHelp = false})
                        .foregroundColor(.white).font(Font.body.bold())
                        .frame(maxWidth: .infinity).padding(.vertical, 15)
                        .background(RoundedRectangle(cornerRadius: 8).fill(Color.red))
                        .multilineTextAlignment(.center)
                        .frame(maxWidth: .infinity)
                        
                       .overlay(RoundedRectangle(cornerRadius: 8).stroke().foregroundColor(
                       isActiveMoreApps ? .white : .red))

---

每个按钮将接收一个状态变量，该变量在操作中被激活。要从先前选择的按钮中删除边框，请确保将buttons变量设置回

false

如果所有按钮不具有相同的样式值，该怎么办？它只是struct-您可以向其添加属性，并在构造时插入所需的参数。

      Button("More\nApps", action: {print("more apps"); self.isActiveMoreApps = true; self.isActiveAppHelp = false})
                        .foregroundColor(.white).font(Font.body.bold())
                        .frame(maxWidth: .infinity).padding(.vertical, 15)
                        .background(RoundedRectangle(cornerRadius: 8).fill(Color.red))
                        .multilineTextAlignment(.center)
                        .frame(maxWidth: .infinity)
                        
                       .overlay(RoundedRectangle(cornerRadius: 8).stroke().foregroundColor(
                       isActiveMoreApps ? .white : .red))