SwiftUI 基础布局

说明

SwiftUI 是由 Apple 开发提供的强大的 iOS 开发语言，具有「一次开发，全端发布」的特点。本文提供了 SwiftUI 基础布局的说明教学。涉及 .padding, .frame, .offset, .foregroundColor, .font 参数的说明。

.padding

.padding （中文意「填充」）是 SwiftUI 中用于设置视图填充的参数。使用 .padding() 可以指定 Text、Button 等视图填充的数值，或者是对一个或多个边设置填充。

.padding() 的预设四个方向分别为 .top, .leading, .bottom, .trailing。

使用方法

import SwiftUI

struct Test: View {
    var body: some View {
        VStack{
            Text("示例文本")
                .padding()
        }
        
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

import SwiftUI

struct Test: View {
    var body: some View {
        VStack{
            Text("示例文本")
                .padding(16)
        }
        
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

import SwiftUI

struct Test: View {
    var body: some View {
        VStack{
            Text("示例文本")
                .padding(.top, 20)
        }
        
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

import SwiftUI

struct Test: View {
    var body: some View {
        VStack{
            Text("示例文本")
                .padding([.top, .bottom], 20)
        }
        
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

import SwiftUI

struct Test: View {
    var body: some View {
        VStack{
            Text("示例文本")
                .padding(EdgeInsets(top: 10, bottom: 20))
        }
        
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

.frame

.frame（中文意框架）是 SwiftUI 中用于定义组件或视图框架（宽高）的参数，使用 .frame 可以定义组件或视图的 width, height, minWidth, minHeight, maxWidth, maxHeight。

使用方法

import SwiftUI

struct Test: View {
    var body: some View {
        VStack{
            Circle()
                .frame(Width: 100, Height: 200)
        }
        
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

scaledToFit 和 resizable

在 SwiftUI 中，.resizable() 修饰符用于设置图像大小调整的模式，它只能应用于 Image 类型。默认情况下，SwiftUI 使用 stretch 模式来缩放图片以填充可用空间。如果我们将模式切换为 tile，SwiftUI 将以图片原始大小在给定空间中进行平铺。

修改 SwiftUI resizable 模式：.resizable(resizableMode: tile)。

.scaledToFit() 通常置于 .resizable() 下方，以让图片自适应视图空间。它将在不裁剪图片的情况下让整张图占满视图。

使用方法

import SwiftUI

struct Test: View {
    var body: some View {
        VStack{
            Image("Rose")
                .resizable()
                .scaledToFit()
        }
        
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

offset

.offset() 参数将让组件在 SwiftUI 的视图中以像素为单位进行偏移。

使用方法

import SwiftUI

struct Test: View {
    var body: some View {
        VStack {
            Circle()
                .offset(x: 100, y: 100)
        }
    }
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

foregroundColor

.foregroundColor() 是前景色，使用时在其括号内填写颜色数据即可，在此不做详细说明。

.font

.font() 是对文字进行排版定义的参数，括号中可以直接填写 Apple 预设的字号（如下一图），也可以自定义相关参数。

（参考信息：Apple Developer 官方预设字号信息）