SwiftUI 文本选择和工作表呈现冲突

Question

我正在开发一个 SwiftUI 应用程序，其中包含一个显示艺术品详细信息的视图。该视图包含多个带有

.textSelection(.enabled)

的文本字段，以允许用户选择文本。但是，我面临一个问题：当我处于文本选择模式并点击文本字段外部时，选择应该会消失。相反，点击外部会触发

BottomSheetView

的打开。

当前问题：
每次我点击文本字段外部时，即使我只是尝试退出文本选择模式，

BottomSheetView

都会打开。我希望在点击选择区域外部时，文本选择消失而不触发

BottomSheetView

。

目标：
如何修改行为，以便在文本选择模式下点击文本字段外部只会取消选择而不打开

BottomSheetView

？任何建议或解决方案将不胜感激！此版本澄清了问题和您期望的结果，使其他人更容易理解并提供帮助。

public var body: some View {
        VStack {
            Text(viewModel.names)
                .textSelection(.enabled)
            Text(viewModel.caption)
                .textSelection(.enabled)
            // Other UI components...
        }
        .onTapGesture {
            // This should open the BottomSheetView
            viewModel.captionViewTapped()
        }

• 确保

  onTapGesture

  正确附加到父视图。

• 寻找 SwiftUI 中手势与文本选择冲突相关的解决方案。

Answer 1

我在一个项目中遇到了类似的问题，我需要在 SwiftUI 中处理文本选择和手势识别。问题是，在文本选择模式下点击文本字段外部会触发 BottomSheetView 的打开，即使您只想退出文本选择。

为了解决这个问题，对我来说行之有效的是管理手势优先级并确保在文本字段之外点击不会干扰文本选择。我是这样处理的：

解决方案一：调整手势优先级 我尝试的第一个方法是使用 SimultaneousGesture 来控制 SwiftUI 如何处理冲突手势。通过将文本选择手势优先于打开 BottomSheetView 的点击手势，我们可以防止在文本外部点击时打开工作表。

以下是如何实现此目标的示例：

public var body: some View {
    VStack {
        Text(viewModel.names)
            .textSelection(.enabled)
        Text(viewModel.caption)
            .textSelection(.enabled)
        // Other UI components...
    }
    .simultaneousGesture(TapGesture().onEnded {
        // Tapping outside the text field should do nothing
    })
    .onTapGesture {
        // This should open the BottomSheetView, but only if text selection is not active
        viewModel.captionViewTapped()
    }
}

或

另一种效果很好的方法是创建一个状态变量来跟踪文本选择何时处于活动状态。这样，您可以防止在用户选择文本时打开 BottomSheetView。

以下是如何实现这一点的示例：

@State private var isTextSelectionActive: Bool = false

public var body: some View {
    VStack {
        Text(viewModel.names)
            .textSelection(.enabled)
            .onTapGesture {
                isTextSelectionActive = true
            }
        
        Text(viewModel.caption)
            .textSelection(.enabled)
            .onTapGesture {
                isTextSelectionActive = true
            }
    }
    .onTapGesture {
        if !isTextSelectionActive {
            viewModel.captionViewTapped()
        }
        isTextSelectionActive = false  // Reset the text selection state
    }
}

您可以测试每一个，看看哪一个最适合您。根据我的经验，手动跟踪文本选择状态是最有效的解决方案，尤其是在更复杂的 UI 中。