用 SwiftUI 构建你的第一个应用程序：引入自定义数据和图像

2024-02-23 08:55:07

自定义 SwiftUI 数据和图像：提升你的应用程序

简介

在 SwiftUI 的世界里，构建令人惊叹的移动应用程序变得比以往任何时候都更加容易。在上一篇教程中，我们探究了 SwiftUI 的基础知识，包括如何使用 Text、Image 和 Button 等基本组件。现在，让我们踏上激动人心的旅程，学习如何将自定义数据和图像集成到我们的应用程序中，从而解锁更强大的应用程序功能。

引入自定义数据

我们的第一个任务是引入自定义数据。想象一个包含水果名称和价格的数组。这个数组将成为我们应用程序数据的基础。

struct Fruit: Identifiable {
    let id = UUID()
    let name: String
    let price: Double
}

let fruits = [
    Fruit(name: "Apple", price: 1.99),
    Fruit(name: "Orange", price: 2.49),
    Fruit(name: "Banana", price: 1.49),
    Fruit(name: "Strawberry", price: 3.99),
    Fruit(name: "Blueberry", price: 4.99)
]

显示自定义数据

下一步是将我们的自定义数据显示在应用程序中。为此，我们将使用 List 和 ForEach 组件创建水果列表。

struct ContentView: View {
    var body: some View {
        List(fruits) { fruit in
            HStack {
                Text(fruit.name)
                Spacer()
                Text("$\(fruit.price, specifier: "%.2f")")
            }
        }
    }
}

引入自定义图像

除了文本数据，我们还可以将自定义图像引入我们的应用程序。想象一个包含水果图像的文件夹。

Images/
    apple.jpg
    orange.jpg
    banana.jpg
    strawberry.jpg
    blueberry.jpg

显示自定义图像

现在，让我们将这些图像显示在我们的应用程序中。我们将使用 Image 组件，并使用 fruit.name 作为图像名称。

struct ContentView: View {
    var body: some View {
        List(fruits) { fruit in
            HStack {
                Image(fruit.name)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 50, height: 50)
                Text(fruit.name)
                Spacer()
                Text("$\(fruit.price, specifier: "%.2f")")
            }
        }
    }
}