在我的SwiftUI应用程序的某些屏幕上,我在几个元素之间使用Divider()。这个Divider被渲染为非常细的灰色(或黑色?)线条。我猜测是1个点。如何改变Divider()的宽度?
在我的SwiftUI应用程序的某些屏幕上,我在几个元素之间使用Divider()。这个Divider被渲染为非常细的灰色(或黑色?)线条。我猜测是1个点。如何改变Divider()的宽度?
您可以创建任何分隔符,颜色、宽度、内容等都可以自定义... 如下面的示例。
struct ExDivider: View {
let color: Color = .gray
let width: CGFloat = 2
var body: some View {
Rectangle()
.fill(color)
.frame(height: width)
.edgesIgnoringSafeArea(.horizontal)
}
}
如果有人感兴趣,我修改了被接受的答案,支持水平和垂直方向,并使用原始分隔符颜色并支持深色模式:
struct ExtendedDivider: View {
var width: CGFloat = 2
var direction: Axis.Set = .horizontal
@Environment(\.colorScheme) var colorScheme
var body: some View {
ZStack {
Rectangle()
.fill(colorScheme == .dark ? Color(red: 0.278, green: 0.278, blue: 0.290) : Color(red: 0.706, green: 0.706, blue: 0.714))
.applyIf(direction == .vertical) {
$0.frame(width: width)
.edgesIgnoringSafeArea(.vertical)
} else: {
$0.frame(height: width)
.edgesIgnoringSafeArea(.horizontal)
}
}
}
}
额外加分,这个代码片段使用了applyIf
语法:
extension View {
@ViewBuilder func applyIf<T: View>(_ condition: @autoclosure () -> Bool, apply: (Self) -> T, else: (Self) -> T) -> some View {
if condition() {
apply(self)
} else {
`else`(self)
}
}
}
Divider().frame(maxWidth: 100)
这大约是 iPhone 11 竖屏模式下屏幕宽度的三分之一。
Divider().frame(maxHeight:2)
将把厚度设置为2个点。 - sidekickr.background(Color.black)
才能看到厚度。 - CodingwizDivider().frame(width: 300,height: 10).background(Color.blue)
您可以使用frame(width, height)来调整分隔符的厚度,具体取决于它是垂直还是水平的。如果您有一个垂直的分隔符,则可以使用frame(height: ?)来调整其厚度。如果您有一个水平的分隔符,则可以使用frame(width: ?)。除了设置框架的宽度或高度之外,您还需要使用overlay修饰符为分隔符着色(即使您将其保留为灰色)。
示例:
Divider()
.frame(height: 5)
.overlay(.gray)
我发现这是最有效的方法...
Group {
Divider()
.frame(height: 2.0)
.background(Color.blue)
}
.frame(width: 100)
一旦将分隔符放入组中,您可以通过更改组来更改分隔符周围的区域。
这会使分隔线高度为2像素,长度为100像素。
struct AppDivider: View {
var color: Color =.gray
var lineWidth: CGFloat = 1
var body: some View {
Divider()
.frame(height: lineWidth)
.overlay(color)
}
}
struct AppDivider_Previews: PreviewProvider {
static var previews: some View {
VStack {
AppDivider()
AppDivider(color: .red, lineWidth: 5)
}
}
}
.frame(width:)
。 - Pigpocket.background()
,.frame(width:,height:)
对Divider
也不起作用。 - undefined