与其他视图重叠的动态文本编辑器

Question

所以我制作了一个成功的动态 TextEditor，但是当我尝试组合视图时，它与其他元素重叠并且不再随着您的键入而展开。我很确定这与 Geometry Reader 有关，但我不确定如果没有它该怎么做。谢谢！

ScrollView {
    
    GeometryReader { geometry in
        
        
        VStack{
            
            
            ZStack(alignment: .leading) {
                
                Text(text).foregroundColor(.clear)
                .padding(14)
                .font(.custom("Times", size: 14))
                .background(GeometryReader {
                    Color.clear.preference(key: viewheightkey3.self, value: [=10=].frame(in: .local).size.height)
                })
                .frame(width: geometry.size.width * 0.9)
                
                TextEditor(text: $text)
                .padding(6)
                .foregroundColor(.white)
                .frame(width: geometry.size.width * 0.9)
                .frame(height: height)
                .frame(minHeight: 100)
                .background(Color.black)
                
            }
            
            .padding(20)
            .onPreferenceChange(viewheightkey3.self) { height = [=10=] }
            
        }
        
        
    }
    
    struct viewheightkey3: PreferenceKey {
        static var defaultValue: CGFloat { 0 }
        static func reduce(value: inout Value, nextValue: () -> Value) {
            value = value + nextValue()
        }
    }

Answer 1

如果你能忍受摆脱框架宽度的东西（你可以用一些水平填充来代替），这似乎有效：

struct ContentView: View {
    @State private var textEditorHeight : CGFloat = 100
    @State private var text = "Testing text. Hit a few returns to see what happens"
    
    var body: some View {
        ScrollView {
            VStack{
                Text("This should be above")
                ZStack(alignment: .leading) {
                    Text(text)
                        .font(.custom("Courier", size: 24))
                        .foregroundColor(.clear)
                        .padding(14)
                        .background(GeometryReader {
                            Color.clear.preference(key: ViewHeightKey.self,
                                                   value: [=10=].frame(in: .local).size.height)
                        })
                    
                    TextEditor(text: $text)
                        .font(.custom("Courier", size: 24))
                        .padding(6)
                        .frame(height: textEditorHeight)
                        .background(Color.black)
                }
                .padding(20)
                .onPreferenceChange(ViewHeightKey.self) { textEditorHeight = [=10=] }
                
                Text("This should be below the text field")
            }
        }
    }
}

struct ViewHeightKey: PreferenceKey {
    static var defaultValue: CGFloat { 0 }
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value = value + nextValue()
    }
}

我并没有真正改变你所做的任何根本性的事情。大部分只是摆脱了外部 GeometryReader 并使 frame 依赖于仅从 PreferenceKey

传入的高度

与其他视图重叠的动态文本编辑器

Dynamic TextEditor overlapping with other views

swift

swiftui

text-editor

geometryreader