Я только начал с 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 Обновил мой вопрос, не могли бы вы проверить
Просмотры SwiftUI дешевы. Используйте другой VStack() с Spacer().
VStack {
VStack(alignment: .center, spacing: 0) {
Text("line 1")
Text("line 2")
// Add your Views here
}
Spacer()
}
Не работает для меня.
Вы можете попробовать использовать модификатор .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 Line1 и line2 должны располагаться по центру? Но все еще вверху справа?
@davidev спасибо, чувак, параметр выравнивания здесь имеет тип «Выравнивание» (вместо HorizontalAlignment, как в случае VStack), который принимает значение как для горизонтального, так и для вертикального выравнивания, например. .top, .center, .topLeading и т. д.
Это тоже работает.
VStack {
Text("line 1")
Text("line 2")
}.frame(maxWidth: .infinity, // Full Screen Width
maxHeight: .infinity, // Full Screen Height
alignment: .topLeading) // Align To top
Это сработало лучше всего для меня
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))
}
VStack привязан к содержимому, поэтому я не думаю, что это проблема выравнивания, по крайней мере, в предоставленном коде. Не могли бы вы дать больше контекста кода и показать скриншот? Было бы лучше, если бы вы предоставили минимальный воспроизводимый пример.