Question

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

Answer 1

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

   X    Y  789  456  123  CCC  BBB  AAA
 123  AAA    0    0    1    0    0    1
 456  BBB    0    1    0    0    1    0
 123  AAA    0    0    1    0    0    1
 789  CCC    1    0    0    1    0    0

Answer 2

这对我有用：

Divider().frame(maxWidth: 100)

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

Answer 3

对于感兴趣的人，我修改了接受的答案，同时支持水平和垂直方向，并使用了原始的Divider颜色支持黑暗模式：

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

如何在SwiftUI中更改Divider的宽度？

3 个答案: