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 - 容器

容器是承载或显示其他视图的视图。或者我们可以说容器用于在结构化布局中显示其他视图。它们允许我们以简单顺序或复杂层次结构显示或管理子视图。它们负责视图在应用程序界面中的显示和行为方式。它是最强大的,并使用了 SwiftUI 的全部功能。

容器为我们提供了灵活性,可以按照我们想要的任何布局排列子视图,并且可以一次性将更改应用于单个或整个子视图。 SwiftUI 支持各种类型的容器,它们如下 −

  • Stacks

  • List

  • Form

  • ScrollView

  • Group

  • GeometryReader

Stacks

Stack 用于按指定顺序排列视图。SwiftUI 支持三种类型的 stack:VStack、HStack 和 ZStack。VStack 用于垂直排列视图,HStack 用于水平排列视图,ZStack 用于将一个视图排列在另一个视图上方或分层排列。

你可以根据应用的布局来使用它们。我们也可以允许将一个视图嵌套在另一个视图中。

示例

以下 SwiftUI 程序使用堆栈。

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Text("Tutorials Point")
            .font(.largeTitle)
            .bold()
            .foregroundStyle(.green)
         ZStack{
            Rectangle()
               .frame(width: 200, height: 100)
               .background(.gray)
            Text("Visit")
               .font(.title)
               .bold()
               .foregroundStyle(.white)
         }
      }
   }
}
#Preview {
   ContentView()
}

输出

Containers

列表

列表是最常用的容器,以单列格式显示数据。它在可滚动的容器中显示数据。它显示数据集合,并支持动态元素生成、选择、修改等。

它还可以添加 UI 元素,如 TextFields、Buttons、Toggle、Slider 等。我们可以借助内置的 List View 创建列表。

示例

以下 SwiftUI 程序创建了一个列表。

import SwiftUI
struct ContentView: View {
   var body: some View {
      Text("Setting").font(.largeTitle)
      List {
         Text("Bluetooth")
         Text("Hotspot")
         Text("Wifi")
      }
   }
}
#Preview {
   ContentView()
}

输出

Containers

表单

表单用于将多个视图排列成具有可滚动界面的相关组。或者我们可以说它是一个包含多个视图的容器,这些视图接受用户的输入。它通常用于提供一个界面,用户可以在其中输入不同字段的数据。

表单视图的主要功能是自动布局、按部分分组和动态外观。我们可以根据需要自定义和设置表单的样式,并可以在其中使用各种 UI 组件,例如 TextField、Slider、toggle 等。

示例

以下 SwiftUI 程序创建了一个表单。

import SwiftUI
struct ContentView: View {
   @State private var name = ""
   @State private var mClass = ""
   @State private var rollNo = 3
   @State private var receiveNewsletter = false
   var body: some View {
      NavigationView {
         Form {
            Section(header: Text("Personal Information")) {
               TextField("Name", text: $name)
               TextField("Class", text: $mClass)
               Stepper("Roll Number: \(rollNo)", value: $rollNo, in: 1...100)
            }            
            Section {
               Button("Submit") {
                  
                  // 提交时的操作
                  print("Form Submitted")
               }
            }
         }.navigationTitle("User Form")
      }
   }
}
#Preview {
   ContentView()
}

输出

Containers

ScrollView

ScrollView 是一种特殊类型的容器,允许用户显示可滚动的内容。它可以垂直或水平滚动,也可以双向滚动。

它通常用于我们想要显示大量不适合给定屏幕的数据(例如文本、图像等)时。默认情况下,它会创建垂直滚动,但我们可以使用水平和垂直值来更改它。

示例

以下 SwiftUI 程序创建了一个 ScrollView。

import SwiftUI
struct ContentView: View {
   var body: some View {
      ScrollView {
         VStack(spacing: 20) {
            ForEach(1...20, id: \.self) { i in
               Text("Branch \(i)")
                  .font(.title)
                  .padding()
                  .frame(maxWidth: .infinity)
                  .background(.mint.opacity(0.2))
                  .cornerRadius(8)
            }
         }.padding()
      }
   }
}
#Preview {
   ContentView()
}

输出

Containers

Group

Group 是一个容器,用于将多个视图存储在一起而不影响其子视图的布局。它不会对其数据应用任何布局。相反,它提供了一种组织视图的方法。它是一种很好的工具,可以保持视图层次结构干净且易于管理,因为它将视图层次结构分成几组。

示例

以下 SwiftUI 程序创建一组文本。

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack {
         Text("SwiftUI").font(.largeTitle)
         
         Group {
            Text("SwiftUI support declarative programming approach")
            Text("It also provide various modifiers.")
            Text("It is easy to use")
         }.font(.headline).foregroundStyle(.red.opacity(5.2))
      }.padding()
   }
}

#Preview {
   ContentView()
}

输出

Containers

GeometryReader

GeometryReader 是一个灵活的容器,它允许我们根据屏幕或父视图的动态尺寸(即动态高度和宽度)创建视图。或者我们可以说它操纵父视图的大小和位置。

当我们想在指定的空间中创建布局时,它很有用。它占用了其父视图的所有可用空间,因此每当它与 Stack 或任何其他容器一起使用时,它都会自行伸展以占据指定的空间。

示例

以下 SwiftUI 程序使用 GeometryReader 创建视图。

import SwiftUI

struct ContentView: View {
   var body: some View {
      GeometryReader { x in
         VStack {
            Text("Width: \(x.size.width)")
            Text("Height: \(x.size.height)")
         }.frame(width: x.size.width, height: x.size.height)
         .background(.pink.opacity(0.2))
      }.frame(height: 200)
   }
}

#Preview {
   ContentView()
}

输出

容器