У меня есть HStack с несколькими элементами, особенно с двумя Text
с разными размерами шрифта. Я хочу, чтобы оба текста были выровнены по верхней части представления.
HStack(alignment: .top) {
Image(systemName: "cloud.drizzle.fill")
Text("14°")
.font(.largeTitle)
Text("86%")
.font(.callout)
Spacer()
}
Однако первый (больший) Text
выводится ниже двух других:
На самом деле он выровнен правильно, добавьте фон к каждому Text
, и вы обнаружите, что рамка Text
выровнена правильно.
но чтобы решить дело, которое вы ищете, я сделал для вас хак, проведя некоторые вычисления
Результат:
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()
}
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()
}