SwiftUI TextField设最小高度后文本变长滚动失效问题咨询

问题现象 #

点击TextField弹出键盘时，视图可滚动到TextField的底部锚点；但文本内容变长导致TextField框架超出键盘范围时，无法自动滚动到底部锚点。若不设置TextField最小高度，文本变化时可正常滚动到底部锚点。

此外，设置最小高度后，键盘弹出时已自动滚动到TextField底部，但文本变长超出最小高度后，本应通过.onChange触发的滚动失效；手动滚动到底部后，文本变化时又能正常滚动。

期望实现：键盘弹出后，TextField文本增加时能持续滚动到底部。

示例代码 #

struct TextFieldTest: View {
    
    @State var textfieldText: String = ""
    @FocusState var isTextFieldFocus: Bool
    
    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                VStack {
                    ForEach(0 ..< 5) { num in
                        RoundedRectangle(cornerRadius: 25)
                            .frame(height: 100)
                            .frame(maxWidth: .infinity)
                    }
                    TextField("something here ...", text: $textfieldText, axis: .vertical)
                        .padding()
                        .frame(minHeight: 120, maxHeight: .infinity, alignment: .top)
                        .background(Color.gray.opacity(0.3).cornerRadius(10))
                        .padding(.bottom)
                        .focused($isTextFieldFocus)
                        .onTapGesture {
                            isTextFieldFocus = true
                        }
                        .id("textField")
                }
                .padding()
                .onChange(of: textfieldText) { newValue in
                    proxy.scrollTo("textField", anchor: .bottom)
                }
                .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardDidShowNotification)) { notification in
                        withAnimation() {
                            proxy.scrollTo("textField", anchor: .bottom)
                    }
                }
            }
        }
    }
}

问题原因 #

核心在于ScrollViewReader的滚动触发时机与SwiftUI布局更新不同步：

• 设置minHeight后，TextField在文本未超过最小高度时，底部位置固定。当文本变长超出最小高度，TextField的frame会动态扩展，但.onChange触发scrollTo时，新的布局尚未完全计算完成，导致滚动锚点仍指向旧的底部位置。
• 手动滚动到底部后，ScrollView的滚动状态被刷新，后续文本变化时，布局更新与滚动触发的时机匹配，因此能正常滚动。

解决方案 #

方案1：延迟滚动操作，等待布局更新 #

通过DispatchQueue.main.async延迟执行滚动，确保TextField的新frame已计算完成：

.onChange(of: textfieldText) { newValue in
    DispatchQueue.main.async {
        proxy.scrollTo("textField", anchor: .bottom)
    }
}

方案2：优化TextField的frame设置 #

去掉maxHeight: .infinity，垂直方向的TextField会根据内容自动扩展高度，避免布局计算异常：

TextField("something here ...", text: $textfieldText, axis: .vertical)
    .padding()
    .frame(minHeight: 120, alignment: .top) // 移除maxHeight: .infinity
    .background(Color.gray.opacity(0.3).cornerRadius(10))
    .padding(.bottom)
    .focused($isTextFieldFocus)
    .onTapGesture {
        isTextFieldFocus = true
    }
    .id("textField")

方案3：结合Task等待布局周期 #

利用Task和MainActor.run确保在布局更新后执行滚动：

.onChange(of: textfieldText) { newValue in
    Task {
        await MainActor.run {
            proxy.scrollTo("textField", anchor: .bottom)
        }
    }
}

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