SwiftUI 滑动操作：如何优雅地展示图像和文本

2024-03-07 14:30:08

在 SwiftUI 的开发中，滑动操作是一种常见的用户交互方式。然而，仅使用图像来表示操作意图有时可能会导致用户的误解。例如，一个垃圾桶图标可能被用户理解为删除、归档或移动。为了避免这种歧义，将图像和文本结合起来展示，可以显著提升用户体验。

图像与文本的完美融合

SwiftUI 提供了多种工具来实现图像和文本的共存。其中，VStack 容器可以将图像和文本垂直排列，Label 类型可以将文本与图像关联起来，而 icon 参数则为 Label 指定相应的图像。

1. VStack 容器：布局的基石

首先，我们需要一个 VStack 容器来容纳图像和文本。VStack 会将它们按照垂直方向依次排列，并允许我们通过 spacing 参数来调整它们之间的间距。

2. Label 类型：连接图像和文本的桥梁

接下来，我们将 VStack 嵌入到 Label 类型中。Label 的作用是将图像和文本作为一个整体来呈现，并确保它们的对齐关系。我们将操作的文本作为 Label 的文本内容。

3. icon 参数：为 Label 增添视觉元素

最后，我们通过 Label 的 icon 参数来指定要显示的图像。我们可以使用系统提供的 SF Symbols，也可以使用自定义的图像。

代码示例：实践出真知

让我们来看一个具体的例子：

struct ContentView: View {
    var body: some View {
        List {
            Section {
                HStack {
                    Text("Hello World").font(.body)
                    Spacer()

                    // 分隔线
                    Divider().frame(width: 3.0)
                        .overlay(Color.blue).padding(.trailing, -50.0).padding([.top, .bottom], -1.5)
                }
                .padding([.top, .bottom], 1.5)
                .swipeActions(allowsFullSwipe: false) {
                    // 删除按钮
                    Button(role: .destructive) {
                        print("Deleting row")
                    } label: {
                        VStack(spacing: 2.0) {
                            Label("Delete", systemImage: "trash")
                            Text("Delete").font(.caption2)
                        }
                    }
                    // 添加更多按钮...
                }
            }
        }
    }
}

在这段代码中，我们创建了一个 List，并在其中添加了一个带有滑动操作的 HStack。滑动操作中包含一个删除按钮，按钮的标签由一个 VStack 构成，VStack 中包含一个 Label 和一个 Text 视图。Label 显示了一个垃圾桶图标和 "Delete" 文本，Text 视图则显示了一个更小的 "Delete" 文本作为补充说明。