0

我有一个水平滚动视图,当用户输入更多内容时,它会向前沿滚动。但是,一旦达到最大长度,就不会发生这种情况。在事件中放置断点.onChange表明scrollTo应该运行滚动代理。

当我滑动水平滚动条时,它会按预期滚动,并且当我输入新内容时,它的行为完全符合我的预期。该问题似乎与滚动视图的初始状态有关,但我无法准确追踪在何处以及如何解决此问题。

struct ContentView: View {
    @State var text: String = "100"

    var body: some View {
        VStack {
            HorizontalScrollView(text: $text)
                .padding(.top, 100)
            Button("Add 100",
                   action: updateText)
                .padding(.bottom, 100)
        }
    }

    func updateText() {
        text += "100"
    }
}

struct HorizontalScrollView: View {
    @Binding var text: String

    var body: some View {
        ScrollViewReader { scrollView in
            GeometryReader { proxy in
                ScrollView(.horizontal) {
                    HStack {
                        Spacer()
                        Text(text)
                            .id("textView")
                            .font(.title2)
                            .lineLimit(1)
                            .background(.red)
                            .padding(.bottom)
                    }
                    .frame(minWidth: proxy.size.width,
                           idealHeight: 44)
                    .background(.yellow)
                }
                .onChange(of: text) { _ in
                    withAnimation {
                        scrollView.scrollTo("textView", anchor: .trailing)
                    }
                }
                .background(.green)
            }
        }
    }
}

可下载的示例项目:https ://github.com/imattice/Horizo​​ntalScrollExample

理想的解决方案是,一旦视图被加载并且用户输入的文本溢出滚动视图,文本将转移到前沿以将最新的文本显示到视图中,而无需手动滚动视图。

4

0 回答 0