ios - 当 HStack 中有不同大小的文本时,顶部对齐不适用于较大的文本
问题描述
我有一个包含多个元素的 HStack,尤其是两个Text
具有不同字体大小的 s。我希望两个文本都与视图顶部对齐。
HStack(alignment: .top) {
Image(systemName: "cloud.drizzle.fill")
Text("14°")
.font(.largeTitle)
Text("86%")
.font(.callout)
Spacer()
}
但是,第一个(较大的)Text
在其他两个下方输出:
解决方案
实际上它对齐正确,为每个添加背景Text
,您会发现框架Text
对齐正确
但是为了解决您正在寻找的案例,我通过一些计算为您做了一个 hack 。
结果:
1)两者的对齐Text
- 将它们合二为一
HStack
,与alignment: .firstTextBaseline
baselineOffset
然后通过添加一个with来播放第二个文本(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:我添加了背景以向您展示每个视图的真实框架
推荐阅读
- javascript - 如何在 Angular Material V6 中列出国际电话号码?
- jwt - 将 koa-jwt 与 koa-router 一起使用
- docker - Amazon 弹性容器服务 - 等效于 ECS 的 Kubernetes 活性/就绪性检查
- django - 参考“django.contrib.auth.urls”自定义特定模板
- c++ - bool 数据类型在 C++ 中是可移植的吗?
- python - 如何在 Pandas DataFrame 中对列表中的项目进行“与”操作
- java - 驱动器名称丢失!在 `*:\Software\JRE\bin\server\jvm.dll' 处缺少 `server' JVM
- ecmascript-6 - 对对象使用 rest 参数
- git - SVN 本地代码库到 Git 迁移?
- c# - 从 C# 执行 Mysql 存储过程查询