在 Z 和 HStack 中添加 2 个背景？

问题描述

color.red 是我的小部件主背景，但我想在文本“Line1”和图像“2”后面的顶部添加黑色背景。所以基本上是一个在文本和图像下方横跨顶部的黑条。

var body: some View {
    ZStack {
        Color.red
        
        vstack(alignment: .leading,spacing: 0) {
            HStack {
                Text("Line1")
                    .foregroundColor(.orange)
                    .bold()
                    .font(.system(size: 17.5))
                    .padding(.top)
                Spacer()
                
                Image("2")
                    .resizable()
                    .frame(width: 25,height: 25)
                    .padding(.top)
                
            }
            .padding(.horizontal)
            .border(Color.green)
            
            vstack(alignment: .leading) {
                Image("2")
                    .resizable()
                    .frame(width: 67,height: 30)
                
                Text("State")
                    .foregroundColor(Color.green)
                    .font(.system(size: 15))
                
                Text("1")
                    .foregroundColor(Color.blue)
                    .font(.system(size: 10))
                    .opacity(0.5)
                
                Spacer()
                Spacer()
            }
            .padding(.horizontal)
            .border(Color.blue)
        }
    }
}

解决方法

您可以为第一个 .background 添加 HStack 修饰符：

HStack {
    //content here             
}
.padding(.horizontal)
.border(Color.green)
.background(Color.black)

请记住，修饰符的顺序很重要，因此如果您将 background 放在内边距之前，内边距将不会具有该背景颜色 -- 这就是我最后使用它的原因。