Stack内的SwiftUI TextField锁定无法访问

Posted 2023-02-24

【中文标题】Stack内的SwiftUI TextField锁定无法访问

【英文标题】：SwiftUI TextField inside Stack locking up inaccessible

【发布时间】：2021-02-24 20:07:16

【问题描述】：

在对堆栈中的文本字段“锁定”或无法访问的原因进行相当长的故障排除（并将整个视图剥离到测试文件中）后，我发现这是堆栈的一些修饰符存在。 在这种情况下，这是因为 .Shadow

可以理解，一些修饰符适用于修改后的视图中的每个视图。但这应该很酷。

因此我知道是什么，但有人知道为什么？

@State private var tempName: String = ""
@State private var tempSurname: String = ""
@State private var tempPhone: String = ""

var body: some View 

        VStack   //Stack 1
            Text("Please provide your details")
                VStack (spacing: 16) 
                       #warning ("check out why below textfields wont accept interaction")
                            TextField("User Name", text: $tempName)
                            TextField("User Surname", text: $tempSurname)
                            TextField("User Phone", text: $tempPhone)
                  
                  .padding(.horizontal, 8)
                  .padding(.vertical, 16)
                  .shadow(radius: 8, x: 2, y: 4)
       

【参考方案1】：

据了解，一些修饰符适用于修改后的视图内的每个视图

确实如此。

但是，您可以使用compositingGroup 将修饰符应用于仅最外层视图：

VStack(spacing: 16) 
    // ...

.padding(.horizontal, 8)
.padding(.vertical, 16)
.compositingGroup() // add before `shadow`
.shadow(radius: 8, x: 2, y: 4)

---

这是一个很好的解释，直接取自文档：

/// Wraps this view in a compositing group.
///
/// A compositing group makes compositing effects in this view's ancestor
/// views, such as opacity and the blend mode, take effect before this view
/// is rendered.
///
/// Use `compositingGroup()` to apply effects to a parent view before
/// applying effects to this view.
///
/// In the example below the `compositingGroup()` modifier separates the
/// application of effects into stages. It applies the ``View/opacity(_:)``
/// effect to the VStack before the `blur(radius:)` effect is applied to the
/// views inside the enclosed ``ZStack``. This limits the scope of the
/// opacity change to the outermost view.
///
///     VStack 
///         ZStack 
///             Text("CompositingGroup")
///                 .foregroundColor(.black)
///                 .padding(20)
///                 .background(Color.red)
///             Text("CompositingGroup")
///                 .blur(radius: 2)
///         
///         .font(.largeTitle)
///         .compositingGroup()
///         .opacity(0.9)
///     
///
/// ![A view showing the effect of the compositingGroup modifier in applying
/// compositing effects to parent views before child views are
/// rendered.](SwiftUI-View-compositingGroup.png)
///
/// - Returns: A view that wraps this view in a compositing group.
@inlinable public func compositingGroup() -> some View

【讨论】：

谢谢。这正是问题所在，解释提供了我需要的洞察力。

不要只是觉得这是正确的答案。 ;-D 从文档来看，这是明确的答案