Я хочу иметь три лейбла с субтитрами на каждой и распределять их поровну.

  • Первый заголовок / подзаголовок должен быть выровнен (см. Зеленую рамку ниже).
  • Центральный заголовок / подзаголовок должен быть по центру (см. Синюю рамку ниже).
  • Последний заголовок / подзаголовок должен быть выровнен в конце. (см. красную рамку ниже)
  • Все они должны иметь максимальную ширину, при условии, что они имеют одинаковую ширину.

Это набросок того, что мне нужно:

enter image description here

И это представление SwiftUI, с которым я могу справиться

enter image description here

Проблема в том, что я не могу выровнять заголовки должным образом.

Вот мой текущий нерабочий код

import SwiftUI

struct MyView: View {
    public var body: some View {
        HStack(spacing: 0) {
            cellView(top: "Leading",
                     bottom: "subtitle",
                     alignment: .leading)
                .border(Color.green)



            cellView(top: "Centered",
                     bottom: "subtitle",
                     alignment: .center)
                .border(Color.blue)



            cellView(top: "Trailing",
                     bottom: "subtitle",
                     alignment: .trailing)
                .border(Color.red)
        }
            .padding()
    }

    private func cellView(top: String, bottom: String, alignment: HorizontalAlignment) -> some View {
        VStack(alignment: alignment, spacing: 0) {
            Text(top)
                .frame(maxWidth: .infinity)
                .font(.subheadline)
                .lineLimit(1)
                .border(Color.black)

            Text(bottom)
                .font(.subheadline)
                .lineLimit(1)
                .border(Color.black)
        }

        .border(Color.black)
    }
}

struct MyView_Previews: PreviewProvider {
    static var previews: some View {
        MyView()
    }
}
0
Jan 10 Фев 2021 в 13:14

1 ответ

Лучший ответ

Вместо того, чтобы пытаться выровнять подпредставления вашего стека, вы можете заставить их всех предпочитать расширение, а затем напрямую выровнять содержимое их фрейма (обратите внимание, что, поскольку параметры выравнивания совпадают между HorizontalAlignment и Alignment, вам не нужно измените что-нибудь в своем body):

private func cellView(top: String, bottom: String, alignment: Alignment) -> some View {
    VStack(spacing: 0) {
        Text(top)
            .frame(maxWidth: .infinity, alignment: alignment)
            .font(.subheadline)
            .lineLimit(1)
            .border(Color.black)

        Text(bottom)
            .frame(maxWidth: .infinity, alignment: alignment)
            .font(.subheadline)
            .lineLimit(1)
            .border(Color.black)
    }
    .border(Color.black)
}

Что дает желаемый результат

enter image description here


PS: Вы даже можете упростить свой cellView, сгруппировав общие модификаторы:

private func cellView(top: String, bottom: String, alignment: Alignment) -> some View {
    VStack(spacing: 0) {
        Group {
            Text(top)
                .font(.subheadline)
            Text(bottom)
                .font(.subheadline)
        }
        .frame(maxWidth: .infinity, alignment: alignment)
        .lineLimit(1)
        .border(Color.black)
    }
    .border(Color.black)
}
0
Alladinian 10 Фев 2021 в 11:02