当前位置:首页 » 《随便一记》 » 正文

SwiftUI入门篇

8 人参与  2024年10月16日 08:01  分类 : 《随便一记》  评论

点击全文阅读


1. 介绍

SwiftUI是由苹果公司推出的现代化用户界面(UI)框架,用于开发iOS、macOS、watchOS和tvOS应用程序。它于2019年首次发布,是苹果在Swift编程语言之上的一层抽象,旨在简化和改进应用程序的UI开发过程。相比UIKit具有多方面的优势和特点,这些特点使得它成为iOS和其他Apple平台开发中的强大工具:

        声明式语法

SwiftUI:开发者通过简单的Swift代码描述UI的结构和外观,采用声明式语法。这种方式比传统的UIKit的命令式编程风格更直观和易于理解。 UIKit:开发者需要编写大量的代码来配置和管理UI元素的属性和行为,这种方式容易导致代码的复杂性和难以维护性。

        实时预览和交互性

SwiftUI:结合Xcode的实时预览功能,开发者可以即时查看和交互他们所写的UI代码,无需在模拟器或真机上运行应用程序。 UIKit:开发者需要不断地在模拟器或真机上运行应用程序来查看UI效果,这增加了开发周期和调试的复杂性。

​​​​​​​​​​​​​​​​​​​​​        ​​​​​​​​​​​​​​跨平台开发

SwiftUI:支持iOS、macOS、watchOS和tvOS平台的开发,可以共享大部分代码和UI逻辑,减少了重复工作。UIKit:虽然UIKit也能够跨平台开发,但是每个平台之间的UI代码和布局通常需要显著的适配和调整。

        自动化布局

SwiftUI:提供了一系列简单且强大的布局视图(如VStack、HStack、ZStack等),帮助开发者轻松地实现复杂的UI布局。 UIKit:虽然Auto Layout提供了强大的布局管理系统,但是配置和管理约束条件需要编写大量的代码,对于复杂布局来说较为繁琐。

        状态管理和数据绑定

SwiftUI:引入了属性绑定(@State、@Binding)和状态对象(@StateObject、@ObservedObject),使得数据与UI视图之间的绑定更加简单和直观。 UIKit:开发者需要手动管理数据和UI视图之间的同步,通常需要使用委托、通知或KVO等模式。

        现代化设计支持

SwiftUI:内置支持现代化设计语言,如暗黑模式、动态字体调整等,能够自动响应系统级别的外观变化。 UIKit:虽然也能够支持现代化设计语言,但是需要开发者显式地处理外观变化和主题切换。

综上所述,SwiftUI通过其声明式语法、实时预览、跨平台开发支持以及更简单的布局和状态管理等特点,显著提升了iOS开发的效率和开发体验,使得开发者能够更快速地构建出现代化和响应式的应用程序。

2. 环境搭建

        2.1 Xcode安装和配置

从Mac AppStore或者苹果开发者网站 Sign In - Apple 下载并安装Xcode,可以依据需要,安装iPhone/iPad/Apple VisionPro模拟器,支持模拟器/真机调试。

2.2 创建第一个SwiftUI项目

打开Xcode,创建新项目,配置项目信息:

名称(e.g:“MyFirstSwiftUIApp”) 组织标识符(e.g:“com.yourcompany”) 选择开发团队 选择开发语言(Swift或Objective-C)和界面(Storyboard或SwiftUI)

即可创建并预览项目,运行第一个SwiftUI项目。

3. SwiftUI基础

3.1 SwiftUI的视图结构和声明式语法

3.1.1 视图结构

SwiftUI的视图结构是基于一种嵌套和组合的方式来构建UI界面的,核心的视图类型包括:

        View:所有的UI组件都是视图(View)。视图可以是简单的文本、图像,也可以是更复杂的组合视图。

        Container Views:这些视图用于组合其他视图,常见的容器视图包括:

VStack:垂直堆栈,将子视图垂直排列。 HStack:水平堆栈,将子视图水平排列。 ZStack:层叠视图,将子视图层叠在一起。 List:列表视图,显示动态内容列表。

        Control Views:用于用户交互的视图,如按钮(Button)、滑块(Slider)、文本输入框(TextField)等。

        Modifier:修饰符可以应用于视图,以更改其外观或行为。例如,.foregroundColor(.blue)可以设置文本颜色为蓝色。

3.1.2 声明式语法

