tabView 指示器在 swiftUI 中消失

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
}