Блог

Мне нужен простой график с цветным прямоугольником переменной высоты для каждой точки данных. Пустое пространство под цветным прямоугольником должно расширяться, чтобы нижние числа выстраивались в линию, как это делает верхний ряд чисел.

Это мое мнение:

Итак, я хотел бы найти идиоматическое решение для того, чтобы нижний ряд чисел совпадал с 59. Приветствуется любой совет, который указывает мне правильное направление. Спасибо.

Вот что у меня есть на данный момент:

 struct DemoView: View {
    var dataSource = [1, 0, 34, 12, 59, 44]
    /// Provide a Dynamic Height Based on the Tallest View in the Row
    @State private var height: CGFloat = .zero // < calculable height
    /// The main view is a row of variable height views
    var body: some View {
        HStack(alignment: .top) {
            Spacer()
            /// i want these to all be the same height
            ForEach(0 ..< 6) { index in
                VStack {
                    Text("(index)")
               Rectangle()
                   .fill(Color.orange)
                   .frame(width: 20, height: CGFloat(self.dataSource[index]))
                Text("(dataSource[index])")
                }
           }
            Spacer()
        }
        .alignmentGuide(.top, computeValue: { d in
                DispatchQueue.main.async {
                    self.height = max(d.height, self.height)
                }
                return d[.top]
            })
    }
}

struct Demo_Preview: PreviewProvider {
    static var previews: some View {
        DemoView()
    }
}
  

Отредактируйте, чтобы показать окончательные результаты:

Я внес изменения, предложенные Peri, изменил .top выравнивания .bottom и получил очень красивую простую диаграмму:

Вот возможный (кажется самым простым) подход. Протестировано с Xcode 12 / iOS 14

 struct DemoView: View {
    var dataSource = [1, 0, 34, 12, 59, 44]

    var body: some View {
        HStack(alignment: .top) {
            Spacer()
            /// i want these to all be the same height
            ForEach(0 ..< 6) { index in
                VStack {
                    Text("(index)")
                    Color.clear
                        .frame(width: 20, height: CGFloat(dataSource.max() ?? 0))
                        .overlay(
                            Color.orange
                                .frame(height: CGFloat(self.dataSource[index]))
                        , alignment: .top)
                    Text("(dataSource[index])")
                }
            }
            Spacer()
        }
    }
}