Когда в HStack есть текст разного размера, выравнивание по верхнему краю не применяется к тексту большего размера

У меня есть HStack с несколькими элементами, особенно с двумя Text с разными размерами шрифта. Я хочу, чтобы оба текста были выровнены по верхней части представления.

HStack(alignment: .top) {
    Image(systemName: "cloud.drizzle.fill")
    Text("14°")
        .font(.largeTitle)
    Text("86%")
        .font(.callout)
    Spacer()
}

Однако первый (больший) Text выводится ниже двух других:


172
2

Ответы:

Решено

На самом деле он выровнен правильно, добавьте фон к каждому Text, и вы обнаружите, что рамка Text выровнена правильно.

но чтобы решить дело, которое вы ищете, я сделал для вас хак, проведя некоторые вычисления

Результат:

1) Выравнивание двух Text

  • Поместите их обоих в один HStack , с alignment: .firstTextBaseline
  • Затем поиграйте со вторым текстом, добавив baselineOffset с (bigFont.capHeight - smallFont.capHeight).

Вы можете узнать больше о шрифтах, но основная информация, которая вам нужна, такова:

Итак, ваш код будет:

 HStack(alignment: .firstTextBaseline) {
                Text("14°")
                    .font(Font(bigFont))
                    .background(Color.blue)
                
                Text("86%")
                    .font(Font(smallFont))
                    .baselineOffset((bigFont.capHeight - smallFont.capHeight))
                    .background(Color.yellow)
                Spacer()
            }

2) Выровняйте изображение с текстом:

  • добавив отступ, который будет равен bigFont.lineHeight-bigFont.ascender (вернитесь к изображению сверху, чтобы увидеть, как я его вычислил)

И окончательный код:

struct ContentView: View {
    @State var pickerSelection = ""
    
    let bigFont = UIFont.systemFont(ofSize: 50)
    let smallFont = UIFont.systemFont(ofSize: 15)
    
    var body: some View {
        HStack(alignment:.top) {
            Image(systemName: "cloud.drizzle.fill")
                .background(Color.red)
                .padding(.top, bigFont.lineHeight-bigFont.ascender)
            HStack(alignment: .firstTextBaseline) {
                Text("14°")
                    .font(Font(bigFont))
                    .background(Color.blue)
                
                Text("86%")
                    .font(Font(smallFont))
                    .baselineOffset((bigFont.capHeight - smallFont.capHeight))
                    .background(Color.yellow)
                Spacer()
            }
        }
    }
}

PS: я добавил фоны, чтобы показать вам реальные кадры каждого вида


В настоящее время тексты выровнены по верхнему краю. но у большого текста высота подъема больше, чем у мелкого текста. поэтому выравнивание не является верхним текстом. К сожалению, SwiftUI не поддерживает выравнивание по верху текста. Но вы можете выровнять верхнюю часть текста вручную, как показано в следующем коде.

HStack(alignment: .top) {
    Image(systemName: "cloud.drizzle.fill")
    Text("14°")
        .font(.largeTitle).padding(.top, -5.0)
    Text("86%")
        .font(.callout)
    Spacer()
}