探索 SwiftUI 基本手势

前语

在 SwiftUI 中，咱们能够通过增加不同的交互来使咱们的使用程序更具交互性，这些交互能够照顾咱们的点击，点击和滑动。

今天，咱们将回顾 SwiftUI 底swift体系子手势：

• TapGesture
• 长按手势
• 拖动springmvc的作业原理手势
• 扩展手势
• 旋转手势swift怎样读

TapGesture

轻击手势使咱们能够辨认 View 上的一个或多个轻击。
咱们有几种办法能够增加点击手势。

第一个是直接运用 .onTapGesture 修饰符。

Circle()swiftkey
.onTapGesture {swift代码是什么意思
// Respond to Tap Gesture 
}

SwiftUIspring结构 文档Swift中运用的其他选项是通过创建手势并将其装备为特征，然后将其与 .gesture（_：include :) 修饰符一同运用。

留意： 为了实施某项操作或照顾轻击，咱们需求运appointment用 .onEnded 操作封闭，该操作在手势完毕时触发。

strswiftui规划uct SingleTapGestureView: View {
vappearancear singleTap: some Geapp装置下载sture {
TapGesture()
.onEnded { _ in
// Respond to Tap Gesture
}
}
var body: some View {
Circle()
.gesture(singleTap)
}
}

实际上，我更喜爱第二种办法，因为appreciate这样spring是什么意思咱们能够创建不同的手势并经swift世界结算体系过咱们的代码重复运用它们。

因而，假设咱们将代码放在一同，就能够开swiftui官网始编写类似的东西。

struspringmvc的作业原理ct TapGestureView: View {
@State privaswift代码te var isAnimatinappearg = false
@State private var tapped1xspring结构 = 0
var singleTap: some Gespringbootsture {
TapGesture()
.onEnded { _ in
tapped1x += 1
wappearanceithAnimation(Animation.easeOut(duration: 0.5)) {
seswiftui官网lf.isAnimatswiftui中文文档ing = 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)
.fswift怎样读oregroundColor(.orange)
.appearoverlay(
Text("1X"springcloud五大组件)
.foswift言语ntWeight(.mediswift体系um)
)
.background(
Circle()
.strokeBorder(Color.blue, lineWidth: 3)
.scaleEffect(isAnimating ? 1.5 : 1)
.opacity(isAnimating ? 0 : 1)
)
.gesture(singapproachleTap)
}
}
}

类似地，咱们只需运用 TapGeswiftui有用案例sture(count：Int) 初swiftkey始化程序就能够控制要照顾的数量。

在这种情况下，您需求点击3次才华触发 .oswift代码是什么意思nEnded 操作封闭。

struct TapGesture3xView: View {
@State private var isAnimating =swiftui结构 false
@State private var tapped3x = 0
var multipleTspring是什么意思ap: some Gesture {
TapGesture(count: 3)
.onEnded { _ in
tapappearped3x += 1
withAnimationapple(Animation.easeOuswift世界结算体系t(duraswiftui视频tion: 0.5)) {
self.isAnimating = true
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
self.isAnimating = false
}
}
}app装置下载
var body: some View {
VStack {
Text("Tapped 3X: (tapped3x) times")
.font(.caption)
Circle()
.frameswift体系(width: 80, heigspringboot常用注解ht: 80)
.foregroundColor(.orange)
.overlay(
Text("3X")
.fontWeiswiftlyght(.medium)
)
.background(
Circle()
.strokespringmvc的作业原理Borspringboot常用注解der(Color.blue, lineWidth: 3)
.scaleEffect(isAnimating ? 1.5 : 1)
.opacity(isAnimating ? 0 : 1)
)
.gesture(multipleTap)
}
}
}

长按手势

长按手势可让咱们在用户长按定义的时间后以及在用户长按的时间内实施操作。

咱们能够设置一个最小继续时间，以辨认咱们的长按手势。 能够在 LongPressGesture 初始化程序中进行设置。

LongPressGesture(minimumDuration: 2)

然后，咱们能够运用 .updating 办法在Swift长按期间实施操作，并运用 .onEnded 在辨认到咱们的手势时实施操作。

在此示例中，我将在长按操作期间更新 Circle() 的大小和色彩，而且当辨认出手势时，我将显现“文本已完毕”。

别的，我在这儿运用的是 GswiftkeyestureState 特征包装器，该包装器在长按期间设置为 true ，在手势完毕时设置为 false 。 我正在将此特征包装器用于示例动画。

