ios - 设置 Text().frame(maxWidth: .infinity) 后如何保持文本作为前导对齐
问题描述
这可能是一个简单的案例,但我找不到解决方案。
这是我的代码,使用 GeometryReader 设置 SwiftUI 视图大小的相对布局,如 Image。在最后一个 VStack 上的问题,我想将 Text 的背景转到 VStack 的右端。因此,我将其设置为Text("Haibo: asdasd").frame(maxWidth: .infinity)
但之后我发现文本变为水平居中并且不遵循 VStack 对齐:.leading。
import SwiftUI
struct ContentView: View {
var body: some View {
GeometryReader { geo in
HStack(alignment: .top, spacing: 12) {
Image("Alan shore").resizable().frame(width: geo.size.width / 6, height: geo.size.width / 6).cornerRadius(4)
VStack(alignment: .leading, spacing: 10) {
// name
Text("Haibo")
// content
Text("Think ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink Think")
// 九宫格
VStack(spacing: 6) {
HStack(spacing: 6) {
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
}
HStack(spacing: 6) {
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
}
HStack(spacing: 6) {
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
}
}
// Time, Action
HStack {
Text("5 hour ago")
Spacer()
Image("moment-action")
}
// Comment
VStack(alignment: .leading) {
Text("Haibo: asdasd").frame(maxWidth: .infinity)
Text("Jobs: WDC WDC WDC WDCWWWWW")
} //.padding(.init(top: 6, leading: 6, bottom: 6, trailing: 12))
.background(Color.yellow)
.cornerRadius(3)
}
} .padding(.init(top: 12, leading: 12, bottom: 12, trailing: 30))
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
好吧,请看截图以便更好地理解,Text("Haibo: asdasd")
黄色区域居中。怎么可能让它一直领先对齐?
解决方案
这是 SwiftUI 的一个相当令人困惑的方面。VStack 对齐指定其元素如何在 VStack 框架内对齐,而 Text.frame 对齐指定文本将如何在 Text.frame 内对齐。
我发现在调试时添加一些边框很有帮助:
VStack(alignment: .leading) {
Text("Haibo: asdasd")
.frame(maxWidth: .infinity)
.border(Color.red , width: 2.0)
Text("Jobs: WDC WDC WDC WDCWWWWW")
.border(Color.green , width: 2.0)
}
现在您可以看到具有 maxWidth: .infinity 的 Text 有一个框架,该框架跨越了 VStack 框架的整个宽度。文本框架对齐前导,但其中的文本默认为居中对齐。
这里值得一提的是,“jobs...”文本也与其文本框架居中对齐,但这并不明显,因为框架仅针对文本调整大小,然后文本框架本身在 VStack 框架内对齐。
现在试试这个:
VStack(alignment: .leading) {
Text("Haibo: asdasd")
.frame(maxWidth: .infinity, alignment: .leading)
.border(Color.red , width: 2.0)
Text("Jobs: WDC WDC WDC WDCWWWWW")
.border(Color.green , width: 2.0)
}
文本框架仍然是 VStack 框架的全宽,但文本现在在文本框架内对齐。
这是没有边框的片段:
VStack(alignment: .leading) {
Text("Haibo: asdasd")
.frame(maxWidth: .infinity, alignment: .leading)
Text("Jobs: WDC WDC WDC WDCWWWWW")
}
这是一篇我发现有助于理清对齐方式的文章:
推荐阅读
- vim - E492:不是编辑器命令:NERDTree
- python - 在 PyQt5 和 PySide2 中覆盖paintEvent
- python - 如何在分发包外添加资源?
- bots - 僵尸电报
- mysql - 使用 SQL 查询如何获取两个单独的 MAX 值?
- .net - Windows Server 2016 和 .NET 3.5 上的 TLS 1.2
- php - 将 macOS 从 High Sierra 升级到 Mojave 后 PHP 无法正常工作
- c# - 头疼 - 出现间隙
- google-app-engine - Google App Engine 提供具有错误 mime 类型的静态 CSS 文件
- javascript - 在地址栏中调用 localhost 后是否有运行 NodeJS 的模块