SwiftUI不同的子视图对齐方式和GeometryReader

Question

SwiftUI不同的子视图对齐方式和GeometryReader

swiftxcodealignmentswiftuigeometryreader

4

我想将网络应用程序转换为iOS应用程序，但我在对齐和GeometryReader()方面遇到了困难。

这是我原始的Web应用程序模板截图：

这是我在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中居中 (类似于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))
}

我完全跟不上了，因为这些栏目似乎被垂直叠放起来:

- T. Karter

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kuhlemann · Accepted Answer

我认为这就是你想要的：

。

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)
    }
}