SwiftUI使用声明式语法来描述UI的外观和行为,与传统的命令式编程风格有显著不同。声明式语法的关键点包括:

        简单和直观:您只需描述UI应该显示什么样子,而不是告诉计算机如何绘制它。

        无需手动更新:当视图的状态(state)发生变化时,SwiftUI会自动更新视图的显示,而不需要手动管理UI的刷新。

        数据驱动:视图通常会绑定到某些数据,当数据变化时,视图会相应地更新。这通过属性绑定(@State、@Binding)、状态对象(@StateObject、@ObservedObject)来实现。

        组合性:可以将小的视图组合成更大的视图,形成复杂的UI结构。这种组合性使得UI的构建更加灵活和模块化。

        预览功能:Xcode的实时预览功能允许开发者在编写代码时即时看到UI的外观,这大大提高了开发效率。

3.1.3 示例代码

下面是一个简单的SwiftUI代码示例,展示了视图结构和声明式语法的应用:

import SwiftUIstruct ContentView: View {    @State private var isButtonVisible = true  // 属性包装器用于管理视图状态        var body: some View {        VStack { // 垂直堆栈视图 (VStack)            Text("Hello, SwiftUI!") // 简单文本视图                        if isButtonVisible {                Button("Toggle Button") {                    self.isButtonVisible.toggle()                }            }        }        .padding() // 修饰符,添加内边距    }}// 实时预览struct ContentView_Previews: PreviewProvider {    static var previews: some View {        ContentView()    }}

3.2 布局和视图组合

在SwiftUI中,布局和视图组合是构建用户界面的关键部分。SwiftUI提供了一系列容器视图和布局视图,使得开发者能够以简单和直观的方式创建复杂的布局和组合视图。

3.2.1 布局视图

SwiftUI中的布局视图是用来排列和组织其他视图的容器,常用的布局视图包括:

VStack:垂直堆栈视图,将子视图垂直排列。
VStack {    Text("Item 1")    Text("Item 2")    Text("Item 3")}
HStack:水平堆栈视图,将子视图水平排列。
HStack {    Text("Left")    Spacer()    Text("Right")}
ZStack:层叠视图,将子视图层叠在一起。
ZStack {    Circle()        .foregroundColor(.blue)        .frame(width: 100, height: 100)        Text("Centered Text")        .foregroundColor(.white)}
List:列表视图,用于显示动态内容列表。
List {    Text("Item 1")    Text("Item 2")    Text("Item 3")}
Form:表单视图,用于显示表单和输入控件。
Form {    TextField("Username", text: $username)    SecureField("Password", text: $password)    Button("Login") {        // Login action    }}

3.2.2 视图组合

视图组合是指将多个视图组合在一起形成复杂的UI结构,可以通过嵌套不同的布局视图和控件视图来实现。例如:​​​​​​​

VStack {    Text("Welcome to SwiftUI!")        .font(.largeTitle)        HStack {        Image(systemName: "star.fill")            .foregroundColor(.yellow)        Text("SwiftUI Basics")            .font(.title)    }        Spacer()        Button("Get Started") {        // Action to start the app    }    .padding()}.padding()

在这个例子中:

使用 VStack 将视图垂直堆叠。 在 VStack 中使用 HStack 将图标和标题水平排列。 使用 Spacer() 在垂直堆栈中创建一个可伸缩的空间。 在底部添加一个带有动作的按钮,并对其进行内边距修饰。

4. 基本组件

4.1 文本(Text)

Text 是用来显示文本内容的视图组件。它允许您在应用程序中轻松地显示静态和动态文本,同时支持对文本进行样式和布局设置。让我们来详细了解 Text 的用法和一些常见的样式设置。

4.1.1 基本用法

使用 Text 最简单的方式是传入一个字符串作为其内容:

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

4.1.2 样式设置

通过在 Text 上使用修饰符来设置文本的样式,比如字体、颜色、对齐方式等。

字体和颜色
Text("Welcome")    .font(.title)    .foregroundColor(.blue)
对齐方式
Text("Centered Text")    .multilineTextAlignment(.center)
加粗和斜体
Text("Bold and Italic")    .bold()    .italic()

4.1.3 动态文本

在 Text 中使用字符串插值或者变量来显示动态文本内容。例如:

struct ContentView: View {    let username = "John Doe"        var body: some View {        Text("Welcome, \(username)!")            .font(.headline)            .foregroundColor(.green)    }}

4.1.4 多行文本

如果文本内容较长或者需要显示多行文本,您可以使用 Text 的 lineLimit(nil) 和 multilineTextAlignment() 来设置文本的行数限制和对齐方式。

Text("This is a long text that may span multiple lines depending on the available space.")    .lineLimit(nil)    .multilineTextAlignment(.leading)

4.2 图像(Image)

Image 是用来显示图像内容的视图组件。它允许您在应用程序中加载和显示图像,并支持对图像进行大小调整、裁剪和其他样式设置。让我们来详细了解 Image 的用法和一些常见的样式设置。

4.2.1 基本用法

使用 Image 最简单的方式是指定图像的名称,SwiftUI会自动查找和加载相应的图像资源。通常,您需要将图像资源添加到项目的 Assets.xcassets 中。

struct ContentView: View {    var body: some View {        Image("yourImageName")    }}

4.2.2 图像样式和调整

图像调整

可以使用修饰符来调整图像的大小、比例和裁剪。

Image("yourImageName")    .resizable() // 可调整大小    .scaledToFit() // 按原始宽高比缩放适合父视图    .frame(width: 200, height: 200) // 设置框架大小
图像修饰

可以对图像进行进一步的修饰,例如添加圆角、边框或者使用遮罩。

Image("yourImageName")    .resizable()    .clipShape(Circle()) // 添加圆形遮罩    .overlay(Circle().stroke(Color.blue, lineWidth: 4)) // 添加蓝色边框    .shadow(radius: 10) // 添加阴影效果

4.2.3 加载网络图像

要加载来自URL的图像,可以使用 URLImage 库或者自定义 View。以下是一个简单的示例,演示如何加载网络图像:

struct RemoteImage: View {    var imageUrl: String        var body: some View {        if let url = URL(string: imageUrl), let imageData = try? Data(contentsOf: url) {            Image(uiImage: UIImage(data: imageData)!)                .resizable()                .scaledToFit()                .frame(width: 200, height: 200)        } else {            Text("Image not found")        }    }}struct ContentView: View {    var body: some View {        RemoteImage(imageUrl: "https://example.com/yourImage.jpg")    }}

4.3 按钮(Button)

Button 是用来创建用户可以点击的交互性控件。它允许您在应用程序中添加按钮,以触发各种操作和响应用户的输入。让我们来详细了解 Button 的用法和一些常见的设置。

4.3.1 基本用法

使用 Button 最简单的方式是在其构造函数中传入一个视图(通常是 Text 或者 Image),作为按钮的标签。

struct ContentView: View {    var body: some View {        Button(action: {            // 点击按钮后的操作            print("Button tapped!")        }) {            Text("Tap me!")                .font(.title)                .foregroundColor(.white)                .padding()                .background(Color.blue)                .cornerRadius(10)        }    }}

4.3.2 按钮样式和修饰

自定义按钮样式

可以通过添加不同的修饰符来自定义按钮的外观和行为。

Button(action: {    // 点击按钮后的操作}) {    HStack {        Image(systemName: "person.fill")        Text("Login")            .fontWeight(.semibold)    }    .padding()    .foregroundColor(.white)    .background(Color.green)    .cornerRadius(8)    .shadow(radius: 5)}
动态按钮

可以根据视图状态来动态更改按钮的标签或样式。

struct ContentView: View {    @State private var isLogged = false        var body: some View {        Button(action: {            self.isLogged.toggle()        }) {            Text(isLogged ? "Logout" : "Login")                .fontWeight(.semibold)                .padding()                .foregroundColor(.white)                .background(isLogged ? Color.red : Color.blue)                .cornerRadius(8)        }    }}

4.3.3 按钮响应和动作

每个按钮都需要一个操作(action),当用户点击按钮时,这个操作会被触发。操作通常是一个闭包,用于定义按钮点击后的行为。

Button(action: {    print("Button tapped!")}) {    Text("Tap me!")}

​​​​​​​5. 列表和导航

5.1 列表视图(List)

List 是一个用于显示可滚动的内容列表的视图组件。List 适用于展示动态和静态数据,它支持多种自定义选项和交互功能。下面是对 List 视图的详细介绍,包括基本用法、动态数据展示和自定义样式。

5.1.1 基本用法

要创建一个简单的列表视图,您只需将视图内容传递给 List。可以用静态内容或动态数据来填充列表项。

静态内容
struct ContentView: View {    var body: some View {        List { // 显示了三个列表项            Text("Item 1")            Text("Item 2")            Text("Item 3")        }    }}

​​​​​​​

5.1.2 动态数据

通常情况下,List 用于展示动态数据,您可以将数据绑定到 List 中,从而实现数据驱动的UI更新。

基本动态数据
struct ContentView: View {    let items = ["Item 1", "Item 2", "Item 3", "Item 4"]        var body: some View {        List(items, id: \.self) { item in            Text(item)        }    }}
使用自定义数据模型
struct Item: Identifiable {    var id = UUID()    var name: String    var detail: String}struct ContentView: View {    let items = [        Item(name: "Item 1", detail: "Detail 1"),        Item(name: "Item 2", detail: "Detail 2"),        Item(name: "Item 3", detail: "Detail 3")    ]        var body: some View {        List(items) { item in            VStack(alignment: .leading) {                Text(item.name)                    .font(.headline)                Text(item.detail)                    .font(.subheadline)            }            .padding()        }    }}

如果您的数据模型更加复杂,可以创建一个自定义的结构体并使用它。

​​​​​​​

5.1.3 自定义列表项

可以自定义每个列表项的视图,添加更多的视图元素和样式。

struct Item: Identifiable {    var id = UUID()    var name: String    var detail: String}struct ContentView: View {    let items = [        Item(name: "Item 1", detail: "Detail 1"),        Item(name: "Item 2", detail: "Detail 2"),        Item(name: "Item 3", detail: "Detail 3")    ]        var body: some View {        List(items) { item in            VStack(alignment: .leading) {                Text(item.name)                    .font(.headline)                Text(item.detail)                    .font(.subheadline)            }            .padding()        }    }}

5.1.4 列表的交互

List 支持多种交互功能,如行的删除、移动等。

删除列表项
struct ContentView: View {    @State private var items = ["Item 1", "Item 2", "Item 3"]        var body: some View {        List {            ForEach(items, id: \.self) { item in                Text(item)            }            .onDelete(perform: delete) // 修饰符允许用户从列表中删除项目        }    }        func delete(at offsets: IndexSet) {        items.remove(atOffsets: offsets)    }}
移动列表项
struct ContentView: View {    @State private var items = ["Item 1", "Item 2", "Item 3"]        var body: some View {        List {            ForEach(items, id: \.self) { item in                Text(item)            }            .onMove(perform: move) // 修饰符允许用户移动列表中的项目        }        .navigationBarItems(trailing: EditButton()) // 进入编辑模式的按钮    }        func move(from source: IndexSet, to destination: Int) {        items.move(fromOffsets: source, toOffset: destination)    }}

5.2 导航视图(NavigationView)

NavigationView 是用于在应用程序中创建导航层次结构的视图容器。它允许用户通过导航链接(NavigationLink)在不同的视图之间切换,并提供了导航栏的功能,如标题、按钮和其他交互元素。下面是对 NavigationView 的详细介绍,包括基本用法、导航链接、以及自定义导航栏。

5.2.1 基本用法

NavigationView 包裹在其他视图的外层,提供导航和管理导航层次结构的功能。

struct ContentView: View {    var body: some View {        NavigationView {            Text("Welcome to SwiftUI")                .navigationTitle("Home")        }    }}

5.2.2 导航链接

NavigationLink 用于在视图之间创建导航链接。当用户点击链接时,会推送目标视图到导航堆栈中。

基本导航链接
struct ContentView: View {    var body: some View {        NavigationView {            VStack {                NavigationLink(destination: DetailView()) { //创建了一个可以点击的区域,点击时会导航到 DetailView                    Text("Go to Detail View")                }                .padding()            }            .navigationTitle("Home")        }    }}struct DetailView: View { //显示了一个简单的文本,并设置了导航栏标题为 "Detail"    var body: some View {        Text("This is the detail view")            .navigationTitle("Detail")    }}
导航链接与数据

还可以通过导航链接传递数据到目标视图。

​​​​​​​

struct ContentView: View {    let items = ["Item 1", "Item 2", "Item 3"]        var body: some View {        NavigationView {            List(items, id: \.self) { item in                NavigationLink(destination: DetailView(item: item)) {                    Text(item)                }            }            .navigationTitle("Items")        }    }}struct DetailView: View {// 接受一个 item 参数,通过 NavigationLink 将选中的项传递到目标视图。    let item: String        var body: some View {        Text("Detail for \(item)")            .navigationTitle(item)    }}

5.2.3 自定义导航栏

NavigationView 提供了一些方法来定制导航栏的外观和行为,例如添加按钮或修改标题。

添加导航栏按钮
struct ContentView: View {    var body: some View {        NavigationView {            VStack {                Text("Welcome to SwiftUI")            }            .navigationTitle("Home")            .navigationBarItems(trailing: Button(action: {                // 右侧按钮的动作                print("Edit tapped")            }) {                Image(systemName: "pencil")            })        }    }}
使用自定义视图作为导航栏标题

可以使用自定义视图作为导航栏标题,以实现更多样的设计。

struct ContentView: View {    var body: some View {        NavigationView {            VStack {                Text("Welcome to SwiftUI")            }            .navigationTitle("Home")            .navigationBarTitleDisplayMode(.inline)            .navigationBarItems(leading: HStack {                Image(systemName: "star.fill")                Text("Favorites")            })        }    }}

5.2.4 导航栏样式

可以调整导航栏的样式,例如背景颜色、透明度等。

​​​​​​​

struct ContentView: View {    init() {        UINavigationBar.appearance().backgroundColor = UIColor.systemTeal        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]    }        var body: some View {        NavigationView {            VStack {                Text("Welcome to SwiftUI")            }            .navigationTitle("Home")            .navigationBarTitleDisplayMode(.large)        }    }}


点击全文阅读


本文链接:http://zhangshiyu.com/post/172387.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1