Frame (框架)

Frame 指定了一个视图的宽度、高度和位置。

SwiftUI 提供了许多方法来设置视图的 Frame，允许你精确地控制视图的尺寸。

设置Frame

你可以通过 .frame(width:height:alignment:) 修饰符来设置视图的宽度、高度以及内容的对齐方式。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .frame(width: 200, height: 100, alignment: .center)
            .background(Color.blue)
    }
}

宽度和高度：width 和 height 参数指定视图的大小。
对齐方式：alignment 参数决定内容在框架中的对齐方式。默认情况下，内容居中对齐。

宽度和高度的单独设置

你可以只设置宽度或高度，另一个属性保持默认。

Text("Hello, SwiftUI!")
    .frame(width: 150)  // 仅设置宽度，高度自适应内容
    .background(Color.green)

设置最小和最大尺寸

SwiftUI 还允许你通过 .frame(minWidth:maxWidth:minHeight:maxHeight:alignment:) 修饰符来设置视图的最小和最大尺寸。

Text("Hello, World!")
    .frame(minWidth: 100, maxWidth: 200, minHeight: 50, maxHeight: 100)
    .background(Color.orange)

Alignment (对齐方式)

Alignment 决定了视图内部内容或多个视图之间的相对位置。

SwiftUI 提供了几种常用的对齐选项，如 .leading、.trailing、.center、.top、.bottom 等。

在容器中的对齐

在 HStack、VStack 和 ZStack 这些容器中，你可以通过对齐方式来控制子视图的排列方式。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("First Line")
            Text("Second Line")
                .font(.largeTitle)
            Text("Third Line")
        }
        .frame(width: 200, height: 100)
        .background(Color.gray)
    }
}

HStack：水平排列子视图，使用 .leading、.trailing、或 .center 来控制对齐。
VStack：垂直排列子视图，使用 .top、.bottom、或 .center 来控制对齐。
ZStack：将子视图叠加在一起，使用 .topLeading、.topTrailing、.bottomLeading、或 .bottomTrailing 来控制对齐。

在 Frame 中的对齐

当你在 Frame 中设置对齐方式时，你控制的是视图内容在 Frame 内部的位置。

Text("Aligned Text")
    .frame(width: 200, height: 100, alignment: .bottomTrailing)
    .background(Color.blue)

居中对齐的 Frame

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Centered Text")
                .frame(width: 300, height: 200)
                .background(Color.purple)
                .border(Color.black, width: 2)
        }
    }
}

在这个例子中，Text 视图被放置在一个 300x200 的 Frame 中，并居中对齐。

组合使用 Frame 和 Alignment

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .top) {
            Text("Left")
                .frame(width: 100, height: 100)
                .background(Color.red)
            Text("Right")
                .frame(width: 100, height: 50)
                .background(Color.blue)
        }
        .frame(width: 250, height: 150, alignment: .topLeading)
        .background(Color.yellow)
    }
}

在这个例子中，HStack 中的两个文本视图在顶部对齐，并且整个 HStack 被放置在一个大的 Frame 中，框架的内容在顶部左对齐。

小结：

Frame：用于设置视图的尺寸（宽度、高度）和位置，通过 .frame()修饰符控制。
Alignment：用于控制视图或其内容在容器或框架中的对齐方式。SwiftUI提供了灵活的对齐选项，可以与容器和Frame配合使用。

通过熟练使用Frame和Alignment，你可以精确控制SwiftUI布局中的视图位置和尺寸，创建丰富的用户界面。

SwiftUI-View基础设置Frames & Alignments