Динамически изменять порядок 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)
    }
}
Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
LeetCode запись решения 2536. Увеличение подматриц на единицу
LeetCode запись решения 2536. Увеличение подматриц на единицу
Увеличение подматриц на единицу - LeetCode
Переключение светлых/темных тем
Переключение светлых/темных тем
В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно...
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой...
В PHP
В PHP
В большой кодовой базе с множеством различных компонентов классы, функции и константы могут иметь одинаковые имена. Это может привести к путанице и...
Карта дорог Беладжар PHP Laravel
Карта дорог Беладжар PHP Laravel
Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку...
2
0
91
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 - это не для вашего случая использования, это для поддержки языков с письмом справа налево (иврит, арабский)

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