ios - 如何在 SwiftUI 中将项目与 VStack 内的顶部对齐?
问题描述
我刚开始使用 swiftui,但在 ui 对齐方面遇到了问题。以下代码从图像顶部创建一个空间
VStack(alignment: .leading) {
Image(item.imageUrl)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 72, height: 72, alignment: .top).padding(.top,0)
Text("\(item.name)").font(Font.system(size:12, design: .default))
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity).lineLimit(2)
}
}
我可以看到 VStack 接受 param alignment
,但它是水平对齐的。我需要的是图像应该贴在其超级视图的顶部。有没有办法在不使用 Spacer() 的情况下做到这一点。
就像在 react-native 中一样,我们曾经有 justifyContent 和 alignItems 用于儿童的水平和垂直对齐。
更新:
Text 或任何视图也存在同样的问题。例如,此代码将两个文本放在视图的中心
VStack(alignment: .leading, spacing: 0) {
Text("line 1")
Text("line 2")
}
VStack 中的参数对齐用于水平对齐。
现在要将这些文本对齐到顶部,我能想到的唯一方法是这样引入Spacer()
:
struct MyCustomView:View {
var body: some View {
VStack(alignment: .leading, spacing: 0) {
Text("line 1")
Text("line 2")
Spacer()
}
}
这确实暂时解决了问题:
但是间隔器会在复杂视图中产生问题,假设另一个开发人员想要在我的视图下方添加一个自定义视图(在本例中为第 3 行),间隔器将在两者之间创建额外的空间
VStack {
MyCustomView()
Text("line 3")
}
有没有更好的方法让我的子视图(和后续视图)在 VStack 中保持与顶部对齐而没有间隔?
解决方案
您可以尝试使用.frame()
修饰符VStack()
在其超级视图中制作完整尺寸。在框架中,您可以对齐您的内容topLeading
var body: some View {
VStack(alignment: .leading, spacing: 0) {
Text("line 1")
Text("line 2")
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
.border(Color.red)
}
该解决方案不需要垫片
推荐阅读
- web - ODWEK 客户端升级 9.0 到 10.1,客户端服务器上的安装?
- python - 比较两个字符串及其索引,查看是否所有字符串 2 都在字符串 1 中,顺序相同但字母不同
- webpack - Angular CLI 代理:将不安全的本地 websocket 重定向到安全的远程 websocket
- mysql - 将 MySQL 查询结果插入表时如何设置字段的值
- go - Go mod tidy 从 go.mod 中删除 linter
- python - 如何让 python 能够访问网络
- python - 为在 Gunicorn 上运行的 Flask-SQLAlchemy 应用程序选择 DB pool_size
- sql - 如何使用带有 MONEY 数据类型的 WHERE 子句?
- javascript - 包含的页面 javascript 范围
- python - Python 正则表达式忽略空行