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()
    }
}

效果


SwiftUI 基础之Image使用和手势(2020更新含代码)_第1张图片
image.png

3. 保持原始比例

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

struct ContentView: View {
    var body: some View {
       Image("1")
        .resizable()
        .aspectRatio(contentMode: .fit)
    }
}
SwiftUI 基础之Image使用和手势(2020更新含代码)_第2张图片
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/

你可能感兴趣的