SwiftUI 基础之Image使用和手势(2020更新含代码)

Image

显示图像的view

---

定义

@frozen struct Image

• 文档地址

简介

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

---

基础使用

1、 显示图片

import SwiftUI

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

效果

image.png

---

2、 自动适应大小

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

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

效果

image.png

---

3. 保持原始比例

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

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

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

---

5、手势放大

struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Image("1")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .scaleEffect(scale)
            .gesture(MagnificationGesture()
                .onChanged { value in
                    self.scale = value.magnitude
                }
        )
    }
}

Jietu20200101-220918.gif

---

6、随手势移动

 @GestureState private var dragOffset = CGSize.zero
    @State private var position = CGSize.zero
    var body: some View {
        Image("1")
            .font(.system(size: 100))
            .offset(x: position.width + dragOffset.width, y: position.height + dragOffset.height)
            .animation(.easeInOut)
            .foregroundColor(.green)
            .gesture(
                DragGesture()
                    .updating($dragOffset, body: { (value, state, transaction) in
                        
                        state = value.translation
                    })
                    .onEnded({ (value) in
                        self.position.height += value.translation.height
                        self.position.width += value.translation.width
                    })
        )
        
    }

---

6、完整拖拽缩放三个手势都支持

import SwiftUI

struct ContentView: View {
    @GestureState private var dragOffset = CGSize.zero
    @State private var position = CGSize.zero
    @State private var scale: CGFloat = 1.0
    
    
    var body: some View {
        Image("1")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .offset(x: position.width + dragOffset.width, y: position.height + dragOffset.height)
            .animation(.easeInOut)
            .scaleEffect(scale)
            
            // 缩放
            .gesture(MagnificationGesture()
                .onChanged { value in
                    self.scale = value.magnitude
                }
        )
            // 拖拽
            .gesture(
                DragGesture()
                    .updating($dragOffset, body: { (value, state, transaction) in
                        
                        state = value.translation
                    })
                    .onEnded({ (value) in
                        self.position.height += value.translation.height
                        self.position.width += value.translation.width
                    })
        )
            //点击放大
            .gesture(
                TapGesture()
                    .onEnded { _ in
                        self.scale += 0.1
                        print("\(self.scale)")
                }
        )
        
        
        
    }
}

效果

a.gif

---

参考资源

• https://www.appcoda.com/swiftui-gestures/