iOS16升级后 SwiftUI Sheet的高级新特性

使用 SwiftUI 的可变高度 Sheet 提升 UI 交互

简介

SwiftUI Sheet 是一种模态视图，可以从另一个视图中弹出。随着 iOS 16 的推出，Sheet 现在可以具有可变的高度，从而为您的应用程序界面交互带来了新的可能性。本文将探讨如何使用 PresentationDetents 实现高度可变的 Sheet，并提供一些常见的用例和最佳实践。

使用 PresentationDetents 实现可变高度的 Sheet

要创建可变高度的 Sheet，您可以使用 PresentationDetents 属性。此属性允许您指定 Sheet 可以停靠的多个高度。当用户拖动 Sheet 时，它将在这些高度之间切换。

以下代码示例展示了如何实现此功能：

struct ContentView: View {
  @State private var sheetHeight: CGFloat = 200

  var body: some View {
    Button("Show Sheet") {
      sheetHeight = 400
    }
    .sheet(isPresented: $sheetHeight) {
      Text("This is a sheet")
    }
    .presentationDetents([200, 400])
  }
}

在这个示例中，Sheet 的高度可以切换到 200 和 400 像素。当用户拖动 Sheet 时，它将在这些高度之间切换。

可变高度 Sheet 的常见用例

可变高度 Sheet 可以用于各种场景，包括：

• 显示更多内容： Sheet 可以根据需要扩展以显示更多内容，例如产品详细信息或评论。
• 创建沉浸式体验： 可变高度 Sheet 可以帮助创建更具沉浸感的体验，例如显示视频或交互式地图。
• 提高可用性： Sheet 可以用来显示帮助信息或教程，从而提高可用性。

最佳实践

在使用可变高度 Sheet 时，请遵循以下最佳实践：

• 提供清晰的视觉指示： 确保用户清楚地了解 Sheet 的高度可以改变，例如使用阴影或边框。
• 避免过度使用： 避免过度使用可变高度 Sheet。只在真正需要时使用它们。
• 考虑性能影响： 可变高度 Sheet 可能比固定高度 Sheet 更耗费性能，因此请考虑性能影响。

结论

可变高度 Sheet 是 SwiftUI 中的一个强大特性，它可以帮助您创建更灵活、更具响应性和更沉浸式的用户界面。通过遵循这些最佳实践，您可以充分利用可变高度 Sheet 的优势。

常见问题解答

• 如何使用代码动态更改 Sheet 的高度？

您可以使用 onDragGesture() 修改器动态更改 Sheet 的高度。

.onDragGesture() { gesture in
  if gesture.translation.height > 0 {
    sheetHeight = gesture.translation.height
  }
}

• 可以有多个 Sheet 同时处于活动状态吗？

是的，可以有多个 Sheet 同时处于活动状态。

• 如何防止 Sheet 被意外关闭？

您可以使用 ignoresSafeArea() 修改器防止 Sheet 被意外关闭。

• 可变高度 Sheet 是否与 iPadOS 兼容？

是的，可变高度 Sheet 与 iPadOS 兼容。

• 如何让 Sheet 在特定高度展开？

您可以使用 presentationDetents() 属性在特定高度展开 Sheet。