用SwiftUI构建iOS应用程序。带实例的教程

在本指南中，我们将探索SwiftUI的一些关键功能，然后通过构建一个演示的Swift应用程序来应用这些技能和技巧。

什么是 SwiftUI？

SwiftUI是一个框架，支持使用Swift编程语言为任何苹果平台--iOS、watchOS和macOS--声明用户界面（和构建应用程序）的现代方法。

声明式方法意味着你可以说明你的用户界面应该做什么。SwiftUI让你可以访问视图、控件和布局结构，你可以用它们来声明用户界面。

由苹果公司拥有的SwiftUI是一个跨平台的UI框架，适用于iOS、macOS、tvOS和watchOS。这意味着你只需要学习一种语言（Swift）和框架，就可以在任何苹果平台上部署你的代码。

下面是SwiftUI中的 "Hello World "程序的样子。这个代码样本是由Xcode在你创建一个SwiftUI应用程序时生成的。

import SwiftUI      // using the SwiftUI framework and its functionality.

struct ContentView : View {
    var body : some View {
        Text("Hello, world!")
            .padding()
    }
}

SwiftUI 视图

一个应用程序的用户界面的核心是视图。视图占用户看到的应用程序的部分，如图像、文本、动画、互动元素和图形。

在SwiftUI中，View ，要求你有一个属性。在下面的代码片段中，我们有body ，它返回some View 。

var body : some View 

这也是我们在上面的 "Hello World "示例代码中的内容。

控件

SwiftUI中的控件负责用户与应用程序的互动。这些控件的例子包括点击按钮、文本字段、对用户手势的响应等。

回顾一下，SwiftUI是一个框架，允许你在苹果平台上构建用户界面。同样地，SwiftUI附带的UI控件可以让你为用户创建互动元素。

例如，UIButton 控件使您能够创建一个对用户的点击/互动作出反应的按钮。以下是其语法。

@MainActor class UIButton : UIControl

布局结构

SwiftUI提供了对布局你的应用程序的用户界面的视图的支持。我们可以通过使用堆栈（如HStack,VStack, 和/或ZStack ）和列表来布局这些视图。

在使用SwiftUI布局应用程序的结构时，有一个容器，它就像HTML中的父元素。这个容器持有子元素，我们将其称为堆栈。

让我们来看看布局结构中的这些堆栈。

**HStack**

我们可以使用HStack ，为我们的应用程序布局一个视图，将其子代排列成一条水平线。使用HStack ，视图会一次性显示。

下面是一个使用HStack 来水平布局文本的例子。

import SwiftUI

struct ContentView : View {
    var body: some View {
        HStack {
            Text("Introducing")
                .font(.title)
            Text("A Demo App")
        }
    }
}

HStack演示输出。

**VStack**

VStack （垂直堆叠）是SwiftUI中最常见的布局容器之一。VStack 允许你垂直堆叠视图。

使用VStack ，我们可以布局一个视图，将其子节点排列成一条垂直线。下面是一个使用VStack 来垂直布局文本的例子。

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack {
            Text("Introducing")
                .font(.title)
            Text("A Demo App")
        }
    }
}

VStack演示示例。

**ZStack**

ZStack 使我们能够将子视图叠加在一起，并在x 和y 轴上对齐它们。ZStack 将每个子项的x 和y 轴设置为默认的中心对齐。

ZStack 的语法如下。

@frozen struct ZStack<Content> where Content : View

通过ZStack ，一个子视图被分配了一个比前面的子视图更高的Z轴值。所以后续的子视图会堆叠在前面的子视图之上。

你可以使用ZStack ，在另一个项目上播放一个项目，如文本，如图像或另一个文本块。

在下面的例子中，我们使用ZStack ，将一个汽车的图像放在HStack ，其中包含一些文本。对齐属性被设置为top ，以便为可读性创造空间。否则，图像会与文本重叠。

struct ContentView : View {
    var body: some View {
        ZStack {
            Image(systemName: "car")
                .font(.title)
                .frame(width: 100, height: 100, alignment: .top)
            HStack {
                Text("Introducing")
                    .font(.title)
                Text("A Demo App")
            }

        }
    }
}

ZStack演示示例。

用SwiftUI构建一个应用程序

为了演示上述技术如何平移到一个精简、直观的 Swift 应用程序，我们将使用 SwiftUI 构建一个应用程序，显示你可以用来开发移动应用程序的技术和/或框架的列表。这个演示应用程序的代码将写在ContentView.swift 。

首先，启动Xcode并点击创建一个新的Xcode项目。

接下来，选择App并点击下一步。

在产品名称字段中，输入 "Demoapp "并点击下一步。然后等待Xcode启动启动器项目。

找到ContentView.swift 。如前所述，这就是我们要写Swift代码的文件。

现在清除代码，只留下这个。

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            AppView(title: "SwiftUI", details: "iOS, macOS, and watchOS")
            AppView(title: "Android Studio", details: "Android")
            AppView(title: "React Native", details: "Android and iOS")
            AppView(title: "Flutter", details: "Android, iOS, and the web")
            AppView(title: "Xamarin", details: "Android and iOS")
        }
    }
}

struct AppView: View {
    var title: String
    var details: String
    var body: some View {
        HStack {
            Image(systemName: "iphone")
                .resizable()
                .frame(width: 40, height: 50)
                .foregroundColor(.black)
            VStack(alignment: .leading){
                Text(title)
                    .font(.title)
                Text(details)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

在Xcode的导航面板上，选择一个iPhone模拟器，并通过点击播放符号来运行该程序。

演示程序显示技术和平台的列表。

总结

在本教程中，我们向你介绍了SwiftUI，苹果公司的UI框架，用于在其各种平台上构建。我们还放大了SwiftUI的核心和基本概念，包括布局结构和使用该框架构建简单应用程序的一般最佳做法。

要了解更多关于SwiftUI的信息，请看官方文档。

The postBuilding iOS apps with SwiftUI:有例子的教程》首先出现在LogRocket博客上。