SwiftUI防止视图被压缩的fixedSize修饰符

在 SwiftUI 中，fixedSize 修饰符用于防止视图因为父容器的布局限制而被压缩或拉伸，它允许视图以自身内容的固有大小进行布局，而不是受到父容器的约束。

语法

.fixedSize(horizontal: Bool = false, vertical: Bool = false)

horizontal: 如果为 true，视图在水平方向会保持其固有宽度，避免被压缩或拉伸。

vertical: 如果为 true，视图在垂直方向会保持其固有高度。

使用场景

1、避免文本被截断或压缩

当父容器限制了视图的宽度或高度时，可以使用 fixedSize 来确保视图保持其内容的自然大小。

2、保持视图的比例

防止视图因父容器的限制而改变尺寸或比例。

3、灵活控制某些方向

可以单独设置水平方向或垂直方向的固定大小。

示例

1、防止文本被压缩或截断

struct ContentView: View {
    var body: some View {
        VStack {
            Text("This is a very long line of text that might get truncated.")
                .lineLimit(1) // 限制为单行
                .fixedSize(horizontal: true, vertical: false) // 固定宽度，防止被截断
                .frame(width: 100) // 限制宽度
                .background(Color.yellow)
        }
    }
}

效果：

如果不使用 fixedSize(horizontal: true)，文本会因为 frame(width: 100) 而被截断。

使用后，文本会超出 frame 的宽度，显示完整内容。

注意：fixedSize修饰符的顺序需要在frame之前，否则仍然会被截断。

2、固定视图比例

struct ContentView: View {
    var body: some View {
        HStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)

            Text("A short label")
                .fixedSize(horizontal: true, vertical: false) // 保持宽度
                .frame(width: 20) // 限制宽度
                .background(Color.red)
        }
    }
}

效果：

文本宽度不会被 frame(width: 20) 压缩，而是保持其自然宽度。

3、同时固定宽高

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.green)
                .frame(width: 100, height: 100)

            Text("Fixed size content")
                .fixedSize(horizontal: true, vertical: true) // 固定宽高
                .frame(width: 50, height: 50)
                .background(Color.orange)
        }
    }
}

效果：

即使设置了 frame(width: 50, height: 50)，Text 的大小会根据内容决定，而不会被压缩。

注意事项

1、与其他修饰符的交互

fixedSize 会优先于其他布局限制，例如 frame 和 padding，让视图以固有大小布局。

但如果视图超出屏幕范围，SwiftUI 会自动调整布局以避免视图溢出。

2、适用范围

常用于 Text 和 Image 等内容可能被压缩的视图。

也适用于 Rectangle、Circle 等形状视图。

3、默认行为

如果不指定 horizontal 或 vertical，两者默认值为 false，视图仍会受到父容器的约束。

完整示例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Long Text Example")
                .lineLimit(1)
                .frame(width: 100, height: 50)
                .background(Color.yellow)

            Text("Long Text Example")
                .lineLimit(1)
                .fixedSize(horizontal: true, vertical: true)
                .frame(width: 100, height: 50)
                .background(Color.orange)
        }
    }
}

效果：

第一段文本会被截断。

第二段文本由于 fixedSize，会保持其内容的固有大小，不会被限制。

总结

fixedSize 修饰符是 SwiftUI 中用来让视图优先使用其固有尺寸的工具。

它非常适合用于防止文本被截断、保持视图比例、以及在复杂布局中解决视图压缩问题。

结合 lineLimit 和 frame 等修饰符可以实现更加灵活的布局控制。

语法