建站
咨詢
售后
建站咨詢
新聞中心
前言
在 SwiftUI 中，我們可以通過(guò)添加不同的交互來(lái)使我們的應(yīng)用程序更具交互性，這些交互可以響應(yīng)我們的點(diǎn)擊，點(diǎn)擊和滑動(dòng)。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了山陽(yáng)免費(fèi)建站歡迎大家使用！
今天，我們將回顧SwiftUI基本手勢(shì)：
- TapGesture
- 長(zhǎng)按手勢(shì)
- 拖動(dòng)手勢(shì)
- 放大手勢(shì)
- 旋轉(zhuǎn)手勢(shì)
TapGesture
輕擊手勢(shì)使我們能夠識(shí)別 View 上的一個(gè)或多個(gè)輕擊。我們有幾種方法可以添加點(diǎn)擊手勢(shì)。
第一個(gè)是直接使用 .onTapGesture 修飾符。
- Circle()
- .onTapGesture {
- // Respond to Tap Gesture
- }
SwiftUI 文檔中使用的其他選項(xiàng)是通過(guò)創(chuàng)建手勢(shì)并將其配置為屬性，然后將其與 .gesture(_：include ???? 修飾符一起使用。
注意： 為了執(zhí)行某項(xiàng)操作或響應(yīng)輕擊，我們需要使用 .onEnded 操作關(guān)閉，該操作在手勢(shì)結(jié)束時(shí)觸發(fā)。
- struct SingleTapGestureView: View {
- var singleTap: some Gesture {
- TapGesture()
- .onEnded { _ in
- // Respond to Tap Gesture
- }
- }
- var body: some View {
- Circle()
- .gesture(singleTap)
- }
- }
實(shí)際上，我更喜歡第二種方法，因?yàn)檫@樣我們可以創(chuàng)建不同的手勢(shì)并通過(guò)我們的代碼重復(fù)使用它們。
因此，如果我們將代碼放在一起，就可以開(kāi)始編寫(xiě)類似的東西。
- struct TapGestureView: View {
- @State private var isAnimating = false
- @State private var tapped1x = 0
- var singleTap: some Gesture {
- TapGesture()
- .onEnded { _ in
- tapped1x += 1
- withAnimation(Animation.easeOut(duration: 0.5)) {
- self.isAnimating = true
- }
- DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
- self.isAnimating = false
- }
- }
- }
- var body: some View {
- VStack {
- Text("Tapped 1X: \(tapped1x) times")
- .font(.caption)
- Circle()
- .frame(width: 80, height: 80)
- .foregroundColor(.orange)
- .overlay(
- Text("1X")
- .fontWeight(.medium)
- )
- .background(
- Circle()
- .strokeBorder(Color.blue, lineWidth: 3)
- .scaleEffect(isAnimating ? 1.5 : 1)
- .opacity(isAnimating ? 0 : 1)
- )
- .gesture(singleTap)
- }
- }
- }
類似地，我們只需使用 TapGesture(count：Int) 初始化程序就可以控制要響應(yīng)的數(shù)量。
在這種情況下，您需要點(diǎn)擊3次才能觸發(fā) .onEnded 操作關(guān)閉。
- struct TapGesture3xView: View {
- @State private var isAnimating = false
- @State private var tapped3x = 0
- var multipleTap: some Gesture {
- TapGesture(count: 3)
- .onEnded { _ in
- tapped3x += 1
- withAnimation(Animation.easeOut(duration: 0.5)) {
- self.isAnimating = true
- }
- DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
- self.isAnimating = false
- }
- }
- }
- var body: some View {
- VStack {
- Text("Tapped 3X: \(tapped3x) times")
- .font(.caption)
- Circle()
- .frame(width: 80, height: 80)
- .foregroundColor(.orange)
- .overlay(
- Text("3X")
- .fontWeight(.medium)
- )
- .background(
- Circle()
- .strokeBorder(Color.blue, lineWidth: 3)
- .scaleEffect(isAnimating ? 1.5 : 1)
- .opacity(isAnimating ? 0 : 1)
- )
- .gesture(multipleTap)
- }
- }
- }
長(zhǎng)按手勢(shì)
長(zhǎng)按手勢(shì)可讓我們?cè)谟脩糸L(zhǎng)按定義的時(shí)間后以及在用戶長(zhǎng)按的時(shí)間內(nèi)執(zhí)行操作。
我們可以設(shè)置一個(gè)最小持續(xù)時(shí)間，以識(shí)別我們的長(zhǎng)按手勢(shì)?？梢栽?LongPressGesture 初始化程序中進(jìn)行設(shè)置。
- LongPressGesture(minimumDuration: 2)
然后，我們可以使用 .updating 方法在長(zhǎng)按期間執(zhí)行操作，并使用 .onEnded 在識(shí)別到我們的手勢(shì)時(shí)執(zhí)行操作。
在此示例中，我將在長(zhǎng)按操作期間更新 Circle() 的大小和顏色，并且當(dāng)識(shí)別出手勢(shì)時(shí)，我將顯示“文本已完成”。
另外，我在這里使用的是 GestureState 屬性包裝器，該包裝器在長(zhǎng)按期間設(shè)置為 true ，在手勢(shì)結(jié)束時(shí)設(shè)置為 false 。我正在將此屬性包裝器用于示例動(dòng)畫(huà)。
- struct LongPressGestureView: View {
- @GestureState private var isLongPressDetected = false
- @State private var isDone = false
- var longPress: some Gesture {
- LongPressGesture(minimumDuration: 2)
- .updating($isLongPressDetected) { currentState, gestureState, transaction in
- DispatchQueue.main.async {
- isDone = false
- }
- gestureState = currentState
- transaction.animation = Animation.easeIn(duration: 2)
- }
- .onEnded { done in
- isDone = done
- }
- }
- var body: some View {
- VStack {
- Spacer()
- Circle()
- .frame(width: 10, height: 10)
- .foregroundColor(isLongPressDetected ? .orange : .primary)
- .scaleEffect(CGSize(
- width: isLongPressDetected ? 10 : 1,
- height: isLongPressDetected ? 10 : 1))
- Spacer()
- if isLongPressDetected {
- Text("Updating...")
- }
- if isDone {
- Text("Done")
- }
- Spacer()
- Text("Long Press 2 sec")
- .padding()
- .background(isLongPressDetected ? Color.green : Color.orange)
- .cornerRadius(16)
- .gesture(longPress)
- }
- }
- }
拖動(dòng)手勢(shì)
拖動(dòng)手勢(shì)允許我們?cè)谕蟿?dòng)視圖時(shí)執(zhí)行操作。
我們可以利用并使用 .onChanged 和 .onEnded 關(guān)閉方法來(lái)執(zhí)行某些操作。這兩種方法都為我們提供了出色的屬性 DragGesture.Value，該屬性存儲(chǔ)以下拖動(dòng)動(dòng)作信息：
location
predictedEndLocation
predictedEndTranslation
startLocation
time
translation
我們可以使用該屬性來(lái)創(chuàng)建可移動(dòng)視圖。在當(dāng)前示例中，我使用 .onChanged 方法更新 Circle() 位置坐標(biāo)。
- struct DragGestureView: View {
- @State private var location: CGPoint = CGPoint(x: 100, y: 100)
- var drag: some Gesture {
- DragGesture(minimumDistance: 1, coordinateSpace: .local)
- .onChanged { value in
- location = value.location
- }
- }
- var body: some View {
- Circle()
- .frame(width: 100, height: 100)
- .foregroundColor(.orange)
- .position(location)
- .gesture(drag)
- }
- }
在這里，添加了 .onEnded 方法，以在拖動(dòng)結(jié)束后重置 Circle() 位置坐標(biāo)。
- struct DragGestureView: View {
- @State private var location: CGPoint = CGPoint(x: 100, y: 100)
- var drag: some Gesture {
- DragGesture(minimumDistance: 1, coordinateSpace: .local)
- .onChanged { value in
- location = value.location
- }
- .onEnded { value in
- withAnimation(.easeOut) {
- location = CGPoint(x: 100, y: 100)
- }
- }
- }
- var body: some View {
- Circle()
- .frame(width: 100, height: 100)
- .foregroundColor(.orange)
- .position(location)
- .gesture(drag)
- }
- }
放大手勢(shì)
當(dāng)我們?cè)赩iew上應(yīng)用放大動(dòng)作時(shí)，放大手勢(shì)允許做出一些動(dòng)作。
在這里，還有 .onChanged 和 .onEnded 閉包，我們可以使用它們來(lái)在放大動(dòng)作期間或結(jié)束時(shí)進(jìn)行響應(yīng)。作為屬性，接收到的是 CGFloat 的 MagnificationGesture.Value 。我們可以以此為例來(lái)更改視圖大小。
- struct MagnificationGestureView: View {
- @State var magnifiedValue: CGFloat = 1.0
- var magnification: some Gesture {
- MagnificationGesture()
- .onChanged { value in
- magnifiedValue = value
- }
- .onEnded { value in
- magnifiedValue = 1.0
- }
- }
- var body: some View {
- Circle()
- .frame(width: 100 * magnifiedValue, height: 100 * magnifiedValue)
- .foregroundColor(.orange)
- .gesture(magnification)
- .animation(.easeOut)
- }
- }
旋轉(zhuǎn)手勢(shì)
旋轉(zhuǎn)手勢(shì)允許旋轉(zhuǎn)視圖，并在旋轉(zhuǎn)過(guò)程中和旋轉(zhuǎn)結(jié)束時(shí)以某些動(dòng)作做出響應(yīng)。
它還為我們提供了 .onChanged 和 .onEnded 閉包，這些閉包為我們提供了 RotationGesture.Value，它表示手勢(shì) Angle 值。我們可以使用該值旋轉(zhuǎn)視圖。
- struct RotationGestureView: View {
- @State private var angle = Angle(degrees: 0.0)
- @State private var backgroundAngle = Angle(degrees: 0.0)
- var rotation: some Gesture {
- RotationGesture()
- .onChanged { angle in
- self.angle = angle
- }
- .onEnded { angle in
- withAnimation(Animation.spring()) {
- self.backgroundAngle = angle
- }
- }
- }
- var body: some View {
- Rectangle()
- .frame(width: 150, height: 150, alignment: .center)
- .foregroundColor(.orange)
- .rotationEffect(self.angle)
- .gesture(rotation)
- .background(
- Rectangle()
- .shadow(color: .primary, radius: 10, x: 0.0, y: 0.01)
- .foregroundColor(.secondary)
- .rotationEffect(backgroundAngle)
- )
- }
- }
總結(jié)
上面是對(duì) SwiftUI 基本手勢(shì)的總結(jié)。我們可以實(shí)現(xiàn)更多的交互使我們的 App 變得更生動(dòng)。
對(duì)于高級(jí)的使用，可以將手勢(shì)組合或者同時(shí)使用以做出響應(yīng)，或者可以實(shí)現(xiàn)自己的自定義手勢(shì)。
新聞標(biāo)題：探索SwiftUI基本手勢(shì)
網(wǎng)站鏈接：http://www.dlmjj.cn/article/ccoeggs.html
