Как выровнять элементы по верху внутри VStack в SwiftUI?

Я только начал с swiftui, и у меня проблемы с выравниванием пользовательского интерфейса. Следующий код создает пробел в верхней части изображения.

VStack(alignment: .leading) {
        Image(item.imageUrl)
              .resizable()
              .aspectRatio(contentMode: .fit)
              .frame(width: 72, height: 72, alignment: .top).padding(.top,0)
        Text("\(item.name)").font(Font.system(size:12, design: .default))
             .multilineTextAlignment(.center)
             .frame(maxWidth: .infinity).lineLimit(2)    
        }
}

Я вижу, что VStack принимает параметр alignment, но это горизонтальное выравнивание. Что мне нужно, так это то, что изображение должно придерживаться верхней части своего супервизора. Есть ли способ сделать это без использования Spacer().

Как и в случае с react-native, у нас были justifyContent и alignItems как для горизонтального, так и для вертикального выравнивания дочерних элементов.

ОБНОВЛЯТЬ:

Та же проблема существует и для текста или любого представления. Например. Этот код помещает два текста в центр представления

 VStack(alignment: .leading, spacing: 0) {
        Text("line 1")
        Text("line 2")
 }

Выравнивание параметров в VStack предназначено для горизонтального выравнивания.

Теперь, чтобы выровнять эти тексты вверху, единственный способ, который я могу придумать, — это ввести Spacer() следующим образом:

struct MyCustomView:View {
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      Text("line 1")
      Text("line 2")
      Spacer()
    }
 }

Это временно решает проблему:

Но разделитель создаст проблему в сложных представлениях, скажем, другой разработчик хочет добавить пользовательский вид (в данном случае строка 3) чуть ниже моего представления, разделитель создаст дополнительное пространство между ними.

VStack {
     MyCustomView()
     Text("line 3")
 }

Есть ли лучший способ, чтобы мои дочерние представления (и последующие представления) внутри VStack оставались выровненными по верху без разделителя?

VStack привязан к содержимому, поэтому я не думаю, что это проблема выравнивания, по крайней мере, в предоставленном коде. Не могли бы вы дать больше контекста кода и показать скриншот? Было бы лучше, если бы вы предоставили минимальный воспроизводимый пример.

Asperi 18.12.2020 13:03

Вышеприведенный код в порядке. Вверху нет места. Где внутри завернут VStack?

davidev 18.12.2020 13:20

@Asperi Обновил мой вопрос, не могли бы вы проверить

Romit Kumar 18.12.2020 13:39
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
22
3
13 105
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Просмотры SwiftUI дешевы. Используйте другой VStack() с Spacer().

    VStack {
        VStack(alignment: .center, spacing: 0) {
          Text("line 1")
          Text("line 2")
          // Add your Views here
        }
        Spacer()
    }

Не работает для меня.

meaning-matters 09.10.2022 21:31
Ответ принят как подходящий

Вы можете попробовать использовать модификатор .frame(), чтобы сделать VStack() полноразмерным в супервиде. В кадре вы можете выровнять свой контент topLeading

var body: some View {
    VStack(alignment: .leading, spacing: 0) {
        Text("line 1")
        Text("line 2")
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
    .border(Color.red)
}

Для этого решения не требуется прокладка

Они хотят выровнять подвиды по центру.

mahan 18.12.2020 14:41

@mahan Line1 и line2 должны располагаться по центру? Но все еще вверху справа?

davidev 18.12.2020 14:42

@davidev спасибо, чувак, параметр выравнивания здесь имеет тип «Выравнивание» (вместо HorizontalAlignment, как в случае VStack), который принимает значение как для горизонтального, так и для вертикального выравнивания, например. .top, .center, .topLeading и т. д.

Romit Kumar 18.12.2020 19:13

Это тоже работает.

 VStack {

          Text("line 1")
          Text("line 2")

    }.frame(maxWidth: .infinity, // Full Screen Width
            maxHeight: .infinity, // Full Screen Height
            alignment: .topLeading) // Align To top

Это сработало лучше всего для меня

Romin 04.05.2023 00:05
        VStack(spacing: 30) {
        
        Text("Default Alignment in Vstack is Center")
        
        VStack(alignment: .trailing, spacing: 20) {
            Text(".trailing")
                .font(.title)
            Image(systemName: "rectangle.trailinghalf.inset.filled.arrow.trailing")
                .font(.title)
            
            Text("Alignment set by .trailing")
            
        }.padding()
            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(.yellow))
        
        VStack(alignment: .leading, spacing: 20) {
            Text(".leading")
                .font(.title)
            
            Image(systemName: "rectangle.leadinghalf.inset.filled.arrow.leading")
                .font(.title)
            
            Text("Alignment set by .leading")
            
        }.padding()
            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(.yellow))
        
    }

Другие вопросы по теме