如何在 SwiftUI 中更改分隔线的宽度？

Question

在我的 SwiftUI 应用程序的几个屏幕上，我在几个元素之间使用 Divider()。此分隔线呈现为非常细的灰色（或黑色？）线。我猜1分。如何更改 Divider() 的宽度？

Answer 1

您可以创建任何您想要的分隔线，颜色、宽度、内容...如下例所示。

struct ExDivider: View {
    let color: Color = .gray
    let width: CGFloat = 2
    var body: some View {
        Rectangle()
            .fill(color)
            .frame(height: width)
            .edgesIgnoringSafeArea(.horizontal)
    }
}

Answer 2

对于任何感兴趣的人，我修改了接受的答案，支持水平和垂直方向，并使用原始的分隔线颜色并支持深色模式：

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)
        }
    }
}

Answer 3

这对我有用：

Divider().frame(maxWidth: 100)

这大约是 iPhone 11 纵向模式下屏幕宽度的三分之一。

Answer 4

这已经太晚了，但是......将背景颜色添加到高度将呈现更厚的 Divider()。图像中的分隔线仍然很薄，但达到了预期的效果。

Divider().frame(width: 300,height: 10).background(Color.blue)

Answer 5

您可以使用框架（宽度，高度）调整分隔线的厚度，具体取决于它是垂直分隔线还是水平分隔线。如果您有垂直分隔线，则可以使用框架（高度：？）来调整厚度。如果您有水平分隔线，则可以使用框架（宽度：？）。除了设置框架宽度或高度之外，您还需要使用叠加修改器为分隔线指定颜色（即使您将其保留为灰色）。

例子：

Divider()
    .frame(height: 5)
    .overlay(.gray)

*有关更多分隔线定制信息，请参阅此博客

https://sarunw.com/posts/swiftui-divider/#:~:text=of%20a%20divider.-,调整%20SwiftUI%20Divider%20厚度,-SwiftUI%20divider%20has