SwiftUI中VStack左侧未知空白/内边距问题解决

问题描述 #

重构SwiftUI视图时，使用ZStack添加背景，上层VStack作为覆盖层，但VStack左侧出现未知空白，需要让包含Category、Value的VStack完全靠左对齐。

原代码 #

ZStack(alignment: .leading) {
            Image("e1")
                .resizable()
                .scaledToFill()
                .frame(width: 176, height: 180)
            
            VStack {
                Spacer()

                    VStack(alignment: .leading) {
                        Text("Category")
                        Text("Value")
                        HStack {
                            Text("Days until Task")
                            Text("2")
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .background(Color.gray)
                    .opacity(0.8)
            }
        }
        .frame(width: 176, height: 180)
        .background(Color(hue: 0.0, saturation: 0.599, brightness: 0.831))
        .clipShape(RoundedRectangle(cornerRadius: 8))

问题截图 #

解决方法 #

问题根源在于上层VStack未占满ZStack的全部宽度，且未设置左对齐，导致内部灰色背景VStack无法贴合左侧边缘。修改方式如下：

1. 给上层VStack添加frame(maxWidth: .infinity, maxHeight: .infinity)，使其占满ZStack的整个空间
2. 给上层VStack设置alignment: .leading，确保内部子视图靠左对齐

修改后的完整代码：

ZStack(alignment: .leading) {
    Image("e1")
        .resizable()
        .scaledToFill()
        .frame(width: 176, height: 180)
    
    VStack(alignment: .leading) {
        Spacer()

        VStack(alignment: .leading) {
            Text("Category")
            Text("Value")
            HStack {
                Text("Days until Task")
                Text("2")
            }
        }
        .frame(maxWidth: .infinity)
        .background(Color.gray)
        .opacity(0.8)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}
.frame(width: 176, height: 180)
.background(Color(hue: 0.0, saturation: 0.599, brightness: 0.831))
.clipShape(RoundedRectangle(cornerRadius: 8))

修改后，灰色背景的VStack会完全贴合ZStack左侧边缘，内部文本保持左对齐，左侧空白被消除。

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