SwiftUI视图使用frame modifier的居中行为及内层对齐无效问题探究

先看你的代码：

Rectangle()
    .fill(Color.blue.opacity(0.5))
    .frame(width: 130)
    .frame(maxWidth: .infinity)
    .background(Color.orange.opacity(0.5))
    .padding()
    .frame(maxHeight:100)

1. 视图默认是否居中？ #

是的。在SwiftUI的布局系统中，当父视图提供的可用空间大于子视图的自身尺寸时，子视图默认会居中放置。这就是你看到蓝色矩形在橙色背景中央的核心原因。

2. 内层frame对齐修改无效的原因 #

你给内层的.frame(width: 130)添加对齐属性后没有效果，核心问题是这个frame的尺寸和内部Rectangle的尺寸完全匹配，没有多余空间供对齐发挥作用：

• Rectangle本身是可自适应尺寸的视图，当你给它加上.frame(width: 130)时，这个frame被设置为固定130宽度，而Rectangle会完全填满这个frame的空间（Rectangle默认会拉伸以填充父容器）。
• 对齐属性的作用是在父视图的可用空间内调整子视图的位置，但如果子视图已经占满了父视图的所有空间，无论设置什么对齐方式，视觉上都不会有变化——没有多余空间让子视图移动。

3. 外层frame对齐能生效的原因 #

外层的.frame(maxWidth: .infinity)是将宽度扩展到父容器能提供的最大宽度，此时这个frame的宽度远大于内部蓝色矩形的130宽度，存在大量多余空间。这时候设置alignment参数，就能控制内部内容（蓝色矩形所在的130宽frame）在这个大空间里的位置，进而改变蓝色矩形在橙色背景中的位置。

举个直观的例子，如果你修改内层frame的写法：

.frame(width: 130, height: 50)
.frame(width: 200, alignment: .trailing)

这时候外层200宽的frame比内层130宽的尺寸大，设置.trailing就会让蓝色矩形靠右对齐，你能明显看到效果——这也验证了：只有当父视图空间大于子视图时，对齐属性才会生效。

内容的提问来源于stack exchange，提问作者Deepak Sharma