SwiftUI - Stack
Stack 是用于在有组织的视图中排列多个视图的基本容器。它们是静态的，最多可容纳 10 个子视图/子视图。使用堆栈，我们可以在可重用组件的帮助下创建复杂而简单的布局。堆栈不可滚动，但如果您想制作可滚动堆栈，则可以使用 ScrollView。
SwiftUI 支持的堆栈类型 −
HStack
VStack
ZStack
SwiftUI 中的 HStack
HStack 称为水平堆栈。HStack 用于在从左到右的列表中水平显示其子视图。它是用户界面需要将其组件对齐在水平线上时使用的基本容器。
语法
以下是语法 −
HStack{
View 1
View 2
View 3
}
示例
以下 SwiftUI 程序将展示如何使用 HStack。
import SwiftUI
struct ContentView: View {
var body: some View {
HStack{
Circle()
.fill(Color.yellow)
.frame(width: 150, height: 150)
.overlay{
Text("Hello")
}
Circle()
.fill(Color.red)
.frame(width: 150, height: 150)
.overlay{
Text("SwiftUI")
.foregroundStyle(Color.white)
}
}
}
}
#Preview {
ContentView()
}
输出
在 SwiftUI 中自定义 HStack
我们可以自定义 HStack，为 Apple 的应用程序创建更复杂、更动态的界面。众所周知，HStack 是一个类似盒子的布局，因此需要指定子视图在其中的位置，因此它支持两种类型的属性，并且这两种属性都是可选的−
语法
以下是对齐和间距属性的语法−
HStack(alignment:.top){
View 1
View 2
View 3
}
HStack(spacing: 30){
View 1
View 2
View 3
}
- alignment:它对齐 HStack 的子视图。它使用 VerticalAlignment 类型参数，例如 .bottom、.center 和 .top。这里，.bottom 用于将视图与堆栈底部对齐。.center 用于将视图与堆栈中间对齐，默认情况下它是堆栈的对齐方式。.top 用于将视图与堆栈顶部对齐。
- spacing:它用于在堆栈中存在的每个子视图之间提供空间。
示例
以下 SwiftUI 程序将展示如何自定义 HStack 的内容。
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Login Page")
.font(.largeTitle)
HStack(alignment: .center, spacing: 50){
Button("Login"){
// Some Action
}
.buttonStyle(.bordered)
.background(Color.green)
.foregroundStyle(Color.white)
Button("Register"){
// Some Action
}
.buttonStyle(.bordered)
.background(Color.green)
.foregroundStyle(Color.white)
}
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的 VStack
VStack 称为垂直堆栈。VStack 用于垂直显示其子视图。与 HStack 一样，它也是一个容器，用于在应用程序的用户界面中从上到下/垂直线显示组件。
语法
以下是语法−
VStack{
View 1
View 2
View 3
}
示例
以下 SwiftUI 程序将展示如何使用 VStack。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
Circle()
.fill(Color.blue)
.frame(width: 150, height: 150)
.overlay{
Text("Hello")
.foregroundStyle(Color.yellow)
}
Rectangle()
.fill(Color.pink)
.frame(width: 150, height: 150)
.overlay{
Text("Swift")
.foregroundStyle(Color.white)
}
}
}
}
#Preview {
ContentView()
}
输出
在 SwiftUI 中自定义 VStack
自定义 VStack 有助于为应用程序创建更高级的界面。因此，为了以特定格式排列其子视图或组件，SwiftUI 提供了两个属性，这些属性是可选的，您可以根据需要使用它们，属性是 −
语法
以下是对齐和间距属性的语法−
VStack(alignment:.leading){
View 1
View 2
View 3
}
VStack(spacing: 40){
View 1
View 2
View 3
}
- alignment:它对齐 VStack 的子视图。它使用 HorizontalAlignment 类型参数，例如 .leading、.center 和 .trailing。这里，.leading 用于将视图对齐到堆栈的左侧。.center 用于将视图对齐到堆栈的中间，默认情况下它是堆栈的对齐方式。.trailing 用于将视图对齐到堆栈的右侧。
- spacing:它用于在堆栈中存在的每个子视图之间提供空间。
示例
以下 SwiftUI 程序将展示如何自定义 VStack 的内容。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading, spacing: 40){
Text("Languages:")
Rectangle()
.frame(width: 150, height: 190)
.overlay(
List{
Text("Swift")
Text("C#")
Text("Python")
})
Text("Databases:")
Rectangle()
.frame(width: 150, height: 190)
.overlay(
List{
Text("MongoDB")
Text("MySQL")
Text("Oracle")
})
}
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的 ZStack
ZStack 用于将视图排列在另一个视图之上，或者我们可以说它将一个或多个视图重叠在另一个视图上。此容器将一组视图以从后到前的顺序显示在一起。它对于创建重叠视图和复杂的分层 UI 组件非常有用
语法
以下是语法−
ZStack{
View 1
View 2
View 3
}
示例
以下 SwiftUI 程序将展示如何使用 ZStack。
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
Circle()
.stroke(Color.orange)
Circle()
.fill(Color.blue)
.frame(width: 350, height: 350)
Rectangle()
.fill(Color.pink)
.frame(width: 150, height: 150)
.overlay{
Text("SwiftUI")
.foregroundStyle(Color.white)
}
}
}
}
#Preview {
ContentView()
}
输出
在 SwiftUI 中自定义 ZStack
与 HStack 和 VStack 一样，ZStack 也支持对齐属性来自定义其中存在的组件或子视图。此属性是可选的。它使用水平和垂直对齐的组合，也可以分别使用它们作为参数类型。默认情况下，它将视图对齐在中心
语法
以下是对齐和间距属性的语法−
ZStack(alignment:.top){
View 1
View 2
View 3
}
示例
以下 SwiftUI 程序将展示如何自定义 ZStack 的内容。
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack(alignment: Alignment(horizontal: .center, vertical:.center)){
Image("wallpaper")
RoundedRectangle(cornerRadius: 20)
.fill(Color.purple)
.frame(width: 300, height: 100)
.overlay(
Text("Welcome")
.font(.largeTitle)
.foregroundStyle(Color.white))
}
}
}
#Preview {
ContentView()
}
输出
在 SwiftUI 中组合多个视图
SwiftUI 允许我们将这三个堆栈组合起来，为 Apple 的应用程序创建一个动态且用户参与度高的用户界面。我们还可以嵌套它们以创建更复杂的界面。让我们借助一个例子来理解这个概念。
示例
以下 SwiftUI 程序将展示如何组合 HStack、VStack 和 ZStack 来为应用程序创建一个简单的布局。
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
Image("wallpaper")
.resizable()
.ignoresSafeArea()
VStack(alignment:.leading){
RoundedRectangle(cornerRadius: 20)
.fill(Color.teal)
.frame(width: 350, height: 150)
.overlay(
Text("SwiftUI")
.font(.largeTitle))
}
.padding(.bottom, 410)
Spacer()
HStack(alignment:.bottom){
RoundedRectangle(cornerRadius: 15)
.fill(Color.yellow)
.frame(width: 200, height: 200)
.overlay(
Text("Chapters")
.font(.title))
RoundedRectangle(cornerRadius: 15)
.fill(Color.yellow)
.frame(width: 200, height: 200)
.overlay(
Text("Programs")
.font(.title))
}
.padding(.top, 90)
}
.padding()
}
}
#Preview {
ContentView()
}
输出
