SwiftUI极简教程37：打造App Store应用市场推荐页面（下）

2024-02-21 14:30:15

打造完善的推荐页面：进阶指南

在上一章中，我们构建了推荐页面的基础。现在，让我们进一步完善它，使其更具功能性和视觉吸引力。

定义数据模型

首先，我们需要定义一个新的数据类型来表示“你可能也喜欢”部分中的应用程序。该数据类型应包含应用程序的名称、图标、评分和简短。

struct App: Identifiable {
    let id = UUID()
    let name: String
    let icon: String
    let rating: Double
    let description: String
}

创建应用程序列表

接下来，创建一个包含应用程序列表的数组。此数组将用于填充“你可能也喜欢”部分。

let apps = [
    App(name: "Todoist", icon: "todoist", rating: 4.8, description: "A simple and easy-to-use todo list app."),
    App(name: "Evernote", icon: "evernote", rating: 4.7, description: "A powerful note-taking app with a variety of features."),
    App(name: "Forest", icon: "forest", rating: 4.6, description: "An app that helps you stay focused by planting a tree every time you work for a certain amount of time.")
]

构建用户界面

现在，让我们创建“你可能也喜欢”部分的用户界面。我们将使用一个HScrollView和一个LazyVGrid来创建应用程序列表。

struct AppsView: View {
    let apps: [App]

    var body: some View {
        HScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 100, maximum: 150))]) {
                ForEach(apps) { app in
                    AppView(app: app)
                }
            }
        }
    }
}

将应用程序列表添加到推荐页面

最后，将AppsView添加到ContentView中。

struct ContentView: View {
    var body: some View {
        VStack {
            FeaturedAppsView()
            AppsView(apps: apps)
        }
    }
}

运行应用程序

现在，运行应用程序，你应该会看到一个完整的“推荐”页面，其中包含应用程序列表。

总结

我们已经成功地完成了推荐页面的构建。我们定义了一个新的数据类型来表示应用程序，创建了一个包含应用程序列表的数组，并使用HScrollView和LazyVGrid创建了应用程序列表。现在，你拥有了一个功能齐全的App Store推荐页面，可以根据自己的需要进行自定义和扩展。

常见问题解答