我在具有 Material 背景的“半圆”视图中有一个 Toggle 视图。为了实现“半圆”,我使用了.clipShape
with.rect
和选定的半径。
似乎使用.clipShape
with .rect
(带有特定radius
参数)会导致Toggle
丢失背景颜色。
代码:
ZStack {
Color.blue
Toggle("On", isOn: .constant(false))
.padding()
.frame(width: 150, height: 100)
.background(.thinMaterial)
.clipShape(
.rect(
topLeadingRadius: 20,
bottomLeadingRadius: 0,
bottomTrailingRadius: 0,
topTrailingRadius: 20
)
)
}
如果我使用.clipShape
,RoundedRectangle(cornerRadius:)
我会再次获得背景,但我需要底部不圆润。
编辑
后来我还需要扩展视图,使底部可以延伸,只有材质应该位于安全区域下方。
简而言之,我需要将“材质”背景嵌入另一个背景修饰符中,然后将“材质”应用于“清晰颜色”视图。
以下是代码:
ZStack {
Color.blue
.ignoresSafeArea()
VStack {
Spacer()
Toggle("On", isOn: .constant(false))
.padding()
.frame(height: 100)
.background( // 'Regular background container
Color.clear // Apply the Material background with 'ignoresSafeArea'
.background(.thinMaterial,
in: .rect(
topLeadingRadius: 20,
bottomLeadingRadius: 0,
bottomTrailingRadius: 0,
topTrailingRadius: 20
))
.ignoresSafeArea()
)
}
}