SwiftUI—使用Divider分隔线对视图进行分隔

2020-07-14  本文已影响0人  anny_4243

原文链接:https://github.com/fzhlee/SwiftUI-Guide#-%E7%AC%AC13%E8%8A%82divider-

当Divider包含在VStack或YStack中时,Divider跨越堆栈的短轴延伸,或者当不在堆栈中时则进行水平分隔。
示例代码:

VStack{
    VStack {
     Image(systemName: "clock")
     Divider() //分割线视图是一条位于图像视图下方的灰色实线
     Text("\(Date())")
    }
    .padding()

    VStack {
     Image(systemName: "clock")
     Divider()
        .background(Color.purple) //分割线的默认颜色为灰色,此处设置分割线的默认颜色为紫色
        .scaleEffect(CGSize(width: 1, height: 10)) //分割线高度放大10倍
            .padding(Edge.Set.init(arrayLiteral: .top, .bottom), 20) //将分割线的上下内边距设置为20,以增加分割线和上下两侧的视图的距离

     Text("\(Date())")
    }
    .padding()
}
上一篇下一篇

猜你喜欢

热点阅读