92. HStack с элементами одной высоты и ширины

Иногда нужно сделать несколько элементов одинаковой ширины в HStack таким образом, чтобы их высота была равна самому высокому элементу в списке. В этой статье покажу короткое и простое решение.

План

1. Изучим вводные данные
2. Посмотрим на вариант реализации

Вводные данные

Нам нужно сделать стек для 2-3 вьюх, в каждой из которых будет текст. Количество строк в тексте мы не знаем, но дизайнер уверен, что там не будет слишком много текста и можно не ограничивать количество строк.

Высота всех элементов в стеке должна быть равна высоте элемента с самым большим количеством текста, и ширина всех элементов должна быть одинаковой.

Вариант реализации

fileprivate struct Model: Identifiable {
  let id = UUID()
  let string: String
}

struct EqualHeightWidthStackExample: View {
  private let items = [
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
    "Duis aute irure dolor in reprehenderit in voluptate"
  ].map(Model.init)
   
  var body: some View {
    HStack(spacing: 8) {
      ForEach(items) { item in
        makeView(title: item.string)
      }
    }
    .fixedSize(horizontal: false, vertical: true) // 1
    .padding(.horizontal)
  }
   
  private func makeView(title: String) -> some View {
    VStack(alignment: .leading, spacing: 12) {
      Image(systemName: "house")
        .symbolVariant(.fill)
        .font(.title)
      Text(title)
        .frame(maxWidth: .infinity, alignment: .leading) // 2
    }
    .foregroundStyle(.primary)
    .padding(16)
    .frame(maxHeight: .infinity, alignment: .top) // 3
    .background(.green.opacity(0.5))
    .clipShape(.rect(cornerRadius: 16))
  }
}

1. При помощи fixedSize мы фиксируем вертикальную высоту стека по высоте контента в нем
2. Задаем максимальную ширину для текста в ячейке, чтобы все ячейки имели одинаковую ширину
3. Задаем максимальную высоту ячейке и выравниваем по верхнему краю, чтобы в итоге все ячейки были одной высоты и с одинаковым выравниванием

Заключение

В нашем случае простой комбинацией модификаторов frame и fixedSize можно добиться нужных результатов, и это очень удобно 👍

Код для этой статьи можно посмотреть тут, другие статьи по разработке - тут, а про инвестиции - тут.