Как рисовать красиво анимированные графики в SwiftUI - Часть 3

Добавление фона и составление окончательного вида

В заключительной части нашего проекта нам нужно добавить некоторые данные для управления цветами каждого фона и каждого CapsuleBar.

Добавьте эти два массива, которые содержат цвета каждого набора данных:

private var dataBackgroundColor: [String: ColorRGB] = [
    "Data1": ColorRGB(red: 44 / 255, green: 54 / 255, blue: 79 / 255),
    "Data2": ColorRGB(red: 76 / 255, green: 61 / 255, blue: 89 / 255),
    "Data3": ColorRGB(red: 56 / 255, green: 24 / 255, blue: 47 / 255)
]
private var dataBarColor: [String: ColorRGB] = [
    "Data1": ColorRGB(red: 222 / 255, green: 44 / 255, blue: 41 / 255),
    "Data2": ColorRGB(red: 42 / 255, green: 74 / 255, blue: 150 / 255),
    "Data3": ColorRGB(red: 47 / 255, green: 57 / 255, blue: 77 / 255)
]

Теперь, когда у нас есть цвета, нам нужно добавить фон к нашему основному виду.

Инкапсулируйте наши предыдущие представления в ZStack в переменной body ContentView, , чтобы мы могли поместить наш цвет в фон:

var body: some View {
    ZStack {
        Color(.sRGB,
              red: self.dataBackgroundColor[dataPicker]!.red,
              green: self.dataBackgroundColor[dataPicker]!.green,
              blue: self.dataBackgroundColor[dataPicker]!.blue
        ).edgesIgnoringSafeArea(.all)
        .animation(.default)
        VStack {
            Text("Let's Graph!")
                .foregroundColor(.white)
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()
             Picker("", selection: $dataPicker) {
                 Text("Data1").tag("Data1")
                 Text("Data2").tag("Data2")
                 Text("Data3").tag("Data3")
             }.pickerStyle(SegmentedPickerStyle())
             .padding()
        }
    }
}

Нам просто не хватает графика, который мы создадим, добавив CapsuleGraphView к нашему ContentView VStack:

VStack {
    Text("Let's Graph!")
        .foregroundColor(.white)
        .font(.largeTitle)
        .fontWeight(.bold)
        .padding()
    
    Picker("", selection: $dataPicker) {
         Text("Data1").tag("Data1")
         Text("Data2").tag("Data2")
         Text("Data3").tag("Data3")
    }.pickerStyle(SegmentedPickerStyle())
    .padding()
    CapsuleGraphView(data: data[dataPicker]!, maxValueInData: data[dataPicker]!.max()!, spacing: 24, capsuleColor: dataBarColor[dataPicker]!)
}

Как видите, мы передаем наши данные в CapsuleGraphView, который их отобразит.

Вы можете попробовать наш график прямо сейчас! Нажмите play в Live Preview и наслаждайтесь.