SwiftUI の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +ios+SwiftUI へ行く。
• +ios+SwiftUI の差分を削除

#author("2025-03-16T22:59:08+08:00","default:Admin","Admin")
#author("2025-03-16T23:11:31+08:00","default:Admin","Admin")
[[iPhone]]

#contents

* SwiftUI基础 [#jc9f447d]
** SwiftUI的视图结构和声明式语法 [#pae42e69]
*** 视图结构 [#odfd92b6]

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

- View：所有的UI组件都是视图（View）。视图可以是简单的文本、图像，也可以是更复杂的组合视图。
- Container Views：这些视图用于组合其他视图，常见的容器视图包括：
-- VStack：垂直堆栈，将子视图垂直排列。
-- HStack：水平堆栈，将子视图水平排列。
-- ZStack：层叠视图，将子视图层叠在一起。
-- List：列表视图，显示动态内容列表。
- Control Views：用于用户交互的视图，如
-- 按钮（Button）
-- 滑块（Slider）
-- 文本输入框（TextField）等
- Modifier：修饰符可以应用于视图，以更改其外观或行为。例如，.foregroundColor(.blue)可以设置文本颜色为蓝色。

*** 声明式语法 [#p6ef7a94]

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

- 简单和直观：您只需描述UI应该显示什么样子，而不是告诉计算机如何绘制它。
- 无需手动更新：当视图的状态（state）发生变化时，SwiftUI会自动更新视图的显示，而不需要手动管理UI的刷新。
- 数据驱动：视图通常会绑定到某些数据，当数据变化时，视图会相应地更新。这通过属性绑定（@State、@Binding）、状态对象（@StateObject、@ObservedObject）来实现。
- 组合性：可以将小的视图组合成更大的视图，形成复杂的UI结构。这种组合性使得UI的构建更加灵活和模块化。
- 预览功能：Xcode的实时预览功能允许开发者在编写代码时即时看到UI的外观，这大大提高了开发效率。

#codeprettify{{
import SwiftUI
 
struct 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()
    }
}
}}

** 布局和视图组合 [#je1627c9]

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

*** 布局视图 [#gfa97de0]

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

VStack：垂直堆栈视图，将子视图垂直排列。

#codeprettify{{
VStack {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
}}

HStack：水平堆栈视图，将子视图水平排列。
#codeprettify{{
HStack {
    Text("Left")
    Spacer()
    Text("Right")
}
}}

ZStack：层叠视图，将子视图层叠在一起。
#codeprettify{{
ZStack {
    Circle()
        .foregroundColor(.blue)
        .frame(width: 100, height: 100)
    
    Text("Centered Text")
        .foregroundColor(.white)
}
}}

List：列表视图，用于显示动态内容列表。
#codeprettify{{
List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
}}
Form：表单视图，用于显示表单和输入控件。
#codeprettify{{
Form {
    TextField("Username", text: $username)
    SecureField("Password", text: $password)
    Button("Login") {
        // Login action
    }
}
}}

*** 视图组合 [#g991795c]
视图组合是指将多个视图组合在一起形成复杂的UI结构，可以通过嵌套不同的布局视图和控件视图来实现。例如下面的例子：

- 使用 VStack 将视图垂直堆叠。
- 在 VStack 中使用 HStack 将图标和标题水平排列。
- 使用 Spacer() 在垂直堆栈中创建一个可伸缩的空间。
- 在底部添加一个带有动作的按钮，并对其进行内边距修饰。
#codeprettify{{
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()
}}

* 基本组件 [#w7b1fab6]

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

#codeprettify{{
struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI， \(username)!") //使用字符串插值或者变量来显示动态文本内容。
           .font(.title)           //字体
           .foregroundColor(.blue) //字体颜色
           .multilineTextAlignment(.center) //对齐方式
           .bold()    //加粗
           .italic()  //斜体
           .lineLimit(nil)                    //如果文本内容较长或者需要显示多行文本，您可以使用 Text 的 lineLimit(nil) 和 multilineTextAlignment() 来设置文本的行数限制和对齐方式。
           .multilineTextAlignment(.leading)  //左对齐：leading 居中： center 右对齐：trailing
           .border(Color.gray)   //修饰符，用于在视图的边缘绘制一个边框。
    }
}
}}

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

#codeprettify{{
struct ContentView: View {
    var body: some View {
        Image("yourImageName")
            .resizable() // 可调整大小
            .scaledToFit() // 按原始宽高比缩放适合父视图
            .frame(width: 200, height: 200) // 设置框架大小
            .clipShape(Circle()) // 添加圆形遮罩
            .overlay(Circle().stroke(Color.blue, lineWidth: 4)) // 添加蓝色边框
            .shadow(radius: 10) // 添加阴影效果
    }
}
}}

*** 加载网络图像 [#c4b3367e]

#codeprettify{{
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")
    }
}
}}

** 按钮（Button） [#v11420c6]

Button 是用来创建用户可以点击的交互性控件。它允许您在应用程序中添加按钮，以触发各种操作和响应用户的输入。让我们来详细了解 Button 的用法和一些常见的设置。
#codeprettify{{
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)
        }
    }
}
}}

*** 自定义按钮样式 [#hfefaf99]

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

*** 动态按钮 [#k69c86b8]
可以根据视图状态来动态更改按钮的标签或样式。
#codeprettify{{
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)
        }
    }
}
}}

***按钮响应和动作 [#ab546cbd]

每个按钮都需要一个操作（action），当用户点击按钮时，这个操作会被触发。操作通常是一个闭包，用于定义按钮点击后的行为。
#codeprettify{{
Button(action: {
    print("Button tapped!")
}) {
    Text("Tap me!")
}
}}

* 列表和导航 [#e82a02bd]
** 列表视图（List） [#o42989bd]
List 是一个用于显示可滚动的内容列表的视图组件。List 适用于展示动态和静态数据，它支持多种自定义选项和交互功能。下面是对 List 视图的详细介绍，包括基本用法、动态数据展示和自定义样式。
#codeprettify{{
struct ContentView: View {
    var body: some View {
        List { // 显示了三个列表项
            Text("Item 1")
            Text("Item 2")
            Text("Item 3")
        }
    }
}
}}

**动态数据 [#ta7c5cb7]

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

基本动态数据
#codeprettify{{
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)
        }
    }
}
}}

** 使用自定义数据模型 [#c75cbee4]

#codeprettify{{
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()
        }
    }
}
}}

** 自定义列表项 [#s273e3f4]

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

#codeprettify{{
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()
        }
    }
}
}}

** 列表的交互 [#e85b4052]

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

删除列表项
#codeprettify{{
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)
    }
}
}}

** 移动列表项 [#h1b057ab]

#codeprettify{{
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)
    }
}
}}

* 导航视图（NavigationView） [#seda5f23]

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

#codeprettify{{
//基本用法
struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Welcome to SwiftUI")
                .navigationTitle("Home")
        }
    }
}

//基本导航链接
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")
    }
}
}}

** 通过导航链接传递数据到目标视图。 [#f2e069d9]

#codeprettify{{
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)
    }
}
}}

** 调整导航栏的样式，例如背景颜色、透明度等。 [#j6a7f50b]
#codeprettify{{
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)
        }
    }
}
}}

#hr();
Comment：
#comment_kcaptcha