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 中居中的点图像 （如 margin: 0 auto; in CSS）
外部 HStack 为 100% 宽度，左右边距为 10px （如宽度：100%；边距：自动 10px；在 CSS 中）

我想实现的特殊挑战是，给第二个 Bar() 视图一个百分比（或某个等效值），使其具有 1.00/35.69*100%。

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

几何阅读器 将其内容定义为其自身大小和坐标的函数的容器视图 space. 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 视图提供与父视图的大小关系。但是父级本身有不同的宽度和高度，我需要用一个高度为 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)
    }
}

SwiftUI 不同的子对齐和 GeometryReader

SwiftUI different children alignment and GeometryReader

xcode

alignment

swift

swiftui

geometryreader