SwiftUI中修饰符的顺序直接影响视图最终效果

WaywardOne2026-03-20 10:44

事情是这样的，我希望图片的底部有一条带背景的文字，大致像这个图

但是我写的控件一直只有文字有背景，不能铺满一整条，代码如下

objc 复制代码

var body: some View {

        VStack(alignment: .leading, spacing: 5) {

            ZStack(alignment: .bottomLeading) {

                KFImage(URL(string: product.coverUrl))

                    .resizable()

                    .aspectRatio(1/1.2, contentMode: .fit)

                    .frame(maxWidth: .infinity)

                    .cornerRadius(4)

                Text("结束时间 2999-99-99")

                    .padding(3)

                    .foregroundColor(.white)

                    .background(Color.black.opacity(0.5))

                    .frame(maxWidth: .infinity, alignment: .leading)
                    

            }
      }
}

实际效果：

然后就去问AI，AI给的结果如下

但是就算我把AI代码原原本本拷过来，任然是我截图的效果，为了这个问题一直问AI浪费了好一阵子时间。然后我突然想到官方关于padding()前后作用效果不同，突然想到我这也是同样的道理。

实际上这就是我按着OC思维惯性来开发UI,不理解 SwiftUI 中至关重要的知识点：

修饰符的顺序直接影响视图最终效果

只要我替换.frame和.background顺序就能实现我需要的效果了

并且AI虽然好用,但也不能太过于依赖，多思考。