SwiftUI TextField在特定容器嵌套顺序下无法点击的原因咨询

我遇到了一个异常问题，希望了解其原因以避免后续同类问题。我将复杂视图简化至如下最小复现版本：

// 简化后的视图代码
struct DebugWTF: View {
        
    @State var debugstring: String = ""
    
    var body: some View {
        ScrollView {
            GeometryReader { geometry in
                TextField("placeholder_eg", text: $debugstring)
            }
        }
    }
}

我发现调整容器嵌套顺序后，TextField可恢复正常交互：

无法交互的结构 #

var body: some View {
    ScrollView {
        GeometryReader { geometry in 
            TextField(...) // 无法被点击
        }
    }
}

上述结构中TextField无法被点击，但调换嵌套顺序后：

可正常交互的结构 #

var body: some View {
    GeometryReader { geometry in 
        ScrollView {        
            TextField(...) // 可正常点击
        }
    }
}

TextField可正常点击。我曾猜测是ScrollView直接子视图为GeometryReader导致异常，但即使在两者间插入ZStack：

var body: some View {
    ScrollView {
        ZStack {
            GeometryReader { geometry in 
                TextField(...) // 仍无法点击
            }
        }
    }
}

TextField仍无法点击。请问为何容器嵌套顺序会引发该问题？

这本质是SwiftUI中布局优先级与事件传递的交互逻辑导致的：

• GeometryReader的布局特性：GeometryReader是一个「贪婪」的视图，会尽可能占据父容器提供的所有可用空间。当它处于ScrollView内部时，ScrollView作为可滚动容器，会给它分配无限的垂直空间，导致GeometryReader被拉伸至无限高。此时TextField的视觉位置虽然在顶部，但系统的点击检测（hit test）会被拉伸后的GeometryReader干扰，无法正确识别TextField的实际交互区域。

• 嵌套顺序调换后的逻辑变化：当GeometryReader放在ScrollView外层时，它会基于父视图（如屏幕）的尺寸确定自身大小，ScrollView则被约束在这个有限空间内。此时ScrollView的内容高度由内部TextField决定，TextField的布局和交互区域都能被系统正确识别，自然可以正常响应点击。

• 插入ZStack无效的原因：ZStack只是层叠容器，不会改变GeometryReader的布局特性——只要它还在ScrollView内部，依然会获取无限空间，问题本质没有解决，TextField的交互区域还是无法被正确识别。

解决建议 #

• 避免将GeometryReader直接嵌套在ScrollView内部使用，除非有明确的特殊需求。
• 如果需要在ScrollView内获取尺寸信息，可以通过.background(GeometryReader{ proxy in ... })的方式间接获取，这种方式不会干扰主视图的布局和交互。

内容的提问来源于stack exchange，提问作者Kenny Wyland