SwiftUI基础篇Transforming(上)

Transforming View

• 运用offset设置视图的偏移方位
• 在View的周围填充色彩
• 重复运用修饰符创立暗影作用
• 给View制作边框
• 给形状View制作边框
• 创立动态虚线边框（跑马灯）
• 如安在View周围制作暗影
• 裁剪View，使部分可见
• View的旋转
• View的3D旋转
• View的扩大和缩小

概述

文章主要共享SwiftUI Modifier的学习过程，将运用事例的方法进行阐明。内容浅显易懂，Transforming View展现部分调试成果，不过测验代码是齐全的。假如想要运行成果，能够移步Github下载code -> github事例链接

1、运用offset设置视图的偏移方位

一切视图在层次结构中都有一个默许方位，但是Offset()修饰符能够相关于该默许方位移动它们。在ZStack中运用时，能够操控视图应该怎么堆叠。

运用offset()将导致视图相关于其默许方位移动，但不会影响视图的方位或偏移之后的任何其他修饰符。这意味着能够要细心考虑怎么运用这个特性，尤其是要保证视图不会堆叠。

1.1、视图堆叠问题

例如，在这个VStack中，运用Offset()将第二个View向下移动15个点，成果是与第三个View堆叠了。

struct FFViewOffset: View {
    var body: some View {
        Text("Home")
        Text("Options")
            .offset(y: 15)
        Text("Help")
    }
}

1.2、padding()一同运用解决堆叠问题

将padding()与offset()一同运用会得到真实预测的成果，由于这会移动一个视图。一起还会主动调整旁边的视图。

struct FFViewOffset: View {
    var body: some View {
        Text("Home")
        Text("Options")
            .offset(y: 15)
            .padding(.bottom, 15)
        Text("Help")
    }
}

1.3、.offset之前与之后的不同

任何放在offset()之后的修饰符都不会收到方位改变的影响，这或许会导致意想不到的成果。我在偏移量之前和之后都运用了background()

struct FFViewOffset: View {
    var body: some View {
        HStack {
            Text("Before")
                .background(.red)
                .offset(y: 15)
            Text("After")
                .offset(y: 15)
                .background(.green)
        }
    }
}

1.4、在ZStack中运用

当与ZStack结合时，偏移量让我们将一个视图放置在另一个视图中，用于操控ZStack的对齐

struct FFViewOffset: View {
    var body: some View {
            ZStack(alignment: .bottomTrailing) {
                Image(.filletSteak)
                Text("Photo credit: Meta BBLv")
                    .padding(4)
                    .background(.black)
                    .foregroundStyle(.white)
                    .offset(x: -15 ,y: -5)
            }
    }
}

调试成果

2、在View的周围填充色彩

padding()修饰符能够在视图周围增加一些间距，background()修饰符能够设置背景色彩

2.1、在padding之前设置背景色

struct FFViewPaddingAroundColor: View {
    var body: some View {
        Text("metaBBLv with Swift")
            .background(.red)
            .foregroundStyle(.white)
            .padding()
    }
}

2.2、在padding之后设置背景色

struct FFViewPaddingAroundColor: View {
    var body: some View {
        Text("metaBBLv with Swift")
            .padding()
            .background(.red)
            .foregroundStyle(.white)
    }
}

这两段code或许看起来比较相似，但是产生不同的成果，由于运用修饰符的次序很重要。在第二个比如中，视图被填充，然后着色，这意味着填充的范围也被着色。相比之下，第一个比如便是先着色再填充。

调试成果

3、重复运用修饰符创立暗影作用

增加到视图中的每个修饰符都会调整之前的任何修饰符，并能够屡次重复修饰符。

struct FFAdvancedEffects: View {
    var body: some View {
        Text("Hello, metaBBLv")
            .font(.largeTitle)
            .foregroundStyle(.white)
            .padding()
            .background(.red)
            .padding()
            .background(.orange)
            .padding()
            .background(.yellow)
        //这关于创立暗影，能够依据需求来重复运用修饰符。
    }
}

调试成果

4、给View制作边框

SwiftUI为有一个专门的border()修饰符来制作视图周围的边框。它有一些改变取决于你是否想要指定宽度和圆角半径。

struct FFViewBorder: View {
    var body: some View {
        Text("metaBBlv with Swift")
            .border(.green)
        Divider()
        //增加一些padding来调整边框
        Text("metaBBlv with Swift")
            .padding()
            .border(.green)
        Divider()
        //设置Border的宽度
        Text("metaBBlv with Swift")
            .padding()
            .border(.red, width: 4)
        Divider()
        //增加圆角边框，运用overlay()修饰符。
        Text("metaBBlv with Swift")
            .padding()
            .overlay {
                RoundedRectangle(cornerRadius: 16)
                    .stroke(.blue, lineWidth: 4)
            }
    }
}

设置边框运用的修饰符：

• 对形状类型运用stroke()或strokeBorder()
• 对其他视图类型运用border()

调试成果

5、给形状View制作边框

SwiftUI有stroke()和strokeBorder()修饰符，用于在形状周围制作border，略有不同：

• strokeBorder()修饰符将视图刺进边框高度的一半，然后应用边框，这意味着整个边框都在视图内制作。
• stroke()修饰符以视图的边际为中心制作border，这意味着一半的border在视图内部，一半在外部。

重要提示：这两个修饰符只适用于形状（Circle、Rectangle、Capsule等视图），不能对Text、Image等其他非形状视图运用。假如想在非形状视图周围制作边框，运用border修饰符

5.1、strokeBorder

struct FFViewBorderInside: View {
    var body: some View {
        Circle()
            .strokeBorder(Color.blue, lineWidth:  50)
            .frame(width: 200, height: 200)
            .padding()
    }
}

由于运用了strokeBorder(),所以50宽度的边框悉数在圆的内部

5.2、stroke

struct FFViewBorderInside: View {
    var body: some View {
        Circle()
            .stroke(.green, lineWidth: 50)
            .frame(width: 200, height: 200)
            .padding()
    }
}

调试成果

6、创立动态虚线边框（跑马灯）

SwiftUI的stokeBorder修饰符能够增加相似连续破折号（-）的相似作用。

struct FFBorderEffect: View {
    @State private var phase = 0.0
    var body: some View {
        Spacer()
        //运用[10]作为dash参数意味着SwiftUI将制作我们的喵天的10个点，然后制作10个点的空间，
        //重复该形式，直到整个矩形被描边。它是一个数组，由于你能够供给多个值，例如[10，5],10表明秒变长度，5表明间隙。
        Rectangle()
            .strokeBorder(style: StrokeStyle(lineWidth: 4, dash: [10]))
        //当增加破折号时（-），它决定了破折号和间隙应该放在哪里。假如我们将该阶段存储在状态特点中，那么就能够跟着时间的推移将该值动画化，创立所谓的动态虚线描边。
        Spacer()
        Rectangle()
            .strokeBorder(style: StrokeStyle(lineWidth: 4,dash: [10], dashPhase: phase))
            .frame(width: 200, height: 200)
            .onAppear {
                withAnimation(.linear.repeatForever(autoreverses: false), {
                    phase -= 20
                })
            }
        Spacer()
    }
}

调试成果

图二是动态作用，需要在demo里自己测验，由于我偷懒了，并没有做Gif图。

7、如安在View周围制作暗影

SwiftUI给了我们两种创立暗影的方法：

• 直接暗影附加到形状样式上
• 运用shadow修饰符制作暗影。

7.1、常规样式

struct FFViewShadow: View {
    var body: some View {
        Circle()
            .fill(.red.shadow(.drop(color: .black, radius: 10)))
            .padding()
    }
}

7.2、内部暗影

struct FFViewShadow: View {
    var body: some View {
        Circle()
            .fill(.green.shadow(.inner(color: .black ,radius: 10)))
            .padding()
    }
}

7.3、shadow()

能够操控暗影的色彩、半径、和方位，还能够经过调整修饰符的次序来操控视图的那些部分为暗影。假如希望将暗影附加到其他类型视图上，则应该运用shadow()修饰符 ,在其基本形式中，能够经过指定含糊半径来增加暗影。

struct FFViewShadow: View {
    var body: some View {
        Text("metaBBLv with Swift")
            .foregroundStyle(.black)
            .padding()
            .shadow(radius: 5)
            .border(.red, width: 4)
            .background(.white)
    }
}

7.4、.shadow(color: .red, radius: 5)

增加了十分细微的暗影，在文本中心5点含糊。还能够指定想要的色彩以及与原始视图X和Y的偏移量。例如，创立一个带有5点含糊的强烈赤色暗影，以文本为中心。

struct FFViewShadow: View {
    var body: some View {
        Text("metaBBLv with Swift")
            .padding()
            .shadow(color: .red, radius: 5)
            .border(.red, width: 4)
    }
}

7.5、.shadow(color: .red, radius: 5, x: 20, y: 20)

假如想为暗影指定偏移量，增加x、y

