SwiftUI中aspectRatio修饰符为何对ZStack无效果？

问题出在ZStack的尺寸逻辑上：默认情况下ZStack会紧紧包裹子视图（这里就是那个Text），没有多余的空间供aspectRatio调整比例，所以这个修饰符自然起不了作用。

给你几个可行的解决办法：

方法一：让ZStack填充父容器空间 #

给ZStack加上frame(maxWidth: .infinity, maxHeight: .infinity)，让它先占满父视图的可用空间，之后aspectRatio就能基于这个空间来约束比例了：

var body: some View {
    ZStack {
        Text("Hi!")
            .font(.title)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .aspectRatio(16/9, contentMode: .fit)
    .background(.yellow)
}

方法二：把比例约束加在背景色上 #

把黄色背景放在ZStack内部，给Color加上aspectRatio，这样ZStack会跟着背景色的尺寸走，自动形成16:9的比例：

var body: some View {
    ZStack {
        Color.yellow
            .aspectRatio(16/9, contentMode: .fit)
        Text("Hi!")
            .font(.title)
    }
}

方法三：手动计算尺寸 #

用GeometryReader获取父容器的宽度，然后按16:9的比例算出高度，直接给ZStack设置frame：

var body: some View {
    GeometryReader { geo in
        ZStack {
            Text("Hi!")
                .font(.title)
        }
        .frame(width: geo.size.width, height: geo.size.width * 9/16)
        .background(.yellow)
    }
}

以上几种方法都能让你的ZStack按照16:9的比例显示，黄色背景也会对应这个比例。

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