SwiftUI - 删除具有 PageViewStyle 的 TabView 之间的空间答案

【问题标题】：SwiftUI - remove space between TabView that has PageViewStyleSwiftUI - 删除具有 PageViewStyle 的 TabView 之间的空间
【发布时间】：2021-08-24 18:30:10
【问题描述】：

我有一个TabView 和7 页面。每一页都比屏幕宽度小 100 磅。

struct ContentView: View {
    var body: some View {
        GeometryReader { reader in
            VStack(alignment: .center) {
                TabView {
                    ForEach(0..<7) { index in
                        VStack {
                            
                        }
                        .frame( maxHeight: .infinity)
                        .frame(width: reader.size.width - 100)
                        .background(Color.red)
                        .cornerRadius(15)
                    }
                }
                .background(Color.yellow)
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
                .frame(width: reader.size.width, height: 500)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        
    }
}

TabView 的宽度与屏幕的宽度一样大。

Vstack 的两边有 50 个点，虽然每个点都比屏幕宽度小 100 个点。

我需要删除红色视图之间的空间。

【问题讨论】：

你能解释一下你的问题吗？什么是“我需要连接它们。怎么做？”什么意思？
@workingdog 我需要删除页面之间的空间。现在，它们之间大约有 100 个点的填充。我不想有填充。
好吧，只需从框架中删除“-100”即可。或使用.frame(width: reader.size.width - 100, height: 500)
@workingdog 我试过了。在这种情况下，相邻的两个页面是不可见的，因为 TabView 及其内容具有相同的宽度。

标签： swiftui tabview pageviews

【解决方案1】：

使用“ScrollView”和“HStack”来做一些不同的事情怎么样，像这样：

struct ContentView: View {
    var body: some View {
        GeometryReader { reader in
            ScrollView (.horizontal) {
                HStack (spacing: 0) {
                    ForEach(0..<7) { index in
                        VStack {
                            Text("\(index)")
                        }
                        .frame(maxHeight: .infinity)
                        .frame(minWidth: reader.size.width - 100)
                        .background(Color.red)
                        .cornerRadius(20)
                    }
                }.frame(maxWidth: .infinity, maxHeight: 500)
            }.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

EDIT2：使用分页

struct ContentView: View {
    var body: some View {
        GeometryReader { reader in
            VStack(alignment: .center) {
                TabView {
                    ForEach(0..<7) { index in
                        VStack {
                            Text("\(index)")
                        }
                        .frame(maxHeight: .infinity)
                        .frame(width: reader.size.width)
                        .background(Color.red)
                        .cornerRadius(25)
                    }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
                .frame(width: reader.size.width, height: 500)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

【讨论】：

我需要启用分页。因此，我将 TabView 与 PageViewStyle 一起使用。
我已经更新了我的答案。编辑一次显示一页。你说这不是你想要的？您想要一页上不止一张“卡片”吗？我的测试准确地显示了您的第二张图片所显示的内容。