7854984707214a1bb75da0493c6a1261
初识SwiftUI之手势的灵活应用《春秋》

动画与手势是SwiftUI的两大核心支柱,下面的demo就是给大家展示手势的妙用。

用到的SwiftUI技术

  • Image
  • TapGesture
  • MagnificationGesture()
  • DragGesture()

实现效果

实现了对图片的如下操作

  • 自适应大小
  • 缩放
  • 拖拽
  • 放大

Image

显示图像的view


定义

@frozen struct Image

简介

Image是个后绑定的控件,系统只在需要它的时候才会给它赋予实际的数值。


基础使用

1、 显示图片

import SwiftUI

struct ContentView: View {
    var body: some View {
       Image("1")
    }
}

效果

image.png

image.png


2、 自动适应大小

例子1的图片没有完全显示全,我们可以用Image的resizable()来让图片自动适应

struct ContentView: View {
    var body: some View {
       Image("1")
        .resizable()
    }
}

效果
image.png

image.png


3. 保持原始比例

但是,这也可能导致图像的原始纵横比失真,因为它将在所有尺寸上拉伸所需的任何量以使其填充空间。

struct ContentView: View {
    var body: some View {
       Image("1")
        .resizable()
        .aspectRatio(contentMode: .fit)
    }
}

image.png

image.png


4. 点击放大

struct ContentView: View {
     @State private var scale: CGFloat = 1.0

    var body: some View {
       Image("1")
        .resizable()
        .aspectRatio(contentMode: .fit)
         .scaleEffect(scale)
        .gesture(
            TapGesture()
                .onEnded { _ in
                    self.scale += 0.1
                    print("\(self.scale)")
                }
        )
    }
}

效果
Jietu20200101-220135.gif

Jietu20200101-220135.gif


5、手势放大

```
struct ContentView: View {
@State private var scale: CGFloat = 1.0

top Created with Sketch.