使用 VStack 和 HStacks 设置样式以便文本对齐 - WidgetKit SwiftUI

Question

我正在尝试在我的 Widget 上完成最后的样式设置，但我似乎无法获得数字“+1.75”和与“Wheat”文本对齐的橙色圆点。如何正确对齐这一行？

我试过使用 Spacer() 但它似乎不起作用？

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))
            
        }
        
      }
  }

Answer 1

设置 HStack alignment: .top

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

Answer 2

希望这对您有所帮助，如果对您有用，请告诉我。我相信您正在寻找 .firstTextBaseline 以与第一个文本保持一致。

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)
    }
}

使用 VStack 和 HStacks 设置样式以便文本对齐 - WidgetKit SwiftUI

Styling with VStack and HStacks so text align - WidgetKit SwiftUI

widgetkit

swiftui