Styling with VStack and HStacks so text align - WidgetKit SwiftUI

Question

I'm trying to get the last styling done on my Widget but I just can't seem to get the number "+1.75" and the Orange dot to align with the "Wheat" text. How do I properly align this row?

I've tried using Spacer() but it just doesn't seem to work?

struct CropPriceView: View {
    
    @Environment(\.widgetFamily) var family: WidgetFamily
    
    var body: some View {
        
        if family == .systemSmall{
            
            VStack{
                
                HStack{
                    
                    VStack{
                        
                        HStack{
                            Circle()
                                .fill(Color(#colorLiteral(red: 0.9333333333, green: 0.6784313725, blue: 0.262745098, alpha: 1)))
                                .frame(width: 10, height: 10)
                            
                            VStack(alignment: .leading){
                                Text("Wheat")
                                    .foregroundColor(Color(#colorLiteral(red: 0.168627451, green: 0.1647058824, blue: 0.1647058824, alpha: 1)))
                                    .font(Font.custom("TPFrank-Bold", size: 14))
                                    .lineSpacing(0.18)
                                
                                Text("MATIF")
                                    .font(Font.custom("TPFrank-Regular", size: 12))
                                    .foregroundColor(Color(#colorLiteral(red: 0.5921568627, green: 0.5921568627, blue: 0.5921568627, alpha: 1)))
                                    .lineSpacing(0.15)
                            }
                            Spacer()
                        }
                        
                    }
                    Spacer()
                    
                    Text("+1.75")
                        .foregroundColor(Color(#colorLiteral(red: 0.4431372549, green: 0.7490196078, blue: 0.3882352941, alpha: 1)))
                        .font(Font.custom("TPFrank-Medium", size: 14))
                        .lineSpacing(0.35)
                    
                }
                Spacer()
                
                HStack{
                    Spacer()
                    Text("168.02")
                        .foregroundColor(Color(#colorLiteral(red: 0.168627451, green: 0.1647058824, blue: 0.1647058824, alpha: 1)))
                        .font(Font.custom("TPFrank-Bold", size: 22))
                        .lineSpacing(0.55)
                }
            }.padding(EdgeInsets(top: 15, leading: 15, bottom: 15, trailing: 15))
            
        }
        
      }
  }

score 0 · Answer 1 · answered Feb 02 '21 at 15:37

0

Set HStack alignment: .top

var body: some View {
        
        if family == .systemSmall{
            VStack{
                HStack(alignment: .top) { //<<--Here
                    VStack{
                        HStack(alignment: .top) { //<<--Here

answered Feb 02 '21 at 15:37

Raja Kishan

16,767
2
26
52

It fixed the "+1.75" to align but not the Orange dot. – Nicolaj Spiegelhauer Feb 02 '21 at 15:50
Yes with the 2 HStack(alignment: .top)? – Nicolaj Spiegelhauer Feb 02 '21 at 16:49

cole · Accepted Answer · 2021-02-03T07:50:21.530

Hopefully this helps, let me know if it works for you. I believe you were looking for .firstTextBaseline to align with the first Text.

struct Example_WidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            HStack(alignment: .firstTextBaseline) {
                Image(systemName: "circle.fill")
                    .resizable()
                    .frame(width: 10, height:10)
                    .foregroundColor(Color.orange)
                VStack (alignment: .leading){
                    Text("Wheat")
                        .font(.subheadline)
                        .fontWeight(.bold)
                        .allowsTightening(true)
                    Text("MATIF")
                        .font(.footnote)
                        .fontWeight(.bold)
                        .foregroundColor(Color.secondary)
                        .allowsTightening(true)
                }
                Spacer()
                Text("+1.75")
                    .font(.footnote)
                    .fontWeight(.bold)
                    .foregroundColor(Color.green)
                    .allowsTightening(true)
            }
            Spacer()
            HStack {
                Spacer()
                Text("168.02")
                    .font(.title)
                    .fontWeight(.bold)
            }
        }
        .padding(.all, 10)
    }
}

Styling with VStack and HStacks so text align - WidgetKit SwiftUI

2 Answers2