SwiftUI Список стилей

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.