我使用 SwiftUI,我想要一个垂直滚动视图来显示多个项目(事件)。 这些项目包含由照片表示的子项目(参与者)。 我想在 2x2 矩阵中显示 4 张照片。如果参加人数超过 4 人,我想向左滑动显示接下来的 4 张照片。 (请参阅随附的屏幕截图)。
实现我通过使用 UIViewRepresentable 或 UIViewControllerRepresentable 实现了分页(PageView、PageViewController 和 PageControl)。 (我也尝试过TabView)
我在 ScrollView 上使用此分页时遇到问题,分页元素不可用,它不显示。 它在 VStack 或列表中运行良好,但这对我在滚动视图上需要它没有帮助。
非常简单的例子:
嵌入到 VStack -> WORKS
import SwiftUI
struct TestView2: View {
@State var currentPage = 0
var body: some View {
VStack() {
Text("Below the Paging")
PageView([
TestView(),
TestView()
], currentPage: $currentPage)
}
}
}
嵌入 ScrollView -> 不起作用
import SwiftUI
struct TestView2: View {
@State var currentPage = 0
var body: some View {
ScrollView() {
// It also does not work if I add a VStack() into the ScrollView.
// VStack(){
Text("Below the Paging")
PageView([
TestView(),
TestView()
], currentPage: $currentPage)
// }
}
}
}
使用ScrollView需要注意什么吗?我需要预加载一些东西吗?是不是必须要专门嵌入? 或者是分页,以我实现的方式,错误的方法?
如果您需要更多使用过的代码,请告诉我。
顺便说一句。 ScrollView 让我发疯。除了这个问题之外,我还有一个问题,就是只要我没有滚动,按钮在某些地方就不起作用。
看起来是一个bug,但在14.3中已解决
struct NestedPageController: View {
@State var currentPage = 0
@State var currentPage2 = 0
var body: some View {
ScrollView() {
VStack{
Text("Below the Paging")
TabView(selection: $currentPage){
TestView2(tag: 1).tag(1)
TestView2(tag: 2).tag(2)
TestView2(tag: 3).tag(3)
TestView2(tag: 4).tag(4)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
TabView(selection: $currentPage2){
TestView2(tag: 10).tag(10)
TestView2(tag: 20).tag(20)
TestView2(tag: 30).tag(30)
TestView2(tag: 40).tag(40)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}
}
}
}
struct TestView2: View {
var tag: Int
var body: some View {
VStack{
Text(tag.description)
Image(systemName: "checkmark")
}.frame(width: 200, height: 200, alignment: .center).background(Color.green)
}
}