想要掌控 SwiftUI 视图层叠顺序？认识 zIndex！

2024-01-17 10:51:12

前言

SwiftUI 提供了丰富的修饰符，以便开发者调整和控制视图的外观和行为。其中，zIndex 修饰符就是用来调整视图显示顺序的神器。掌握 zIndex 的用法，可以轻松掌控视图层叠顺序，让界面布局更加灵活和美观。

zIndex 的使用方法

使用 zIndex 修饰符非常简单，只需要在要调整顺序的视图上添加 zIndex 修饰符，并指定一个正整数作为参数即可。zIndex 的值越大，视图显示的顺序越靠前。

例如，以下代码将把带有红色背景的视图置于带有蓝色背景的视图之上：

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .frame(width: 200, height: 200)
                .foregroundColor(.blue)
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
                .zIndex(1) // 将红色视图置于蓝色视图之上
        }
    }
}

zIndex 的作用域

zIndex 修饰符的作用域仅限于其所在的布局容器内。这意味着，如果两个视图位于不同的布局容器内，即使它们都具有相同的 zIndex 值，也不会影响它们的显示顺序。

例如，以下代码中，红色视图和蓝色视图分别位于不同的 VStack 布局容器内。因此，即使它们都具有相同的 zIndex 值，蓝色视图仍然会显示在红色视图之上：

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .frame(width: 200, height: 200)
                .foregroundColor(.blue)
                .zIndex(1) // 红色视图的 zIndex
        }
        
        VStack {
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
                .zIndex(1) // 蓝色视图的 zIndex
        }
    }
}