我想将网络应用程序转换为iOS应用程序,但我在对齐和GeometryReader()方面遇到了困难。
这是我原始的Web应用程序模板截图:
这是我在SwiftUI中的当前版本:
相关代码如下:
我完全跟不上了,因为这些栏目似乎被垂直叠放起来:
这是我原始的Web应用程序模板截图:
![enter image description here](https://istack.dev59.com/ZVwcM.webp)
![enter image description here](https://istack.dev59.com/LE0LL.webp)
struct PileRow: View {
var body: some View {
HStack() {
VStack(alignment: .leading, spacing: 3) {
Text("Adobe".uppercased())
Bar(backgroundColor: Color.gray, width: 200)
Bar(backgroundColor: Color.black, width: 200)
HStack(alignment: .top, spacing: 3) {
Text("EUR 1,00")
.fontWeight(.light)
Text(" / ")
.fontWeight(.light)
.foregroundColor(Color.gray)
Text("35,69")
.fontWeight(.light)
.foregroundColor(Color.gray)
}
Image("dots")
.resizable()
.scaledToFit()
.frame(width: 20)
}
.font(.system(size: 14))
.padding()
}
.background(Color.white)
.cornerRadius(15)
.shadow(radius: 6, x: 5, y: 5)
}
}
struct Bar: View {
var backgroundColor: Color
var width: CGFloat
var body: some View {
Rectangle()
.fill(backgroundColor)
.frame(width: width, height: 3)
.cornerRadius(1.5)
}
}
我希望:
- 点图像在父级VStack中居中 (类似于CSS中的 margin: 0 auto;)
- 外部HStack宽度为100%,具有左右10px的边距 (类似于CSS中的 width: 100%; margin: auto 10px;)
我想要实现的特殊挑战是,给第二个Bar()视图一个百分比值(或等效值),其宽度为1.00 / 35.69 * 100%。
在Swift UI的苹果文档中,我发现:
GeometryReader 一个容器视图,将其自身的大小和坐标空间定义为其内容的函数。3
改变前的代码:
Bar(backgroundColor: Color.gray, width: 200)
Bar(backgroundColor: Color.black, width: 200)
to
GeometryReader { g in
Bar(backgroundColor: Color.gray, width: g.size.width)
}
.frame(height: 3)
GeometryReader { g in
Bar(backgroundColor: Color.black, width: g.size.width*(1/35.69))
}
.frame(height: 3)
这接近我所寻求的:
我不理解这里正在发生什么。 我的目的是给Bar视图与父视图的大小关系,但父视图本身得到了不同的宽度和高度,我需要用一个高度为3的框架来修复,父HStack填满整个屏幕。
当我尝试这样做时:
GeometryReader { g in
Bar(backgroundColor: Color.gray, width: g.size.width)
Bar(backgroundColor: Color.black, width: g.size.width*(1/35.69))
}
我完全跟不上了,因为这些栏目似乎被垂直叠放起来: