SwiftUI基础篇Transforming(下)

Transforming View

• 运用offset设置视图的偏移位置
• 设置视图的opacity
• 为一组视图设置accent
• 经过mask设置视图间的遮罩
• 设置视图的高斯含糊
• 将视图混合在一起
• 怎么经过上色、去饱和度来调整视图
• 运用ButtonStyle自界说按钮
• 运用ProgressViewStyle自界说ProgressView
• 经过ToggleStyle自界说Toggle
• 躲藏默许布景色用其他代替

概述

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

1、用精确的数值设置圆角

SwiftUI视图都能够运用cornerRadius()修饰符来设置圆角。它采用一个简单的、以点数为单位的值来控制圆角。 目前在iOS17上已不推荐运用，这个办法更像UIKit的设置圆角的办法。

struct FFViewRound: View {
    var body: some View {
        //创立一个15点圆角的文本视图。
        Text("Hello, World!")
            .padding()
            .background(.green)
            .cornerRadius(15)
        //此函数在iOS17上建议运用“Use `clipShape` or `fill` instead”
        //能够运用带Capsule的ClipShape()修饰符主动将最短的边际更加的圆润。
        Text("Hello, world!")
            .padding()
            .background(.green)
            .clipShape(Capsule())
    }
}

调试成果

2、设置视图的opacity

运用opacity()修饰符，任何SwiftUI视图都能够时部分透明或许全透明的，它承受一个介于0（完全不可见）-1（完全不透明）之间的值，与UIKit的alpha特点共同。

struct FFViewOpacity: View {
    @State private var opacity = 0.5
    var body: some View {
        //创立一个红色文本视图，附加30%透明度
        Text("Hello, World!")
            .padding()
            .background(.red)
            .opacity(0.3)
        //修正不透明度对错常快速的，根本不可见，视图出现即看见成果，经过Slider查看动态作用
        VStack {
            Text("Hello, World!")
                .padding()
                .background(.red)
                .opacity(opacity)
            Slider(value: $opacity, in: 0...1)
        }
        .padding()
    }
}

调试成果

3、为一组视图设置accent

iOS运用淡色调给应用程序一个和谐的主题，在SwiftUI中也有相同的功能，名为accent。就像在UIkit中，当你设置一个视图的accent会影响它里面的一切视图，假如你设置顶层空间的访问色，那么一切的东西都有色彩。

struct FFViewAccent: View {
    var body: some View {
        VStack {
            Button("Press Here") {
                print("Button pressed!")
            }
        }
        .accentColor(.orange)
    }
}

调试成果

4、经过mask设置视图间的遮罩

SwiftUI提供了mask()修饰符，用于用一个遮罩别的一个，这意味着能够用文本遮罩一个图画，或许发挥你聪明的小脑袋瓜。

struct FFViewMask: View {
    var body: some View {
        //创立一个300*300的条纹图画，然后运用文本“SWIFT！”遮罩，这样这些字母就能够和图画兼并。
        Image(.fullEnglish)
            .frame(width: 300, height: 300)
            .mask {
                Text("SWIFT!")
                    .font(.system(size: 72))
            }
    }
}

mask()修饰符与clipShape()不同，因为它也应用遮罩视图中的任何透明度。你能够依据遮罩的透明度在底层视图中设置空泛。另一方面，clipShape()值调整应用他的视图的外部形状。

调试成果

5、设置视图的高斯含糊

blur()修饰符能够依据自己的选择对视图附加实时的高斯含糊。

struct FFViewBlur: View {
    @State private var blurAmount = 0.0
    var body: some View {
        //对图画运用含糊
        Image(.freshBakedCroissantThumb)
            .resizable()
            .frame(width: 300, height: 300)
            .blur(radius: 20)
        Divider()
        //对文本运用含糊
        Text("Meta BBlv in Swift")
            .blur(radius: 2)
        Divider()
        //经过Slider动态调整含糊作用
        VStack {
            Image(.macaronsGaloreThumb)
                .resizable()
                .frame(width: 300, height: 300)
                .blur(radius: blurAmount)
            Slider(value: $blurAmount, in:  0...20)
        }
        .padding()
    }
}

调试成果

6、将视图混合在一起

当将一个视图放置在另一个视图上时，你能够运用blendMode()修饰符来控制堆叠的办法。这包含了多种混合色彩的办法。

struct FFViewBlend: View {
    var body: some View {
        //创立一个ZStack，里面有两个堆叠的圆，将混合形式设定为.multiply,色彩会变暗
        ZStack {
            Circle()
                .fill(.red)
                .frame(width: 200, height: 200)
                .offset(x: -50)
                .blendMode(.multiply)
            Circle()
                .fill(.blue)
                .frame(width: 200, height: 200)
                .offset(x: 50)
                .blendMode(.multiply)
        }
        .frame(width: 400)
    }
}

调试成果

7、怎么经过上色、去饱和度来调整视图

SwiftUI能够经过colorMultiply、saturation和contrast调整他们的亮度、色调、色温、饱和度来精确的调整视图。

struct FFViewTintingAndDesaturating: View {
    @State private var contrastAmount = 0.5
    var body: some View {
        //将Image调成红色
        Image(.mexicanMocha)
            .colorMultiply(.red)
        //饱和度调整，0.0时全灰色-1.0为原始色彩
        Image(.mushroomTagliatelle)
            .saturation(0.3)
        //甚至能够经过运用contrast()修饰符动态调整视图的对比度，0.0不会发生对比度，为灰色图画，
        //1.0为原始图画，高于1.0会增加对比度
        VStack {
            Image(.paellaAlicante)
                .contrast(contrastAmount)
            Slider(value: $contrastAmount , in: 0...3)
        }
    }
}

调试成果

8、运用ButtonStyle自界说按钮

SwiftUI有很多款式协议，能够为视图界说通用的款式，比方Button、ProgressView、Toggle等。他们的工作原理都是能够会集的运用恣意数量的修饰符，使视图看起来像咱们想要的那样。创立一个控件其实就是一套完整的自界说修饰符的集合。

8.1、ButtonStyle作用一

//能够将惯例的三个修饰符会集到一个单一的BlueButton款式中
struct BlueButton: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(Color(red: 0, green: 0, blue: 0.5))
            .foregroundStyle(.white)
            .clipShape(Capsule())
    }
}
struct FFButtonStyle: View {
    var body: some View {
        Button("Press Me") {
            print("Button pressed!")
        }
        .padding()
        .background(Color(red: 0, green: 0, blue: 0.5))
        .clipShape(Capsule())
        //将修饰符包装在BlueButton中了。
        Button("Press Me") {
            print("Button pressed!")
        }
        .buttonStyle(BlueButton())
    }
}

8.2、ButtonStyle作用二

//创立按钮点击时扩大作用
struct GrowingButton: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(.green)
            .foregroundStyle(.white)
            .clipShape(Capsule())
            .scaleEffect(configuration.isPressed ? 1.2 : 1.0)
            .animation(.easeOut(duration: 0.2), value: configuration.isPressed)
    }
}
struct FFButtonStyle: View {
    var body: some View {
        Button("Press Me") {
            print("Button pressed!")
        }
        .padding()
        .background(Color(red: 0, green: 0, blue: 0.5))
        .clipShape(Capsule())
        Button("Press Me") {
            print("Button pressed!")
        }
        .buttonStyle(GrowingButton())
    }
}

调试成果

绿色Button点击扩大作用

9、运用ProgressViewStyle自界说ProgressView

SwiftUI提供了ProgressViewStyle协议来为ProgressView创立自界说设计，能够读取进展视图的完结情况。要创立自界说ProgressView款式，需要创立一个结构体，该结构体具有承受视图当前配置的makeBody()办法，然后，能够继续烘托想要的进展，能够时一个百分比文本，能够是一个进展圆。

//创立一个进展圆圈
struct GaugeProgressStyle: ProgressViewStyle {
    var strokeColor = Color.blue
    var strokeWidth = 25.0
    func makeBody(configuration: Configuration) -> some View {
        //fractionCompleted:进展视图表示的使命的完结部分，从0.0(尚未开端)到1.0(完全完结)
        let fractionCompleted = configuration.fractionCompleted ?? 0
        return ZStack {
            Circle()
                .trim(from: 0, to: fractionCompleted)
                .stroke(strokeColor, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
                .rotationEffect(.degrees(-90))
        }
    }
}
struct FFProgressViewCustomizing: View {
    @State private var progress = 0.2
    var body: some View {
        ProgressView(value: progress, total: 1.0)
            .progressViewStyle(GaugeProgressStyle())
            .frame(width: 200, height: 200)
            .contentShape(Rectangle())
            .onTapGesture {
                if progress < 1.0 {
                    withAnimation {
                        progress += 0.2
                    }
                }
            }
    }
}

在-90度开端绘制，圆圈会在顶部开端绘制。

调试成果

10、经过ToggleStyle自界说Toggle

SwiftUI提供了ToggleStyle协议来定制开关，任何符合此协议的结构体都必须完成一个makeBody的办法。该办法能够自界说想要的办法完成Toggle。当自界说Toggle切换时，取决自己自界说敞开和关闭，SwiftUI不会主动完结了。

struct CheckToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button {
            configuration.isOn.toggle()
        } label: {
            Label {
                configuration.label
            } icon: {
                Image(systemName: configuration.isOn ? "checkmark.circle.fill" : "circle")
                    .foregroundStyle(configuration.isOn ? Color.accentColor : .secondary)
                    .accessibilityLabel(Text(configuration.isOn ? "Checked" : "Unchecked"))
                    .imageScale(.large)
            }
        }
        .buttonStyle(.plain)
    }
}
struct FFToggleStyle: View {
    @State private var isOn = false
    var body: some View {
        Toggle("Switch Me", isOn: $isOn)
            .toggleStyle(CheckToggleStyle())
    }
}

调试成果

11、躲藏默许布景色用其他代替

一些SwiftUI是有有一个默许的布景色彩，它会掩盖你自己想要的任何色彩，但是假如你运用scrollCOntentBackground()修饰符，能够躲藏默许布景并用其他色彩代替。

11.1、scrollContentBackground款式一

删去List的默许色彩，替换为.indigo

struct FFViewChangeBackground: View {
    var body: some View {
        List(0..<100) { i in
            Text("Exampl \(i)")
        }
        .scrollContentBackground(.hidden)
        .background(.indigo)
    }
}

11.2、scrollContentBackground款式二

躲藏TextEditor的默许布景，用渐变代替

struct FFTextEditorBackground: View {
    @State private var bio = "Describe yourself"
    var body: some View {
        TextEditor(text: $bio)
            .scrollContentBackground(.hidden)
            .background(LinearGradient(colors: [.white, .gray], startPoint: .top, endPoint: .bottom))
    }
}

调试成果