SwiftUI - 堆叠

堆叠是用于以组织方式排列多个视图的基本容器。它们是静态的，最多可以容纳 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
}

对齐方式：它对齐 HStack 的子视图。它使用 VerticalAlignment 类型参数，例如 .bottom、.center 和 .top。这里，.bottom 用于将视图对齐到堆叠的底部。.center 用于将视图对齐到堆叠的中间，它是堆叠的默认对齐方式。.top 用于将视图对齐到堆叠的顶部。
间距：用于在堆叠中每个子视图之间提供空间。

示例

以下 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
}

对齐方式：它对齐 VStack 的子视图。它使用 HorizontalAlignment 类型参数，例如 .leading、.center 和 .trailing。这里，.leading 用于将视图对齐到堆叠的左侧。.center 用于将视图对齐到堆叠的中间，它是堆叠的默认对齐方式。.trailing 用于将视图对齐到堆叠的右侧。
间距：用于在堆叠中每个子视图之间提供空间。

示例

以下 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()
}

输出

打印页面