0

I have been searching but could not find a way.

I would like to fill VStack view from bottom to top. When a Text view added as a child to VStack for example it is places at the top. I wanted to add it to the bottom of screen and second one on top of the first one.

@State var items: [Int] = [0]

var body: some View {
    HStack {
        
        Button(action: {
            
            items.append( items.count + 1)
            
        }){
            Text("Add")
        }
        
        
        
        ScrollView() {
            ForEach(0..<items.count, id: \.self) { index in
                VStack(spacing:5) {
                    Text(String(items[index]))
                }
            }
        }
    }
}

What you get on top of screen;

1

2

What I want at the bottom of screen;

2

1

Hope
  • 2,096
  • 3
  • 23
  • 40
  • Does this answer your question https://stackoverflow.com/a/58708206/12299030? – Asperi Jun 08 '22 at 08:17
  • @Asperi Not exactly, it is more about scrolling to the wanted item. I want items ordered from bottom to top of screen. I have no problem with going to wanted items in scroll. – Hope Jun 08 '22 at 08:20
  • Ok, provide minimal reproducible example of use-case, because it is not clear what do you mean by "add" and where/how this should be used. VStack does not relates to screen, it just shrinks around content, and it is not collection so you cannot just "add" anything to it. In short your question is not clear. – Asperi Jun 08 '22 at 08:23
  • @Asperi I added! a sample code as you can see when you touch add it is adding! numbers from top to bottom not bottom to the top which I want. – Hope Jun 08 '22 at 08:35
  • I don't see how this differs from a reference provided above, just instead of items.append use items.insert(.. at: 0) there – Asperi Jun 08 '22 at 08:44

2 Answers2

1

You can achieve it by applying rotationEffect to your ScrollView and its inner content.

@State var items: [Int] = [0]

var body: some View {
    
    HStack {
        
        Button(action: {
            //Insert Items at 0 position to add content from bottom to top side
            items.insert(items.count, at: 0)
        }){
            Text("Add")
        }
        
        
        ScrollView(showsIndicators: false) {

                ForEach(0..<items.count, id: \.self) { index in

                    Text(String(items[index])).padding(.vertical,5)

                }.rotationEffect(Angle(degrees: 180)) //After rotating scrollview, now rotate your inner content to upright position.

        }.rotationEffect(Angle(degrees: -180)) //Rotate scrollview to bottom side
    }
}
Hardik Shekhat
  • 1,680
  • 12
  • 21
-1

How's this?

ScrollView {
  VStack(spacing: 5) {
    Spacer()
    ForEach(items.map(String.init).reversed(), id: \.self) { item in
      Text(item)
    }
  }
}
Skwiggs
  • 1,348
  • 2
  • 17
  • 42