SwiftUI 不同子项对齐和 GeometryReader

Question

我想将 Web 应用程序转换为 iOS 应用程序，但我正在为对齐和 GeometryReader() 苦苦挣扎。

这是我原来的网络应用程序模板的截图:


这是我在 SwiftUI 中的当前版本:

使用相关代码:

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 中居中的点图像(如边距:0 自动；在 CSS 中)

外部 HStack 为 100% 宽度，左右边距为 10px(如宽度:100%；边距:自动 10px；在 CSS 中)

我想实现的特殊挑战是，给第二个 Bar() View 一个百分比(或一些等价物)，使其具有 1.00/35.69*100% 的百分比。

在 Swift UI 的苹果文档中，我发现:

GeometryReader
一个容器 View ，将其内容定义为其自身大小和坐标空间的函数。 3

更改为:

Bar(backgroundColor: Color.gray, width: 200)
Bar(backgroundColor: Color.black, width: 200)

到

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 View 与父 View 具有大小关系。但是父级本身获得了不同的宽度和高度，我需要使用高度为 3 的框架来修复它，并且父级 HStack 会填满整个屏幕。

当我尝试这个时:

GeometryReader { g in
    Bar(backgroundColor: Color.gray, width: g.size.width)
    Bar(backgroundColor: Color.black, width: g.size.width*(1/35.69))
}

我完全出局了，因为条形以某种方式堆叠起来:

Answer 1

我认为这就是你想要的:

import SwiftUI

struct ContentView: View {
    var body: some View {

        GeometryReader { g in
            HStack {
                VStack(alignment: .leading, spacing: 3) {
                    Text("Adobe".uppercased())
                    Bar(backgroundColor: Color.gray, width: g.size.width)
                    Bar(backgroundColor: Color.black, width: g.size.width*(1/35.69))
                    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)
                    }
                    HStack {
                        Spacer()
                        Image(systemName: "dots")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 20)
                        Spacer()
                    }
                }
                .font(.system(size: 14))
                .padding()
            }
            .background(Color.white)
            .cornerRadius(15)
            .shadow(radius: 6, x: 5, y: 5)
        }
        .padding()
    }
}

struct Bar: View {

    var backgroundColor: Color
    var width: CGFloat

    var body: some View {
        Rectangle()
            .fill(backgroundColor)
            .frame(width: width, height: 3)
            .cornerRadius(1.5)
    }
}