Динамически изменять порядок VStack SwiftUI
Как можно изменить порядок VStack во время выполнения? Для HStack направление компоновки можно изменить с .leftToRight и .rightToLeft. С помощью ZStack можно настроить zIndex для изменения порядка представлений спереди назад. Есть ли что-то, что можно использовать для изменения порядка VStack? В моем проекте сработал бы обратный порядок сверху вниз.
Это сильно упрощенный пример с дублированием:
struct ContentView: View {
@State var shouldFlip = false
var body: some View {
if shouldFlip {
VStack {
Color(.red)
Color(.blue)
Color(.yellow)
Color(.green)
}
} else {
VStack {
Color(.green)
Color(.yellow)
Color(.blue)
Color(.red)
}
}
}
}
Чтобы избежать дублирования, есть что-то вроде следующего, но для VStack с .topToBottom и .bottomToTop:
struct ContentView: View {
@State var shouldFlip = true
var body: some View {
HStack {
Color(.red)
Color(.blue)
Color(.yellow)
Color(.green)
}.environment(\.layoutDirection, shouldFlip ? .rightToLeft : .leftToRight)
}
}
Ответы 1
Я бы начал с противоположного конца: правильно упорядочить базовые данные и использовать ForEach, чтобы показать их в том порядке, в котором они хранятся. Таким образом, самому представлению не нужно ничего знать о порядке:
struct ContentView: View {
@State var shouldFlip = true
var items: [Color] = [.red, .blue, .yellow, .green]
var shownItems: [Color] {
shouldFlip ? items.reversed() : items
}
var body: some View {
VStack {
ForEach(shownItems) { item in
item
}
}
}
}
В этом случае, чтобы сделать пример полностью компилируемым, мне также нужно сделать Color Identifiable:
extension Color: Identifiable {
public var id: UUID {
return UUID()
}
}
Но в зависимости от того, что вы на самом деле хотите отобразить, это может не понадобиться, если то, что у вас есть, уже идентифицируемо.
Таким образом, у вас есть логика (порядок элементов), полностью отделенная и независимая от того, как вы хотите, чтобы они отображались: сегодня вы хотите VStack, завтра вы поддерживаете вращение и, возможно, хотите HStack в альбомной ориентации... Оба будут работать одинаково с заранее подготовленные данные.
Также я бы не рекомендовал использовать .rightToLeft - это не для вашего случая использования, это для поддержки языков с письмом справа налево (иврит, арабский)