0

我正在尝试创建一个布局,其中有一个元素列表,以及一个在其前面添加更多元素的按钮。我知道我可以把它放在导航栏中,但这不是我想要实现的图形外观。但是,如果我将这两个元素放在 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,无论用户在列表的哪个位置,它总是可见的。

4

1 回答 1

1

这是一种使用方法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)") }
    
}

在此处输入图像描述

于 2021-07-28T11:45:18.430 回答