SwiftUI解决Shape自动占据多余空间问题

SwiftUI里的RoundedRectangle这类Shape默认会尽可能填充父容器的可用空间，这就是蓝色圆角矩形占满多余空间的原因。下面提供两种修复方式：

最优方案：用Text的background替代ZStack #

直接让圆角矩形作为Text的背景，它会自动适配文字大小，无需额外调整：

HStack{
    Text("\(laRow.pos1)")
        .foregroundStyle(.white)
        .bold()
        .padding(4) // 调整内边距让圆角和文字间距更自然
        .background(
            RoundedRectangle(cornerRadius: 5)
                .fill(.blue)
        )
    if(laRow.pos2 != ""){
        Text("\(laRow.pos2)")
            .foregroundStyle(.white)
            .bold()
            .padding(4)
            .background(
                RoundedRectangle(cornerRadius: 5)
                    .fill(.blue)
            )
    }
    Spacer()
}

备选方案：保留ZStack并限制Shape宽度 #

如果一定要用ZStack嵌套，给RoundedRectangle添加frame修饰符，让它只在水平方向包裹内部Text：

ZStack(alignment: .center){
    RoundedRectangle(cornerRadius: 5)
        .fill(.blue)
        .frame(maxWidth: .infinity, alignment: .leading)
    Text("\(laRow.pos1)")
        .foregroundStyle(.white)
        .bold()
        .padding(1)
}

完整修改后的代码 #

VStack{
    HStack(alignment: .top){
        VStack{
            Text("\(laRow.emNum).")
        }.padding(.trailing, 5)
        VStack(alignment: .leading){
            Text("\(laRow.emName)")
                .bold()
            HStack{
                Text("\(laRow.pos1)")
                    .foregroundStyle(.white)
                    .bold()
                    .padding(4)
                    .background(
                        RoundedRectangle(cornerRadius: 5)
                            .fill(.blue)
                    )
                if(laRow.pos2 != ""){
                    Text("\(laRow.pos2)")
                        .foregroundStyle(.white)
                        .bold()
                        .padding(4)
                        .background(
                            RoundedRectangle(cornerRadius: 5)
                                .fill(.blue)
                        )
                }
                Spacer()
            }
            Text("\(laRow.emEmail)")
            if(laRow.emPhone != ""){
                Text("\(laRow.emPhone)")
            }
        }
        VStack{
            Menu{
                Button(action: {}, label: {
                    Text("View Profile")
                })
                Button(action: {}, label: {
                    Text("Send PIN")
                })
                Divider()
                Button(role: .destructive, action: {}, label: {
                    Text("Terminate Employee")
                        .foregroundStyle(.red)
                })
            }label: {
                ZStack{
                    RoundedRectangle(cornerRadius: 5)
                        .fill(Color(red: 80.0 / 255, green: 80.0 / 255, blue: 80.0 / 255))
                        .frame(width:50, height: 32)
                    Image(systemName: "ellipsis")
                        .foregroundStyle(.white)
                        .font(.system(size: 30))
                }
            }
        }.padding(.leading, 5)
    }.padding()
    Line()
        .stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
        .frame(height: 1)
}

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