So I built a custom toggle button, and one of the things that is supper irritating is that since it has a button element in it, it flashes when you push down.
I want it so when you push the toggle button it does not fad out or flash when you push.
struct CustomToggleStyle: ToggleStyle {
var label1: String
var label2: String
func makeBody(configuration: Configuration) -> some View {
HStack {
Button {
configuration.isOn.toggle()
} label: {
ToggleItem(isOn: configuration.isOn, label1: label1, label2: label2)
}
}
}
struct ToggleItem: View {
var isOn: Bool
var label1: String
var label2: String
var body: some View {
HStack {
RoundedRectangle(cornerRadius: 5)
.fill(Color.toggleBG)
.frame(width: 311, height: 60)
.overlay(
RoundedRectangle(cornerRadius: 5)
.fill(.white)
.frame(width: 140, height: 50)
.padding(.horizontal, 7),
alignment: isOn ? .trailing : .leading
)
.animation(.linear(duration: 0.2))
.overlay(
Text(label1)
.font(.custom(isOn ? "regular" : "heavy", size: 18)).foregroundColor(isOn ? .white : Color.toggleBG)
.padding(.trailing, 157),
alignment: .center)
.overlay(
Text(label2)
.font(.custom(isOn ? "heavy" : "regular", size: 18)).foregroundColor(isOn ? Color.toggleBG : .white)
.padding(.leading, 157),
alignment: .center)
}
}
}
}
I think it has something to do with the button element inside the toggle. but I cannot figure it out.
