问题描述
我正在尝试通过 vstacks/HStacks 或 LazyVGrid 创建一个 2x2 网格,以使每行上的方块适合屏幕。例如,第一个和第二个正方形各占屏幕宽度的一半,并根据该长度确定高度以使其成为正方形。我将如何以我提到的两种方式做到这一点,或者有更好的方法吗?这是我目前所拥有的。
vstack {
HStack {
Rectangle()
.fill(Color.gray)
.frame(width: 100,height: 100)
Rectangle()
.fill(Color.blue)
.frame(width: 100,height: 100)
}
HStack {
Rectangle()
.fill(Color.red)
.frame(width: 100,height: 100)
Rectangle()
.fill(Color.green)
.frame(width: 100,height: 100)
}
}
在这里对 frame 属性的宽度和高度进行硬编码感觉是错误的,或者这是消除方块之间间隙的方法?这种硬编码值的方式是否可以扩展到其他手机尺寸?
LazyVGrid(columns: layout) {
Rectangle()
.fill(Color.gray)
.frame(width: 210,height: 210)
Rectangle()
.fill(Color.blue)
.frame(width: 210,height: 210)
Rectangle()
.fill(Color.red)
.frame(width: 210,height: 210)
Rectangle()
.fill(Color.green)
.frame(width: 210,height: 210)
}
编辑:这是获得我想要的新代码的样子。
vstack(spacing: 0) {
HStack(spacing: 0) {
Rectangle()
.fill(Color.gray)
Rectangle()
.fill(Color.blue)
}
HStack(spacing: 0) {
Rectangle()
.fill(Color.red)
Rectangle()
.fill(Color.green)
}
}
.aspectRatio(1.0,contentMode: .fit)
现在让它与 LazyVGrid 一起工作。
解决方法
您可以使用 GeometryReader
,如here 所示。
示例用法:
struct MyView: View {
var body: some View {
GeometryReader { geo in
//You now have access to geo.size.width and geo.size.height
}
}
}
,
在这里对框架的宽度和高度进行硬编码感觉不对,或者这是消除方块之间间隙的方法?
要消除方块之间的间隙,只需修改 HStack / VStack 以包含间距:
HStack(alignment: .center,spacing: 0,content: {
Rectangle()
.fill(Color.gray)
.frame(width: 100,height: 100)
Rectangle()
.fill(Color.blue)
.frame(width: 100,height: 100)
})
,
只需应用aspectRatio
(值为1并适合屏幕)修饰符,无需指定任何框架。
VStack {
HStack {
Rectangle()
.fill(Color.gray)
Rectangle()
.fill(Color.blue)
}
HStack {
Rectangle()
.fill(Color.red)
Rectangle()
.fill(Color.green)
}
}
.aspectRatio(1.0,contentMode: .fit)