在SwiftUI中,列表视图(List
)通常用于展示一系列的数据项。如果你想要在列表的底部添加一个页脚视图,可以使用LazyVGrid
结合ListFooterContent
来实现。以下是一个简单的示例代码:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
List {
ForEach(0..<20, id: \.self) { index in
Text("Item \(index)")
.padding(.vertical, 8)
}
}
.listStyle(InsetGroupedListStyle())
.background(Color.white)
.listFooter {
FooterView()
}
}
.navigationTitle("List with Footer")
}
}
struct FooterView: View {
var body: some View {
VStack {
Text("This is the footer")
.foregroundColor(.gray)
.font(.footnote)
.padding(.horizontal, 16)
.padding(.vertical, 8)
Button(action: {
print("Footer button tapped")
}) {
Text("Tap Me")
.foregroundColor(.white)
.padding(.horizontal, 16)
.padding(.vertical, 8)
.background(Color.blue)
.cornerRadius(8)
}
}
.frame(maxWidth: .infinity)
.background(Color(UIColor.systemGroupedBackground))
.padding(.bottom, 16)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
listFooter
被正确添加到List
中。listFooter
没有被其他视图遮挡。frame(maxWidth: .infinity)
来确保页脚视图占据整个宽度。通过以上方法,你可以在SwiftUI中轻松地添加页脚视图到列表中,并根据需要进行自定义和调整。
领取专属 10元无门槛券
手把手带您无忧上云