SwiftUI 实战：构建一个掘金 App 克隆（四）

前言

欢迎来到 SwiftUI 实战系列教程的第四部分，本节我们将重点完成掘金 App 克隆的剩余 UI 绘制。在之前的文章中，我们已经实现了图片选择器组件。现在，我们将深入探讨剩余的 UI 元素，包括：

• 右下角的按钮
• NavigationView 和 NavigationLink
• 自适应视图
• 列表视图

右下角的按钮

首先，让我们在屏幕右下角绘制一个按钮。此按钮将用于触发某些操作，例如创建新帖子或打开个人资料页面。

struct RightCornerButton: View {
    var body: some View {
        Button(action: {}) {
            Image(systemName: "plus")
                .foregroundColor(.white)
                .padding()
                .background(Color.blue)
                .cornerRadius(10)
        }
        .frame(width: 50, height: 50)
        .position(x: UIScreen.main.bounds.width - 20, y: UIScreen.main.bounds.height - 20)
    }
}

此代码定义了一个自定义 View，名为 RightCornerButton。它包含一个使用 Button 视图创建的按钮，当按下时会触发一个空操作。按钮显示一个带有白色填充的“加号”系统图像，并具有蓝色的圆角背景。按钮被放置在屏幕的右下角，并根据设备屏幕大小动态调整其位置。

NavigationView 和 NavigationLink

接下来，我们将使用 NavigationView 和 NavigationLink 来创建可导航的界面。这将允许用户在不同的视图之间移动，例如文章列表和文章详情页面。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: ArticleDetailView()) {
                    Text("掘金")
                }
            }
            .navigationBarTitle("首页")
        }
    }
}

此代码定义了 ContentView，它是一个 NavigationView，包含一个 List 视图。List 中包含一个 NavigationLink，当用户点击它时，它将导航到 ArticleDetailView。导航栏的标题设置为“首页”。

自适应视图

要创建自适应视图，我们使用 @Environment 属性包装器来获取当前设备的几何信息。这使我们能够根据设备屏幕大小动态调整视图。

struct AdaptiveView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    
    var body: some View {
        if horizontalSizeClass == .compact {
            // 紧凑型视图
        } else {
            // 常规视图
        }
    }
}

此代码定义了一个名为 AdaptiveView 的自定义 View。它使用 @Environment(\.horizontalSizeClass) 属性包装器来获取设备的水平尺寸类别，该类别可以是 .compact（紧凑型）或 .regular（常规）。根据设备的尺寸类别，View 可以显示不同的内容。

列表视图

最后，我们将使用 List 视图来显示文章列表。List 视图允许我们创建可滚动的列表，其中包含可点击的项目。

struct ArticleListView: View {
    var body: some View {
        List {
            ForEach(articles) { article in
                ArticleRowView(article: article)
            }
        }
    }
}

此代码定义了一个名为 ArticleListView 的自定义 View。它包含一个 List 视图，其中包含一个 ForEach 循环，该循环遍历 articles 数组中的每个文章。每个文章都显示在一个自定义的 ArticleRowView 中，该视图提供有关文章的详细信息。

结论

通过本系列教程的第四部分，我们已经成功实现了掘金 App 克隆的剩余 UI 绘制。我们学习了如何创建右下角的按钮、使用 NavigationView 和 NavigationLink 进行导航、创建自适应视图以及使用 List 视图显示列表。在下一部分中，我们将探讨如何使用 SwiftUI 的网络功能从后端获取数据并动态更新 UI。