fixSize

The fixSize Modifier fixes the size of modified view at its ideal size. fixSize 修改器可将修改后视图的尺寸固定为理想尺寸。

有两个变体在这个修饰器中，其中一个是接受两个参数horizontal和vertical，另一个是一个参数都没有。

@inlinable public func fixedSize() -> some View
@inlinable public func fixedSize(horizontal: Bool, vertical: Bool) -> some View

fixedSize() 变体其是方法 .fixedSize(horizontal: true, vertical: true)的convenience method

什么是ideal size 理想尺寸

Most of time, ideal size for any view is a size that is large enough to fit the content of that view. 大多数情况下，任何视图的理想尺寸都是足以容纳该视图内容的尺寸。

下面是一些视图的理想尺寸示例：

VStack {
            //1
            Circle()
                .fixedSize()
                .border(.pink)
            //2
            Toggle("Toggle", isOn: .constant(true))
                .fixedSize()
                .border(.pink)
            //3
            DatePicker("Calendar",
                       selection: .constant(.now))
            .fixedSize()
            .border(.pink)

            //4
            Text("Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.")
                .fixedSize()
                .border(.pink)
            //5
            Slider(value: $sliderValue)
                .tint(.mint)
                .border(.pink)
            //6
            Slider(value: $sliderValue)
                .tint(.mint)
                .fixedSize()
                .border(.pink)
        }

运行后的效果如下：

我们可以看到对于长文本，如果加上fixSize，那么它会只显示一行，多的部分会超出当前屏幕。对于Slider，如果加上fixSize,其理想尺寸的宽度会缩小到很小的一个空间，如果不加上fixSize会把宽度拉伸到尽可能长的尺寸。

因此，我们可以得出以下结论，对于不同的SwiftUI View，其理想尺寸的机制是不同的。我们需要去区别对待。

fixSize Modifier

要想比较好的理解fixSize的使用效果，我们最好以一个比较长的Text为例来举例，通过修改不同的fixSize的参数，来看最终的效果。

1.不添加fixedSize，或者添加.fixedSize(horizontal: false, vertical: false)

Text("Curabitur blandit tempus porttitor.\nFusce dapibus, tellus ac cursus commodo.\nTortor mauris condimentum nibh.\nUt fermentum massa justo sit amet risus.\nPraesent commodo cursus magna.\nVel scelerisque nisl consectetur et.")
            .fixedSize(horizontal: false, vertical: false)
            .border(.blue)
            .frame(width: 200, height: 200)
            .border(.pink)

其效果如下：

2.添加.fixedSize(horizontal: false, vertical: true) ideal height

Text("Curabitur blandit tempus porttitor.\nFusce dapibus, tellus ac cursus commodo.\nTortor mauris condimentum nibh.\nUt fermentum massa justo sit amet risus.\nPraesent commodo cursus magna.\nVel scelerisque nisl consectetur et.")
            .fixedSize(horizontal: false, vertical: true)
            .border(.blue)
            .frame(width: 200, height: 200)
            .border(.pink)

至于高度，它会尊重父节点，不会超出该区域。宽度受父节点限制，但高度可以无限增长，以适应其内容。

其效果如下：

3.添加.fixedSize(horizontal: true, vertical: false) ideal width

Text("Curabitur blandit tempus porttitor.\nFusce dapibus, tellus ac cursus commodo.\nTortor mauris condimentum nibh.\nUt fermentum massa justo sit amet risus.\nPraesent commodo cursus magna.\nVel scelerisque nisl consectetur et.")
            .fixedSize(horizontal: true, vertical: false)
            .border(.blue)
            .frame(width: 200, height: 200)
            .border(.pink)

这将使文本视图占据其理想宽度，即文本的最大宽度。在本例中就是第二句 “Fusce dapibus, tellus ac cursus commodo”。

其效果如下：

4.添加.fixedSize(horizontal: true, vertical: true)

Text("Curabitur blandit tempus porttitor.\nFusce dapibus, tellus ac cursus commodo.\nTortor mauris condimentum nibh.\nUt fermentum massa justo sit amet risus.\nPraesent commodo cursus magna.\nVel scelerisque nisl consectetur et.")
            .fixedSize(horizontal: true, vertical: true)
            .border(.blue)
            .frame(width: 200, height: 200)
            .border(.pink)

其效果如下：

我们可以发现，.fixedSize(horizontal: true, vertical: false) 和 .fixedSize(horizontal: true, vertical: true)的效果是一样的。

如果我们对Text添加.fixedSize(horizontal: true, vertical: true)，那么它的宽度和高度都会被限制在理想尺寸内。其达到的效果是固定视图的大小，使其完全显示其内容。不会因为父视图的尺寸而缩放或截断。

在SwiftUI中的常见使用场景

如果我们想让VStack中的元素自动对齐，我们可以在VStack中使用fixedSize修饰符

把我们需要对齐的子视图放在VStack中

VStack {
    Button {

    } label: {
        Text("Log in")
        .bold()
        .foreb
    }
}