button - 如何使用 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)") }
}
推荐阅读
- python - LearningShapelet with variable-length time-series returns nan in predictions array
- reactjs - How fill in input box on page Load in React?
- symfony4 - EasyAdmin 3 : Nested forms
- javascript - Configure ESLint to parse .ts and .tsx as Typescript and .js and .jsx as Ecmascript
- python - passing data from one class method to another class method
- r - my plotting of geom_sf has a quite strange scale
- c - Solving Time Complexity with Fibonacci
- php - 如何在 WordPress URL 结构中的自定义帖子固定链接中添加多个分类法
- python-3.x - 将文件保存到 Azure Blob
- pyspark - python - 如何在pyspark中给定ID的无界之前和忽略当前行日期值之间获取最大值?