如何将元素放在带有 ZStack 的 ForEach 前面而不使其重叠
How to put an element in front of a ForEach with a ZStack without making it overlapped
我正在尝试创建一个布局,其中有一个元素列表,以及一个用于在其前面添加更多元素的按钮。我知道我可以将它放在导航栏中,但这不是我想要实现的图形外观。但是,如果我将这两个元素放在 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 中,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)") }
}