struct FFViewShadow: View {
    var body: some View {
        Text("metaBBLv with Swift")
            .padding()
            .shadow(color: .red, radius: 5, x: 20, y: 20)
            .border(.red, width: 4)
    }
}

7.6、.shadow(color: .red, radius: 5, x: 20, y: 20)

SwiftUI依照你列出的次序运用修饰符，所以想让你的暗影也应用到边框上，只要把边框修饰符放在暗影之前。

struct FFViewShadow: View {
    var body: some View {
        Text("metaBBLv with Swift")
            .padding()
            .border(.red, width: 4)
            .shadow(color: .red, radius: 5, x: 20, y: 20)
    }
}

假如发现你暗影作用不行强，增加另一个shadow()修饰符，能够把它们叠加起来创立更杂乱的暗影作用。

调试成果

8、裁剪View，使部分可见

SwiftUI能够裁剪任何视图来操控他的形状，这都是经过运用clipShape()修饰符完成的。Circle裁剪形状将一直从视图中生成圆，即便他们的高度和宽度不相等。它只会裁剪较大的值以匹配较小的值。

struct FFViewClip: View {
    var body: some View {
        Button {
            print("Button was pressed!")
        } label: {
            Image(systemName: "bolt.fill")
                .foregroundStyle(.white)
                .padding()
                .background(.green)
                .clipShape(Circle())
        }
        //除了Circle，还有Capsule，它能够将视图裁剪成菱形的圆角。相似胶囊形状
        Button {
            print("Pressed!")
        } label: {
            Image(systemName: "bolt.fill")
                .foregroundStyle(.white)
                .padding(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))
                .background(.green)
                .clipShape(Capsule())
        }
        //我在哪里增加了一些更精确的padding来取得更精确的形状。
    }
}

调试成果

9、View的旋转

SwiftUI的RotationEffect()修饰符让我们能够自在旋转视图，运用视点或弧度。

struct FFViewRotate: View {
    @State private var rotation = 50.0
    @State private var rotation1 = 20.0
    var body: some View {
        //将Text旋转-90度
        Text("Hello, World!")
            .rotationEffect(.degrees(-90))
        Divider()
            .padding(.top, 50)
        //运用.radians设置弧度。
        Text("Hello, World!")
            .rotationEffect(.radians(.pi))
        //运用Silder操控旋转
        Divider()
        VStack {
            Slider(value: $rotation, in: 0...360)
                .padding(.bottom, 50)
            Text("Hello, World!")
                .rotationEffect(.degrees(rotation))
        }
        .padding()
        //默许情况下，视图环绕其中心旋转，但假如你想固定从特定的点旋转，
        //能够为此增加一个额外的参数。例如，环绕左上角旋转。
        Divider()
        VStack {
            Slider(value: $rotation1, in: 0...360)
                .padding(.bottom, 50)
            Text("Hello, World!")
                .rotationEffect(.degrees(rotation1), anchor: .topLeading)
        }
        .padding()
    }
}

调试成果

能够依据Slider动态调整旋转视点，自行demo探究

10、View的3D旋转

SwiftUI的rotation3DEffect()修饰符能够在3D空间中旋转视图，简直不需要太多的代码就能够创造十分好的作用。它接受两个参数：要旋转的视点（以弧度或度为单位），以及包括要绕其旋转的X、Y和Z轴的元祖。

struct FFViewRotate3D: View {
    var body: some View {
        //将Text环绕X轴旋转45度
        Text("METABBLV SWIFTUI")
            .font(.largeTitle)
            .foregroundStyle(.green)
            .rotation3DEffect(.degrees(45), axis: (x: 1, y: 0, z:0))
    }
}

调试成果

11、View的扩大和缩小

SwiftUI的scaleEffect()修饰符让我们能够自在的扩大或缩小视图。

struct FFViewScale: View {
    var body: some View {
        //扩大
        Text("Hello, World!")
            .scaleEffect(3)
            .frame(width: 300, height: 100)
        Spacer()
        //在X轴与Y轴之上做更改，能够紧缩图像
        Text("Hello, World!")
            .scaleEffect(x: 1, y: 5)
            .frame(width: 300, height: 100)
        Spacer()
        //指定一个锚点进行缩放。
        Text("Hello, World!")
            .scaleEffect(2, anchor: .bottomTrailing)
        //取得一个两倍巨细的文本视图，从右下角开端缩放。
        Spacer()
        //对照组
        Text("Hello, World!")
        Spacer()
    }
}

缩放视图不会导致它以新的巨细从头制作，只会在不同方向上拉伸。这意味着小的文本看起来含糊，小的图像或许看起来像素化或含糊。

调试成果