How to create an auto-scrollable Text view?

Question

bruce2007 OP

Created Dec ’21

Replies 1

Boosts 0

Participants 2

I want to create an auto-scrollable text. When the content grows longer, it can automatically scroll to the bottom and show the last line.

Here is my code:

struct ContentView: View {
  @State var text = "Hello everyone: "
  @State var index = 0
   
  var body: some View {
    VStack {
      ScrollViewReader { reader in
        ScrollView {
          VStack {
            Text(text)
              .font(.title)
              .id("textId")
              .padding(10)
          }
        }
        .frame(width: 300, height: 160, alignment: .topLeading)
        .border(.blue)
        .onChange(of: text, perform: { _ in
          reader.scrollTo("textId", anchor: .bottom)
        })
      }
       
      Button("Append") {
        index += 1
        text += "Hello \(index); "
      }
    }
  }
}

It only works when I scroll the text and then append new text.

Screen Shot 2021-12-13 at 4.33.32 PM.png

Can someone please help? Thank you!

Boost

Answer 1

Claude31 OP

Dec ’21

Remove the second VStack statement (inside ScrollView), which causes alignment of the Stack and not the Text:

  var body: some View {
        VStack {
            ScrollViewReader { reader in
                ScrollView {
                    //    REMOVE -->>      VStack {
                    Text(text)
                        .font(.title)
                        .id("textId")
                        .padding(10)
                }
                //   REMOVE -->>     }

0