Question

我是swiftUI的菜鸟。我创建了一个正在使用的子视图。在VStack卡（汽车旁边）中，内部文本未与左侧等距对齐（例如150km和38ºc未对齐）。我希望卡片内的文本从卡片左侧离开10个间距后开始。我已将.padding(.left ,10)添加到卡中，但无法正常工作。我正在附上代码。如果我使用的方法错误，请纠正我。

struct CarInfoCard: View {
    @State var cardHeading = ""
    @State var cardUnit = ""
    @State var cardType = ""
    @State var cardNotify = false
    
    var body: some View {
        
        VStack{
           
            HStack {
                
                
                VStack(alignment: .leading){
                    
                    HStack(alignment: .lastTextBaseline, spacing: 2) {
                        Text(cardHeading)
                            .font(.system(size: 40, weight: .bold, design: .rounded))
                            .foregroundColor(Color("ColorButtonLogo"))
                        
                        Text(cardUnit)
                            .font(.system(size: 25, weight: .bold, design: .rounded))
                            .foregroundColor(Color("ColorButtonLogo"))
                    }
                    
                    
                    Text(cardType)
                        .font(.system(size: 20, design: .rounded))
                        .foregroundColor(Color("ColorButtonLogo"))
                    
                }
            }
            
        }
        .frame(width: 150, height: 90)
        .padding(.top,10)
        .padding(.bottom, 5)
//added padding to the left so that text always starts after spacing of 10. This does not work
        .padding(.leading, 10)
                
        .background(Color("ColorButton"))
        .cornerRadius(20)
    }
}

Answer 1

只需删除所有那些多余的堆栈，并为框架添加对齐方式，例如（用替换的颜色）

 VStack(alignment: .leading) {    // << here one !!

      HStack(alignment: .lastTextBaseline, spacing: 2) {
            Text(cardHeading)
                 .font(.system(size: 40, weight: .bold, design: .rounded))
                 .foregroundColor(Color.blue)

            Text(cardUnit)
                 .font(.system(size: 25, weight: .bold, design: .rounded))
                 .foregroundColor(Color.blue)
      }


      Text(cardType)
            .font(.system(size: 20, design: .rounded))
            .foregroundColor(Color.blue)

 }
.frame(width: 150, height: 90, alignment: .leading)   // << here !!
.padding(.top,10)
.padding(.bottom, 5)
.padding(.leading, 10)      // now customise as needed !!
.background(Color.yellow)
.cornerRadius(20)

如何从父视图为元素添加间距？

1 个答案: