SwiftUI 主列表可滚动 header 视图没有部分?
SwiftUI main list scrollable header view without sections?
有没有办法在列表 header 中放置一个视图而不带部分? table 视图通常有一个名为 tableHeaderView
的 属性,它是整个 table 的 header,与 header 部分无关.
我正在尝试创建一个列表并能够像 tableHeaderView
那样从 UITableView
滚动它。
struct MyView: View {
let myList: [String] = ["1", "2", "3"]
var body: some View {
VStack {
MyHeader()
List(myList, id: \.self) { element in
Text(element)
}
}
}
}
这是一个可能方法的简单演示,其他所有内容(如样式、大小、对齐方式、背景)都是可扩展和可配置的。
测试 Xcode 11.4 / iOS 13.4
struct MyHeader: View {
var body: some View {
Text("Header")
.padding()
.frame(maxWidth: .infinity)
}
}
struct DemoTableHeader: View {
let myList: [String] = ["1", "2", "3"]
let headerHeight = CGFloat(24)
var body: some View {
ZStack(alignment: .topLeading) {
MyHeader().zIndex(1) // << header
.frame(height: headerHeight)
List {
Color.clear // << under-header placeholder
.frame(height: headerHeight)
ForEach(myList, id: \.self) { element in
Text(element)
}
}
}
}
}
感谢Asperi。这是我对 table header.
的最终解决方案
struct MyHeader: View {
var body: some View {
Text("Header")
}
}
struct DemoTableHeader: View {
let myList: [String] = ["1", "2", "3"]
var body: some View {
List {
MyHeader()
ForEach(myList, id: \.self) { element in
Text(element)
}
}
}
}
有没有办法在列表 header 中放置一个视图而不带部分? table 视图通常有一个名为 tableHeaderView
的 属性,它是整个 table 的 header,与 header 部分无关.
我正在尝试创建一个列表并能够像 tableHeaderView
那样从 UITableView
滚动它。
struct MyView: View {
let myList: [String] = ["1", "2", "3"]
var body: some View {
VStack {
MyHeader()
List(myList, id: \.self) { element in
Text(element)
}
}
}
}
这是一个可能方法的简单演示,其他所有内容(如样式、大小、对齐方式、背景)都是可扩展和可配置的。
测试 Xcode 11.4 / iOS 13.4
struct MyHeader: View {
var body: some View {
Text("Header")
.padding()
.frame(maxWidth: .infinity)
}
}
struct DemoTableHeader: View {
let myList: [String] = ["1", "2", "3"]
let headerHeight = CGFloat(24)
var body: some View {
ZStack(alignment: .topLeading) {
MyHeader().zIndex(1) // << header
.frame(height: headerHeight)
List {
Color.clear // << under-header placeholder
.frame(height: headerHeight)
ForEach(myList, id: \.self) { element in
Text(element)
}
}
}
}
}
感谢Asperi。这是我对 table header.
的最终解决方案struct MyHeader: View {
var body: some View {
Text("Header")
}
}
struct DemoTableHeader: View {
let myList: [String] = ["1", "2", "3"]
var body: some View {
List {
MyHeader()
ForEach(myList, id: \.self) { element in
Text(element)
}
}
}
}