SwiftUI学习03：Text文字和Image图片的使用

Text 文字的使用

• 在ContentView.swift文件中，我们实现如下代码

struct ContentView: View {
    var body: some View {
        // 初始化一个文本
        Text("Hello World")
            // 背景颜色
            .background(Color.red)
            // 设置字重：字体加粗
            .fontWeight(.bold)
            // 字体大小
            .font(.system(size: 20))
            // 字体颜色
            .foregroundColor(.blue)
            // 阴影
            .shadow(color: .black, radius: 1)
            // 边距
            .padding(10)
        
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

更多参数设置如下:

Image 图片的使用

在 Assets.xcassets 文件中，可以导入 本地图片素材，也可以设置颜色

上面我们导入了一张图片，回到代码：

// 初始化一张图片
Image("test")
    // 缩放图片（拉伸缩放）
    .resizable()
    // 等比例缩放
    .scaledToFit()
    // 调整图片尺寸
    .frame(width: 300)
    // 裁剪图片
    .clipShape(Circle())
    // 透明度
    .opacity(0.8)
    // 覆盖一层视图
    .overlay(
        Text("编辑")
            .fontWeight(.bold)
            .font(.system(size: 20))
            .foregroundColor(.white)
    )

最后在预览中呈现的样式如下：

知识点：Image除了可以展示 本地图片，还可以展示 网络图片 和 系统图标

官方符号

Apple 官方提供了 3000 个新符号供开发者使用，开发者几乎无需自己收集常用图标

Apple官方图标

使用方式

// 使用系统图标
Image(systemName: "square.and.arrow.up")
    .font(.system(size: 50))

安全区

我们看到模拟器预留了 顶栏 和 底栏 两块区域，这是 安全区域

如果想忽略安全区域，把视图撑开整个屏幕，通过设置 .edgesIgnoringSafeArea 修饰：

.edgesIgnoringSafeArea(.all)