如何使用 ZStack 将元素放在 ForEach 前面而不使其重叠

如何解决如何使用 ZStack 将元素放在 ForEach 前面而不使其重叠

我正在尝试创建一个布局，其中有一个元素列表和一个用于在其前面添加更多元素的按钮。我知道我可以把它放在导航栏中，但这不是我想要实现的图形外观。但是，如果我将这两个元素放在 ZStack 中，即使 ForEach 位于 vstack 中，它也会重叠。我该如何解决这个问题？

import SwiftUI

        struct ContentView: View {
        let arrayTest = ["Element 1","Element 2","Element 3"]
       
       var body: some View {
         NavigationView {
          ZStack {
            vstack {
                ForEach(arrayTest,id: \.self) { strings in
                    Text(strings)
                }
            }
           vstack {
           Spacer()
           HStack {
           Spacer()
            Button(action: {
              //AddView
              }) { 
                Image(systemName: "plus")
                  .background(Circle().foregroundColor(.yellow))
               }.padding(.trailing,20)
               .padding(.bottom,20)
             }
             }
           }
           }
          }
        }

编辑：更准确地说，我希望按钮位于 ForEach 上方，因为如果我使用 vstack 并且元素列表很长，用户将不得不一直滚动到底部才能找到按钮。使用 ZStack，无论用户处于列表的哪个位置，它始终可见。

解决方法

这是使用 overlay 的一种方式，参见代码示例：

struct ContentView: View {
    
    @State private var arrayTest: [String] = [String]()
    
    var body: some View {
        
        NavigationView {
            
            Form { ForEach(arrayTest,id: \.self) { strings in Text(strings) } }
                .navigationTitle("Add Elements")
            
        }
        .overlay(
            
            Button(action: { addElement() })
                { Image(systemName: "plus").font(Font.largeTitle).background(Circle().foregroundColor(.yellow)) }.padding(),alignment: .bottomTrailing)
        .onAppear() { for _ in 0...12 { addElement() } }
        
    }
    
    func addElement() { arrayTest.append("Element " + "\(arrayTest.count + 1)") }
    
}

,

现在确定您要寻找什么样的确切设计，但如果您不想重叠，请不要使用 ZStack。像这样把它放在一个 VStack 中：

struct ContentView: View {
    let arrayTest = 0...100
    
    var body: some View {
        NavigationView {
            VStack {
                ScrollView {
                    LazyVStack {
                        ForEach(arrayTest,id: \.self) { a in
                            Text("element \(a)")
                        }
                    }
                }.frame(maxWidth: .infinity)
                VStack {
                    HStack {
                        Spacer()
                        Button(action: {
                            //AddView
                        }) {
                            Image(systemName: "plus")
                                .background(Circle().foregroundColor(.yellow))
                        }.padding(.trailing,20)
                        .padding(.bottom,20)
                    }
                }
            }
        }
    }
}