如何在 ScrollView 内的 SwiftUI 文本中显示字符串结尾以更改字符串（无需滚动自己）？

Question

我想显示一个文本只是为了阅读，所以使用一个文本对象。如果文本太长而无法放入框架，我希望它可以滚动，因此使用 ScrollView。在同样的情况下，我希望首先显示文本的最后一部分，因此在 onChange 中使用带有 scrollTo 的 ScrollReader（感谢@Timmy）。 这在初始添加到要滚动的文本（按钮添加）时效果很好。但是，当重置要滚动的文本（按钮重置）然后再次开始添加文本（按钮添加）时，滚动会停止。 如何解决这个问题，以便在重置后文本仍会滚动？

struct ContentView: View 
{
    @State private var number = 0
    @State private var scrollText: String = ""
    
    var body: some View
    {
        VStack 
        {
            Button ("add text")
            {
                number += 1
                scrollText += "\(number)\n"
            }
            Button ("reset text")
            {
                scrollText = "reset\n"
            }
            ZStack
            {
                GeometryReader
                {
                    proxy in
                    ScrollViewReader
                    {
                        reader in
                        ScrollView
                        {
                            VStack (spacing: 0)
                            {
                                Text (scrollText)
                                    .id (1)
                            }
                        }
                        .padding (EdgeInsets (top: 10, leading: 10, bottom: 10, trailing: 10))
                        .frame (maxHeight: proxy.size.height, alignment: .leading)
                        .onChange (of: scrollText)
                        {
                            _ in
                            reader.scrollTo (1, anchor: .bottom)
                        }
                    }
                    RoundedRectangle (cornerRadius: 10)
                        .stroke (.black, lineWidth: 1)
                }
            }
            .padding (EdgeInsets(top: 0, leading: left, bottom: 0, trailing: right))
        }
        .frame (width: 400, height: 200)
    }
}

Answer 1

要实现这一点，可以将ScrollView的偏移量设置为最大值，这样内容的底部最初是可见的。这是对您的代码的一些更新：

结构内容视图：视图{ private var longText = "这个 是 A 文本 哪个 我 想 到 是 显示 和 底部 文本 可见的 在 外观”

var body: some View {
    ZStack {
        GeometryReader { proxy in
            ScrollView {
                VStack {
                    Spacer()
                    Text(longText)
                }
                .frame(maxHeight: .infinity)
                .padding(.bottom, proxy.size.height)
                .offset(y: -proxy.size.height)
            }
            .padding(EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10))
            .frame(maxHeight: proxy.size.height, alignment: .leading)
            
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color.black, lineWidth: 1)
        }
    }
    .padding(EdgeInsets(top: 300, leading: 30, bottom: 300, trailing: 30))
}

}

Answer 2

您可以将

ScrollView

嵌入到

ScrollViewReader

中，而不是添加偏移量和弄乱视图：

ScrollViewReader { reader in
    ScrollView {
        Text(longText)
            .id(1)//any id. 1 for simplicity
        Spacer ()
    }.padding(EdgeInsets (top: 10, leading: 10, bottom: 10, trailing: 10))
    .frame(maxHeight: proxy.size.height, alignment: .leading)
    .onAppear {
        reader.scrollTo(1, anchor: .bottom)
    }
}

上面的代码滚动你的

ScrollView

以定位id为1的

View

并在它出现时将其锚定到底部。