swiftUI学习第一天 基本概念 Text image

在布局设计中， 只能初始化10个视图，超过11个视图就会报错

如果需要更多子视图，就可以用其他视图容器包裹起来， 实例使用另一个VStack来包含文本视图

import SwiftUI

struct ViewsBuildExample: View {
    var body: some View {
        VStack {
            Text("Hello, World!1")
            Text("Hello, World!2")
            Text("Hello, World!3")
            Text("Hello, World!4")
            Text("Hello, World!5")
            Text("Hello, World!6")
            Text("Hello, World!7")
            VStack {
                Text("Hello, World!8")
                Text("Hello, World!9")
                Text("Hello, World!10")
                Text("Hello, World!11")// 将会报错

            }
        }
    }
}

Text 文本概念

优化代码，将代码重复使用，按住command + 左键 选择 Extract Subwiew

struct HeaderViews: View {

    var body: some View {

        VStack {

            // 文本视图 设置字体 size 调整为largeTitle

            Text("Title")

                .font(.largeTitle)

            // 文本视图 设置字体 size 调整为title 文本颜色为灰色

            Text("Subtitle")

                .font(.title)

                .foregroundColor(Color.gray)

            // 设置背景色为蓝色

            Text("short description of what I am demostrating goes here.")

            // 最大宽度

                .frame(maxWidth: .infinity)

                .font(.title)

                .foregroundColor(Color.white)

                .padding() // 填充

                .background(Color.blue)

        }

    }

}

图片Image的使用

1. Symbols 库的图标的使用
2. Assetes.xcassets

 struct SybolsIntro: View {
    var body: some View {
        VStack(spacing: 20){
            Text("图片").font(.largeTitle)
            Text("使用 SF Symbols").foregroundColor(.gray)

            Text("使用图标符号字体库，显示图片")
                .foregroundColor(Color.white)
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.blue)
            // 当你想使用SF Sybols时，使用systemName
            Image(systemName: "hand.thumbsup.fill")
                .font(.largeTitle) // 设置图标大小
            // 使用Assets.xcassets
            Image("img")
                .resizable()
                .aspectRatio( contentMode: .fit)
        }
    }
}

形状介绍 Shapes