SwiftUI列表样式

我正在编写一个Apple Watch应用,我想在“设置”菜单中创建一个与此列表相同的列表,其中列表中间的行是矩形,而顶部和底部是圆角矩形。这是一种列表样式吗?

SwiftUI列表样式

qq290868393 回答:SwiftUI列表样式

可以这样做,尽管它需要使用GeometryReader来处理圆角。

swiftui-lab.com上有一篇很棒的文章,解释了如何使视图的某些角变圆。这是代码。

struct RoundedCorners: View {
    var color: Color = .blue
    var tl: CGFloat = 0.0
    var tr: CGFloat = 0.0
    var bl: CGFloat = 0.0
    var br: CGFloat = 0.0

    var body: some View {
        GeometryReader { geometry in
            Path { path in

                let w = geometry.size.width
                let h = geometry.size.height

                // Make sure we do not exceed the size of the rectangle
                let tr = min(min(self.tr,h/2),w/2)
                let tl = min(min(self.tl,w/2)
                let bl = min(min(self.bl,w/2)
                let br = min(min(self.br,w/2)

                path.move(to: CGPoint(x: w / 2.0,y: 0))
                path.addLine(to: CGPoint(x: w - tr,y: 0))
                path.addArc(center: CGPoint(x: w - tr,y: tr),radius: tr,startAngle: Angle(degrees: -90),endAngle: Angle(degrees: 0),clockwise: false)
                path.addLine(to: CGPoint(x: w,y: h - br))
                path.addArc(center: CGPoint(x: w - br,y: h - br),radius: br,startAngle: Angle(degrees: 0),endAngle: Angle(degrees: 90),clockwise: false)
                path.addLine(to: CGPoint(x: bl,y: h))
                path.addArc(center: CGPoint(x: bl,y: h - bl),radius: bl,startAngle: Angle(degrees: 90),endAngle: Angle(degrees: 180),clockwise: false)
                path.addLine(to: CGPoint(x: 0,y: tl))
                path.addArc(center: CGPoint(x: tl,y: tl),radius: tl,startAngle: Angle(degrees: 180),endAngle: Angle(degrees: 270),clockwise: false)
            }
            .fill(self.color)
        }
    }
}

然后我们可以举一个小例子。接受一系列项,我们可以创建一个List。我们将需要这些项目的索引,以便我们可以知道哪个项目是第一个(0的索引)和最后一个(count - 1的索引)。 .listRowBackground修饰符允许我们设置行的背景,因此我们将使用它来设置视图。

我们创建一个辅助函数createRoundedCorners,该函数将获取行的索引和存在的行数。这将返回一个RoundedCorrners视图,其中第一行的左上角和右上角将被四舍五入,最后一行的左下角和右下角也类似。

struct ContentView: View {

    let items = ["Within 2 Minutes of Last Use","Within 1 Hour of Last Use","Always"]

    var body: some View {
        List {
            ForEach(0..<items.count) { index in
                Text(self.items[index]).font(.system(size: 24))
                    .listRowBackground(self.createRoundedCorners(at: index,count: self.items.count))
            }
        }
    }

    /// This function creates rounded corners for the first and last items in an array
    func createRoundedCorners(at index: Int,count: Int) -> RoundedCorners {
        switch index {
        case 0:
            return RoundedCorners(color: .blue,tl: 15,tr: 15,bl: 0,br: 0)
        case (count - 1):
            return RoundedCorners(color: .blue,tl: 0,tr: 0,bl: 15,br: 15)
        default:
            return RoundedCorners(color: .blue,br: 0)
        }
    }
}

这给出了以下结果

在顶部列出:

list at top

在底部列出:

list at bottom

,

不,在SwiftUI中,列表的配置非常有限。 我建议您尝试使用ScrollView制作自己的自定义类似列表的视图。

本文链接:https://www.f2er.com/3145763.html

大家都在问