DragGesture (DragGesture)
در این بخش ژست کشیدن (DragGesture) را یاد می گیریم. ژست یعنی حرکت لمسی. با کشیدن انگشت، مکان نما جابه جا می شود و کد اجرا می شود.
DragGesture چیست؟
DragGesture حرکت انگشت را دنبال می کند. سپس با .onChanged و .onEnded پاسخ می دهی. برای جابه جایی نما، از .offset استفاده کن.
کشیدن برای جابه جایی
برچسب را بکش. با رها کردن، به جای قبلی برمی گردد. بازگشت با انیمیشن فنری انجام می شود.
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()
}
}
}
نکته: اگر بازگشت نرم می خواهی، از انیمیشن فنری استفاده کن. همچنین می توانی دامنه ی جابه جایی را محدود کنی.
محدود کردن جابه جایی در کادر
ترجمه ی درگ را Clamp کن تا دایره داخل کادر بماند. سپس با رها کردن، به مرکز برگردان.
import SwiftUI
struct DragBoundsDemo: View {
@State private var offset: CGSize = .zero
let limit: CGFloat = 120
func clamp(_ v: CGFloat) -> CGFloat {
min(max(v, -limit), limit)
}
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 12)
.stroke(.gray.opacity(0.4), lineWidth: 1)
.frame(width: 280, height: 160)
Circle()
.fill(.blue.opacity(0.2))
.frame(width: 44, height: 44)
.offset(x: offset.width, y: offset.height)
.gesture(
DragGesture()
.onChanged { value in
offset = CGSize(
width: clamp(value.translation.width),
height: clamp(value.translation.height)
)
}
.onEnded { _ in
withAnimation(.spring()) {
offset = .zero
}
}
)
}
.padding()
}
}
struct ContentView: View {
var body: some View {
DragBoundsDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
سه گام عملی برای DragGesture
- یک State برای آفست بساز.
- DragGesture را روی نما بگذار.
- در onChanged آفست را ست کن.
هشدار: جابه جایی زیاد می تواند پیمایش صفحه را مختل کند. در موبایل تعادل را حفظ کن.
برای لمس کوتاه، به TapGesture برو. همچنین درباره ترکیب ژست ها در ژست ها در SwiftUI بخوان. اگر به «ژست کشیدن» نیاز داری، لینک ژست کشیدن را نشان دار کن.
جمع بندی سریع
- DragGesture حرکت انگشت را دنبال می کند.
- با offset نما را جابه جا کن.
- با spring بازگشت نرم بساز.
- با Clamp خروج از مرز را ببند.