SwiftUI (一) Text Color Image Circle

SwiftUI 结果

新建SwiftUI项目，语言选择swift。

里面有一个ContentView就是要呈现的视图。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("hello world")
    }
}

#Preview {
    ContentView()
}

其中View是一个协议。 some View表示body是一个支持View协议的。

// 也可以指定Text,Text是符合View协议的，但是就不能显示其它类型了。
// some View表示可以返回任意类型的SwiftUI控件。
import SwiftUI

struct ContentView: View {
    var body: Text {
        Text("hello world")
    }
}

#Preview {
    ContentView()
}

Text组件的使用

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            /*
            // 超大标题
            Text("largeTitle").font(.largeTitle)
            // 一级标题
            Text("title").font(.title)
            // 二级标题
            Text("title2").font(.title2)
            // 三级标题
            Text("title3").font(.title3)
            // 粗体标题
            Text("headline").font(.headline)
            // 子标题
            Text("subheadline").font(.subheadline)
            // 正文（默认）
            Text("body").font(.body)
            // 提示文本
            Text("callout").font(.callout)
            // 注释小字1
            Text("caption").font(.caption)
            // 注释小字2
            Text("caption2").font(.caption2)


             */
            // 自定义字体，这个用的最多
            Text("20号常规字体")
                .font(.system(size: 20))

            // Font.Weight
            /*.ultraLight   // 极细
                .thin          // 更细
                .light         // 细
                .regular       // 常规（默认）
                .medium        // 中等
                .semibold      // 半粗
                .bold          // 粗
                .heavy         // 重
                .black         // 黑（最粗）
             */
            Text(".thin").font(.system(size: 30,weight: .thin))
            Text(".thin").font(.system(size: 30,weight: .black))

            // 字形 Font.Design
            /*
             .default    // SF Pro 常规（默认）
             .rounded    // SF Pro Rounded（圆角）
             .monospaced // SF Mono（等宽）
             .serif       // New York（衬线）
             */
            // 默认字形
            Text("默认字形")
                .font(.system(size: 30, design: .default))
            // 圆角字形（标题/装饰推荐）
            Text("serif")
                .font(.system(size: 30, design: .serif))
            // 等宽字形（数字/编号/代码推荐）

            // 自定义字体名 + 字号
            Text("自定义字体")
                .font(.custom("PingFang SC", size: 20))

            // 设置颜色 斜体
            Text("green").foregroundStyle(.green).background(.blue).italic().bold().padding(10)

            // 最多2行 超出了显示省略号truncationMode(.tail) 也可以.head最后一行的开头显示省略号，middle最后一行的中间显示省略号
            Text("oundStyle(.green).background(.blue).italic().bold().padding(10)oundStyle(.green).background(.blue).italic().bold().padding(10)").lineLimit(2).truncationMode(.tail)

        }

    }
}

#Preview {
    ContentView()
}

Color

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Color.green.frame(width: 20, height: 20)
            Color.red.frame(width: 20, height: 20)
            Color.purple.frame(width: 20, height: 20).cornerRadius(10)

            // 自定义颜色
            Color(red: 0.5, green: 0.5, blue: 0).frame(width: 20, height: 20)

            // 加透明度
            Color.red.opacity(0.2).frame(width: 20, height: 20)

            // 同样，Color也支持圆角
            Color.red.opacity(0.2).frame(width: 20, height: 20).cornerRadius(10)
            ZStack {
                Color(red: 1, green: 0, blue: 0).frame(width: 100, height: 100)
                //opacity 0完全透明 1完全不透明
                Color(red: 0, green: 1, blue: 0, opacity: 0.5).frame(
                    width: 100,
                    height: 50
                )
            }

        }

    }
}

#Preview {
    ContentView()
}

安全区域

    var body: some View {
        // 安全区域不会有颜色
        //        Color.red
        // 安全区域也会改变颜色
        Color.red.ignoresSafeArea()

    }

Image

struct ContentView: View {
    var body: some View {
        VStack {
            //            系统 SF 图标（推荐，自带矢量、适配深浅色）
            Image(systemName: "house.fill")
                .font(.largeTitle)  // 图标大小
                .foregroundColor(.red)  // 图标颜色

            /*
             项目本地图片
             把图片拖入项目 Assets.xcassets
             */
            Image("图片名称")
                .resizable()  // 允许缩放（必加，否则图片原始大小）
                .scaledToFit()  // 等比例缩放，完整显示
                .frame(width: 150)  // 限制宽度
                .clipShape(Circle())  // 裁剪为圆形头像
        }

    }
}