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

Question

在我的SwiftUI应用程序的某些屏幕上，我在几个元素之间使用Divider()。这个Divider被渲染为非常细的灰色（或黑色？）线条。我猜测是1个点。如何改变Divider()的宽度？

- mallow

---

你可以使用.frame(width:)。 - Pigpocket

这只是让它占用更多的空间，但视觉上仍然只有1个像素。 - Big_Chair

.frame(width:, height:) 只有在设置特定的 .background(Color.something) 时才起作用。每三个月我都要回到这个答案来提醒自己。 - Alexandre

我觉得即使你设置了.background()，.frame(width:,height:)对Divider也不起作用。 - undefined

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

- Asperi

---

好的，我明白了。所以默认的Divider()没有修改器来改变它的宽度，但是我可以创建一个自定义的（就像你的示例中一样），然后使用它替代默认的Divider()吗？谢谢！ :) - mallow

如果你想使用不同的颜色或宽度来使用这个自定义修饰符，你需要用“var”替换“let”。 - Ali

你不需要使用自定义分割线，其他答案中有一些示范了如何实现。 - texasRanger009

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

- Den Telezhkin

---

这是为iOS14+设计的吗？ - Learn2Code

我在项目中使用这个，需要iOS 13+和macOS 10.15+。 - Den Telezhkin

Answer 3

这对我有用：

Divider().frame(maxWidth: 100)

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

- Emily Stremel

---

如果分隔线是水平的，使用Divider().frame(maxHeight:2)将把厚度设置为2个点。 - sidekickr

这个不起作用。 - ngb

@ngb 你需要添加.background(Color.black)才能看到厚度。 - Codingwiz

Answer 4

这虽然有点晚了，但是...为高度(height)添加背景颜色将呈现一个更粗的分割线(Divider())。 分隔符在图像内仍然非常细，但所需的效果已经实现。

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

- Bob

Answer 5

您可以使用frame(width, height)来调整分隔符的厚度，具体取决于它是垂直还是水平的。如果您有一个垂直的分隔符，则可以使用frame(height: ?)来调整其厚度。如果您有一个水平的分隔符，则可以使用frame(width: ?)。除了设置框架的宽度或高度之外，您还需要使用overlay修饰符为分隔符着色（即使您将其保留为灰色）。

示例：

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

*更多分隔线自定义内容请参阅此博客 https://sarunw.com/posts/swiftui-divider/#:~:text=of%20a%20divider.-,Adjust%20SwiftUI%20Divider%20Thickness,-SwiftUI%20divider%20has

- texasRanger009

Answer 6

我发现这是最有效的方法...

        Group {
            Divider()
                .frame(height: 2.0)
                .background(Color.blue)
        }
        .frame(width: 100)

一旦将分隔符放入组中，您可以通过更改组来更改分隔符周围的区域。

这会使分隔线高度为2像素，长度为100像素。

- tj4shee

Answer 7

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

- Li Jin