动态更改SwiftUI的VStack顺序

3yhwsihp 于 2022-11-21 发布在 Swift

关注(0)|答案(1)|浏览(117)

如何在运行时更改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)
            }
        }
    }
}

为了避免重复，除了具有.topToBottom和.bottomToTop的VStack之外，是否存在类似于以下内容的内容：

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)
    }
}

swift

来源：https://stackoverflow.com/questions/74510873/dynamically-change-order-of-swiftuis-vstack

1条答案

按热度按时间

k7fdbhmy1#

我会从另一端开始：将 * 底层数据 * 以正确的方式排序，并使用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
            }
        }
    }
}

在本例中，为了使示例完全可编译，我还需要使ColorIdentifiable：

extension Color: Identifiable {
    public var id: UUID {
        return UUID()
    }
}

但是根据您实际想要显示的内容，如果您所拥有的内容已经是可识别的，则可能不需要此操作。
通过这种方式，您可以将逻辑（项目顺序）与您希望显示的方式完全分离和独立：今天您需要VStack，明天您需要支持旋转，也许还需要横向视图中的HStack......对于预先安排的数据，两者的工作方式相同。
另外，我不建议使用.rightToLeft-它不适合您的用例，它支持从右到左的语言（希伯来语、阿拉伯语）

赞(0）回复(0）举报 2022-11-21

我来回答

动态更改SwiftUI的VStack顺序

1条答案

相关问题

热门标签

最新问答