SwiftUI #20: 优先级

Source: Dev.to

介绍

在 SwiftUI 中，Stack 会在其子视图之间均匀分配空间。如果子视图放不下，它会为 Image 分配固定大小，并缩小 Text 的尺寸。

初始示例

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
        }
    }
}

在此示例中，Text 的内容因使用 .lineLimit(1) 而被截断。否则，它会占用多行。

更改 Text 的优先级

若要让 Text 完整显示，需要通过 layoutPriority(_:) 更改其优先级。视图的默认绘制优先级为 0。优先级越高，视图会尽可能占用更多空间。

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .layoutPriority(100)   // Prioridad alta
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
        }
    }
}

使用 fixedSize

fixedSize(horizontal:vertical:) 会将视图固定在其理想大小上。如果不指定参数，大小会在两个维度上都被固定。该函数的优先级甚至高于 layoutPriority(_:)；启用后，视图会在不考虑其他元素优先级的情况下占用所需大小。

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .fixedSize()           // Fija el tamaño del texto
            Image(systemName: "circle")
                .font(.system(size: 100))
            Text("Hola Mundo")
                .font(.title)
                .lineLimit(1)
                .layoutPriority(100)   // Prioridad alta para este texto
        }
    }
}

在最后的示例中，第一个 Text 通过 fixedSize() 完整显示，而第二个 Text 则通过较高的 layoutPriority 获得更多空间。