struct LongPressGestureView: View {
@GestureState private var isLongPressDetected = false
@State priswift言语vate var isDone = false
var longPswiftui视频ress: some Gesture {
LongPressGesture(minimumDuration:Swift 2)
.updating($isLongPressDetected) { currentState, gestureState, transaction in
Disspring是什么意思patchQueue.main.aspring结构sync {
isDone = false
}
gestureState =appear currentState
transaction.animation = Animation.easeIn(duration: 2)
}
.onEnded { done in
isDone = doswiftui规划ne
}
}
var body: somespringcloud五大组件 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 isLspringbootongPressDetected {
Text("Updating..swiftkey.")
}
if isDone {
Text("Done")
}
Spacer()
Text("Long Press 2 sec")
.padding()
.background(isLongPrSwiftUIessDetected ? Color.green : Color.orangeswiftui下拉改写)
.cornerRadiusswift体系(16)
.gesture(longPressspringcloud)
}
}
}

拖动手势

拖动手势容Spring许咱们在拖动视图时实施操作。

咱们能够运用并运用 .ospring结构nChanged 和 .onEndedSwift 封闭办法来实施某些操作。 这两种办法都为咱们供应了超卓的特征 DragGesture.Value，该特征存储以下拖动动作信息：

• location
• predictedEndLocation
• predictedEndTranslation
• startLocation
• time
• translatioswiftui编程n

咱们能够运用该特征来创建可移动视图。 在当时示例中，我运用 .onChangedappreciate 办法更新 Circle() 方位坐标。

struct DragGestureView: View {
@State priappointmentvate var location: CGPoint = CGPoint(x: 100, y: 100)
var drag: some Gswiftui结构esture {
DragGesture(minimumDistance: 1, cooswift代码是什么意思rdinateSswift体系pace: .local)
.onChanged { value in
locatswiftui视频ion = value.locatioswift怎样读n
}
}
var body: some View {
Circle()
.frame(width: 100, height: 100)
.foregroundColor(.oranswiftui规划ge)
.position(location)
.gesturapproache(drag)
}
}

在appearance这儿，增加了 .onEnded 办法，以在拖动完毕后重置 Circle() 方位坐标。

struct DragGestureView: View {
@State private var loswiftui视频cation: 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 {
Cirswiftkeycle()
.frame(width: 100, height: 100)
.foregroundColor(.orange)
.posispringboot常用注解tion(location)
.gestapplicationure(drag)
}
}

扩展手swiftui规划势

当咱们在View上使用扩展动作时，扩展手势容许做出一些springcloud动作。

在这儿，还有 .onChanged 和 .oAPPnEnded 闭包，咱们能够运用它们来在扩展动作期间swiftui结构或完毕时进行照顾。 作为特征，接收到的是 CGFloat 的 MagnificationGesture.Value 。 咱们能够以此为例来更改视图swiftui规划大小。

struct MagspringbootnificationGestureView: View {
@State var magnifiedValue: CGFloat = 1.0
var magnification: some Gesture {
Magnificatiappointmentonswiftui规划Gesture()
.onChanged { value in
magapproachnifiedspring结构Valueswift言语 = value
}
.onEnded { value in
magnifiedValue = 1.0
}
}
var body: some View {
Circlswiftlye()
.frame(swiftui中文文档width: 100 * magnifiedValue, height: 100 * magnifiedValue)
.foregroundColor(.oraspringmvc的作业原理nge)
.gesture(magnification)
.animation(.easeswiftlyOut)
}
}

旋转手势

旋转手势容许旋转视图，spring结构并在旋转进程中和旋转完毕时以某些动作做出照顾。

它还为咱们供应了 .onChanged 和 .swiftkeyonEnded 闭包，这些闭包为咱们springboot常用注解供应了 RotationGesture.Value，它标明手势 Angle 值。 咱们能够运用该值旋转视图。

struct RotationGestureView: View {
@State private var angle =spring面试题 Angle(degrees: 0.0)
@State private var backgroundAngle = Angle(degrswiftui规划ees: 0.0)
var rotation: some Gesture {
RotationGesture()
.onCspringmvc的作业原理hanged { angle in
self.angle = angle
}
.oswift世界结算体系nEnded { angle in
withAnimation(APPAnimatswift体系ion.spring()) {
self.backswiftui结构groundAngle = anAPPgle
}
}
}
var body: some View {
Rectangle()
.frame(width: 150, height: 150, aligspringbootnmespringcloud五大组件nt: .cSpringenter)
.foreswiftui官网groundColor(.orange)
.rotationEffect(self.angle)
.gesture(rotation)
.background(
Rectangle()
.shadow(color: .primary, radius: 10, x: 0.0, y: 0.01)
.foregroundColor(.secondary)
.rotationEfappreciatefect(backgroundAnapplegle)
)
}
}

总结

上面是对 SwiftUI 根柢手势的总结。咱们能够完结更多的交互使咱们的 Appapplication 变得更生动。

关于高档的运用，能够将手势组合或者同时运用以做出照swiftui结构应，或者能够完结自己的自定义手势。

重视咱们

欢迎重视大众号「Swift 社区」，咱们的愿景是期望更多的人学习和运用Swift，咱们会同享以 Swift 实战、SwiftUI、Swift 基础为中心的技能干货

本文已在大众号「Swift 社区」发布，如需转载请加微信：fzhanfei，补白转载开白