问题描述
如果你有这样的事情。您会看到底部视图 rectangle 1
和 rectangle 2
彼此对齐。
HStack(spacing: 0) {
Rectangle()
.fill(Color.smashFrameStartup)
.overlay(
vstack {
Text("Data").font(.system(size: 100.0))
Text("rectangle 1")
}
)
Rectangle()
.fill(Color.smashOnShield)
.overlay(
vstack {
Text("Data").font(.system(size: 100.0))
Text("rectangle 2")
}
)
}
但是,一旦您将顶部文本从 "Data"
延长到 "Data 2"
或任何更长的时间,您就会看到顶部视图将底部视图进一步向下推。无论顶视图中文本的长度如何,如何阻止底视图进一步向下推?
这是更新后的代码以及会发生什么。
HStack(spacing: 0) {
Rectangle()
.fill(Color.smashFrameStartup)
.overlay(
vstack {
Text("Data").font(.system(size: 100.0))
Text("rectangle 1")
}
)
Rectangle()
.fill(Color.smashOnShield)
.overlay(
vstack {
Text("Data 2").font(.system(size: 100.0))
Text("rectangle 2")
}
)
}
是否可以定位文本视图使其不移动?无论上述文本视图在任一矩形上的长度如何,我都希望 rectangle 2
与 rectangle 1
对齐。
我还应该注意,如果上面的文本视图字符串像下面一样长,它会被截断,这是我不想要的。
HStack(spacing: 0) {
Rectangle()
.fill(Color.green)
.overlay(
vstack {
Text("Data").font(.system(size: 100.0))
Text("rectangle 1")
}
)
Rectangle()
.fill(Color.red)
.overlay(
vstack {
Text("Data 2 with even more information here").font(.system(size: 100.0))
Text("rectangle 2")
}
)
}
我还尝试将 minimumScaleFactor
与 0.4
添加在一起,它确实显示了整个文本而不会被截断,但它有同样的问题,它将底部文本视图进一步向下推。
HStack(spacing: 0) {
Rectangle()
.fill(Color.green)
.overlay(
vstack {
Text("Data").font(.system(size: 100.0))
Text("rectangle 1")
}
)
Rectangle()
.fill(Color.red)
.overlay(
vstack {
Text("Data 2 with even more information here").font(.system(size: 100.0))
.minimumScaleFactor(0.4)
Text("rectangle 2")
}
)
}
编辑:标准
- 让每个矩形中两个底部文本视图的位置彼此对齐,就像第一张图片和屏幕上的那个位置一样。
- 顶部文本视图的长度可以是可变的,无论是 2 个字符还是最多 40 个字符,都不应导致底部文本视图被进一步向下推。需要注意的是,与其他矩形中的顶部文本视图相比,顶部文本视图中的字符串长度可以是不同的长度。尽管如此,底部视图不应向下移动,它们仍应彼此对齐。
- 如果顶部视图文本字符串开始变得太长,只要我们不移动底部文本视图,就可以更改字体大小。为了显示所有文本。
- 顶视图中很长的字符串不应像第三张图片那样被截断。我尝试使用
minimumScaleFactor
修复此问题,截断的问题已修复,如第四张图片所示,但正如您所看到的,底部文本视图仍在移动。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)