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