Question

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

Answer 1

可以这样做，尽管它需要使用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, h/2), w/2)
                let bl = min(min(self.bl, h/2), w/2)
                let br = min(min(self.br, h/2), 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, tl: 0, tr: 0, bl: 0, br: 0)
        }
    }
}

这给出了以下结果

在顶部列出：

在底部列出：

Answer 2

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

SwiftUI列表样式

2 个答案: