I pieced collectively this code for a watch app and it type of works nevertheless it’s not excellent. (1) The fill doesn’t match precisely, it begins exterior the bounds of the buttons view however I can not determine how you can match the dimensions of the button precisely. (2) I can not get the tappable space to increase to the left and proper sides of the view. Even when I add .contentShape(rectangle)
or .body(maxWidth: .infinity)
the one half that’s tappable is the center the place the picture and textual content are. Is there a greater means to do that?
struct ContentView2: View {
@State var isComplete: Bool = false
@State var isSuccess: Bool = false
var physique: some View {
VStack {
ZStack {
RoundedRectangle(cornerRadius: 12.0)
.fill(isSuccess ? Colour.clear : Colour.pink.opacity(0.50))
.body(maxWidth: isComplete ? .infinity : 0)
.body(peak: 55) //How one can now onerous code this?
.body(maxWidth: .infinity, alignment: .main)
Button(motion: {}, label: {
VStack {
Picture(systemName: "multiply.circle.fill")
.font(.system(measurement: 24, weight: .common))
.foregroundColor(.pink)
Textual content("Maintain to Finish")
.font(.footnote)
}
.onLongPressGesture(minimumDuration: 1.0, maximumDistance: 50) {
withAnimation(.easeInOut) {
isSuccess = true
//carry out motion
}
} onPressingChanged: { isPressing in
if isPressing {
withAnimation(.easeIn(length: 1.0)) {
isComplete = true
}
} else {
DispatchQueue.most important.asyncAfter(deadline: .now() + 0.1) {
if !isSuccess {
withAnimation(.easeInOut) {
isComplete = false
}
}
}
}
}
})
.tint(.pink)
}
}
}
}
#Preview {
ContentView2()
}