如何用项目从下到上填充 SwiftUI 的 VStack

Question

我一直在寻找，但找不到方法。

我想从下到上填充 VStack 视图。 例如，当将 Text 视图作为子项添加到 VStack 时，它位于顶部。 我想将它添加到屏幕底部，第二个添加到第一个之上。

@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]))
                }
            }
        }
    }
}

您在屏幕上看到的内容；

1

2

我在屏幕底部想要什么；

2

1

Answer 1

您可以通过将rotationEffect应用于您的ScrollView及其内部内容来实现它。

@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
    }
}

Answer 2

这个怎么样？

ScrollView {
  VStack(spacing: 5) {
    Spacer()
    ForEach(items.map(String.init).reversed(), id: \.self) { item in
      Text(item)
    }
  }
}