ژست ها در SwiftUI (SwiftUI Gestures)
ژست های SwiftUI راه لمس کردن رابط است. یعنی ضربه، نگه داشتن، و کشیدن. با آن ها رفتار لمسی می سازیم و تجربه را طبیعی تر می کنیم.
ژست های SwiftUI به زبان خیلی ساده
ژست (Gesture) یعنی حرکت دست کاربر. با .onTapGesture ضربه را می گیری. با .onLongPressGesture نگه داشتن را می گیری. با DragGesture حرکت انگشت را دنبال می کنی.
Tap و Long Press
این نمونه رنگ دایره را با ضربه عوض می کند. همچنین با نگه داشتن کمی کوچک می شود.
import SwiftUI
struct TapLongPressDemo: View {
@State private var on = false
@State private var pressed = false
var body: some View {
Circle()
.fill(on ? .green : .gray)
.frame(width: 80, height: 80)
.scaleEffect(pressed ? 0.9 : 1)
.onTapGesture {
on.toggle()
}
.onLongPressGesture(minimumDuration: 0.5) {
pressed.toggle()
}
}
}
struct ContentView: View {
var body: some View {
TapLongPressDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: برای بازخورد نرم، یک انیمیشن فنری هنگام تغییر وضعیت اضافه کن.
DragGesture برای کشیدن
این نمونه متن را با انگشت حرکت می دهد. سپس با فنر به جای اولیه برمی گردد.
import SwiftUI
struct DragDemo: View {
@State private var offset: CGSize = .zero
var body: some View {
Text("Drag me")
.padding(12)
.background(.blue.opacity(0.1))
.cornerRadius(8)
.offset(offset)
.gesture(
DragGesture()
.onChanged { value in
offset = value.translation
}
.onEnded { _ in
withAnimation(.spring()) {
offset = .zero
}
}
)
}
}
struct ContentView: View {
var body: some View {
DragDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
نکته: با منحنی های انیمیشن حس کشیدن را طبیعی تر کن.
ترکیب چند ژست
گاهی همزمان ضربه و درگ می خواهی. از .simultaneousGesture یا .highPriorityGesture کمک بگیر.
import SwiftUI
struct CombineGesturesDemo: View {
@State private var tapped = 0
@State private var dragged = false
var body: some View {
Rectangle()
.fill(dragged ? .orange : .purple)
.frame(height: 120)
.overlay(Text("taps: \(tapped)"))
.simultaneousGesture(
TapGesture()
.onEnded {
tapped += 1
}
)
.highPriorityGesture(
DragGesture()
.onChanged { _ in
dragged = true
}
.onEnded { _ in
dragged = false
}
)
}
}
struct ContentView: View {
var body: some View {
CombineGesturesDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
سه گام عملی برای ساخت ژست ها
- اول رفتار لمسی را مشخص کن.
- بعد ژست مناسب را وصل کن.
- سپس بازخورد بصری را تنظیم کن.
برای ورود و خروج نرم، بخش ترنزیشن ها را ببین. همچنین هماهنگی کارت ها را با MatchedGeometryEffect بساز. این ها کنار ژست های SwiftUI تجربه ای خوش حس می سازند.
جمع بندی سریع
- Tap برای تغییرات فوری عالی است.
- Long Press برای منو یا انتخاب ایمن خوب است.
- Drag برای جابجایی طبیعی استفاده کن.
- ژست ها را می توان همزمان ترکیب کرد.