TabView 指示器消失

Question

TabView {
    ForEach(images, id: \.self) { image in
        Image(image)
            .resizable()
            .scaledToFill()
    }
}
.frame(height: 320)
.clipShape(RoundedRectangle(cornerRadius: 10))
.tabViewStyle(.page)

在此代码中，当我使用

.scaledToFit()

时，图像上的指示器消失。 并使用

.scaledToFill()

显示指示器。

为什么这两个修饰符的作用不同？

如果我在此代码中不使用任何修饰符，指示器仍会出现在图像上。

Answer 1

我无法重现该问题。当我尝试时，当图像缩放至适合以及缩放至填充时，页面指示器都会出现。

但是，如果您在高显示屏上使用宽图像在浅色模式下进行测试，页面指示器将消失在白色背景中。尝试在图像后面设置非白色背景，或者只是切换到深色模式以确认指示器确实存在：

在此示例中，您还会注意到图像没有圆角，即使您应用了

RoundedRectangle

剪辑形状。这是因为，框架高度固定为 320，所以圆角发生在框架的空白部分。

如果您想要缩放以适应圆角的图像，请尝试将

clipShape

修改器移动到

ForEach

内的图像：

ForEach(images, id: \.self) { image in
    Image(image)
        .resizable()
        .scaledToFit()
        .clipShape(RoundedRectangle(cornerRadius: 10)) // <- HERE
}