SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


SwiftUI - Stack

Stack 是用于在有组织的视图中排列多个视图的基本容器。它们是静态的,最多可容纳 10 个子视图/子视图。使用堆栈,我们可以在可重用组件的帮助下创建复杂而简单的布局。堆栈不可滚动,但如果您想制作可滚动堆栈,则可以使用 ScrollView。

SwiftUI 支持的堆栈类型 −

  • HStack

  • VStack

  • ZStack

SwiftUI 中的 HStack

HStack 称为水平堆栈。HStack 用于在从左到右的列表中水平显示其子视图。它是用户界面需要将其组件对齐在水平线上时使用的基本容器。

Stack

语法

以下是语法 −

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

输出

Stack

在 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()
}

输出

Stack

SwiftUI 中的 VStack

VStack 称为垂直堆栈。VStack 用于垂直显示其子视图。与 HStack 一样,它也是一个容器,用于在应用程序的用户界面中从上到下/垂直线显示组件。

Stack

语法

以下是语法−

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

输出

Stack

在 SwiftUI 中自定义 VStack

自定义 VStack 有助于为应用程序创建更高级的界面。因此,为了以特定格式排列其子视图或组件,SwiftUI 提供了两个属性,这些属性是可选的,您可以根据需要使用它们,属性是 −

语法

以下是对齐和间距属性的语法−

VStack(alignment:.leading){
   View 1
   View 2
   View 3
}
VStack(spacing: 40){
   View 1
   View 2
   View 3
}
  • alignment:它对齐 VStack 的子视图。它使用 Horizo​​ntalAlignment 类型参数,例如 .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()
}

输出

Stack

SwiftUI 中的 ZStack

ZStack 用于将视图排列在另一个视图之上,或者我们可以说它将一个或多个视图重叠在另一个视图上。此容器将一组视图以从后到前的顺序显示在一起。它对于创建重叠视图和复杂的分层 UI 组件非常有用

Stack

语法

以下是语法−

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

输出

Stack

在 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()
}

输出

Stack

在 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()
}

输出

Stack