如何实现Page样式TabView滚动时显示彩色间隙，静止时隐藏？

你可以通过以下方式实现需求：核心思路是让TabView的背景色作为滚动时的间隙，同时让每个子视图的宽度完全匹配TabView的尺寸，这样静止时子视图会完全覆盖TabView背景，滚动时两个视图之间才会露出背景色作为间隙。

修改后的代码如下：

TabView {
    Color.red
        .frame(width: 150) // 子视图宽度和TabView一致
    Color.blue
        .frame(width: 150)
    Color.green
        .frame(width: 150)
}
.tabViewStyle(.page(indexDisplayMode: .never))
.frame(width: 150, height: 150)
.background(.yellow) // 间隙颜色设置为TabView的背景
.clipped() // 裁剪超出TabView范围的内容

为什么这样可行？ #

• 静止状态下：每个子视图的宽度和TabView完全一致，会完全覆盖TabView的黄色背景，所以看不到间隙。
• 滚动过程中：两个子视图会部分重叠，中间会露出TabView的黄色背景，形成你想要的彩色间隙。
• clipped() 确保子视图滚动时不会超出TabView的frame范围，避免出现多余的显示内容。

如果需要调整间隙的宽度，可以通过调整TabView的背景和子视图的宽度差来实现。比如想要更大的间隙，可以让子视图宽度比TabView小一些，同时给TabView添加padding来抵消宽度差，示例如下：

TabView {
    Color.red
        .frame(width: 140) // 子视图比TabView窄10pt
    Color.blue
        .frame(width: 140)
    Color.green
        .frame(width: 140)
}
.tabViewStyle(.page(indexDisplayMode: .never))
.frame(width: 150, height: 150)
.padding(.horizontal, 5) // 左右各加5pt padding，让子视图居中
.background(.yellow)
.clipped()

这样滚动时的间隙会更明显，静止时子视图依然居中填满视觉区域，看不到间隙。

内容的提问来源于stack exchange，提问作者Roberto