SwiftUI List styles - watchkit

Question

I'm writing an Apple Watch app and I want to create a list just like this one in the Settings menu where the rows in the middle of the list are rectangles whereas the top and bottom are rounded rectangles. Is this a type of List style?

Answer 1

It is possible to do, though it requires using GeometryReader to handle drawing the rounded corners.
There is a great post by swiftui-lab.com that explains how to make the certain corners of a view rounded. Here is the code.
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)
}
}
}
We can then make a small example. Taking an array of items we can create a List. We will need the indices of the items so that we can tell which item is first (index of 0) and last (index of count - 1). The .listRowBackground modifier allows us to set the background of our rows so we will use that to set the view on it.
We create a helper function createRoundedCorners which will takes the index of the row and the number of rows that exist. This returns a RoundedCorrners view that the top left and right corners of the first row to be rounded and similarly the bottom left and right corners of the end row.
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)
}
}
}
This gives the following results
List at the top:
List at the bottom:

Answer 2

No, in SwiftUI Lists are very limited for configurations.
I recommend you to try making your own custom List-like view using ScrollView.