在SwiftUI中显示行/分隔符视图

Question

我想在我的SwiftUI应用中显示分隔线。为此，我尝试创建一个具有固定框架和背景颜色/边框的空视图：

EmptyView()
    .frame(width: 200, height: 2)
    .background(Color.black) // or:
    .border(Color.black, width: 2)

很遗憾，我看不到任何黑暗的景象。
有没有办法显示分隔符/线型视图？

Answer 1

您可以只使用颜色绘制一条线。如果要更改线宽或填充，可以像其他SwiftUI组件一样使用frame或padding。

//Horizontal Line in VStack
VStack{
    Color.gray.frame(height:CGFloat(1) / UIScreen.main.scale)
}
//Vertical Line in HStack
HStack{
    Color.gray.frame(width:CGFloat(1) / UIScreen.main.scale)
}

Answer 2

如果有人对分隔符，文本，分隔符感兴趣，如下所示：

LabelledDivider代码

struct LabelledDivider: View {

    let label: String
    let horizontalPadding: CGFloat
    let color: Color

    init(label: String, horizontalPadding: CGFloat = 20, color: Color = .gray) {
        self.label = label
        self.horizontalPadding = horizontalPadding
        self.color = color
    }

    var body: some View {
        HStack {
            line
            Text(label).foregroundColor(color)
            line
        }
    }

    var line: some View {
        VStack { Divider().background(color) }.padding(horizontalPadding)
    }
}

有点丑陋，但我不得不将Divider放入VStack中以使其水平，否则由于HStack的原因它们将是垂直的。如果您设法简化此过程，请告诉我：)

也许LabelledDivider使用和存储属性可能不是最SwiftUI-y解决方案，所以我愿意进行改进。

用法示例

这是产生上面截图的代码：

struct GetStartedView: View {
    var body: some View {
        NavigationView {
            VStack {

                NavigationLink(destination: SignInView()) {
                    Text("Sign In").buttonStyleEmerald()
                }

                LabelledDivider(label: "or")

                NavigationLink(destination: SignUpView()) {
                    Text("Sign up").buttonStyleSaphire()
                }

            }.padding(20)
        }
    }
}

ButtonStyle

为了完整起见，我还添加了buttonStyle视图修饰符：

struct ButtonStyle: ViewModifier {

    private let color: Color
    private let enabled: () -> Bool
    init(color: Color, enabled: @escaping () -> Bool = { true }) {
        self.color = color
        self.enabled = enabled
    }

    dynamic func body(content: Content) -> some View {
        content
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
            .foregroundColor(Color.white)
            .background(enabled() ? color : Color.black)
            .cornerRadius(5)
    }
}

extension View {
    dynamic func buttonStyleEmerald(enabled: @escaping () -> Bool = { true }) -> some View {
        ModifiedContent(content: self, modifier: ButtonStyle(color: Color.Radix.emerald, enabled: enabled))
    }

    dynamic func buttonStyleSaphire(enabled: @escaping () -> Bool = { true }) -> some View {
        ModifiedContent(content: self, modifier: ButtonStyle(color: Color.Radix.saphire, enabled: enabled))
    }

}

Answer 3

使用Divider。

  

可用于分隔其他内容的视觉元素。

示例：

struct ContentView : View {
    var body: some View {
        VStack {
            Text("Hello World")
            Divider()
            Text("Hello Another World")
        }
    }
}

输出：

Answer 4

如果您正在寻找一种自定义分隔线的方法，没有任何方法。您必须提供您的自定义实现：

struct CustomDivider: View {
    let height: CGFloat = 1
    let color: Color = .white
    let opacity: Double = 0.2
    
    var body: some View {
        Group {
            Rectangle()
        }
        .frame(height: height)
        .foregroundColor(color)
        .opacity(opacity)
    }
}