带有 GeometryReader 和 paddings 的 SwiftUI HStack

在我的 iOS 应用程序中，我想放置两个宽度相同的视图，以便它们填充父视图的整个宽度。

为此，我使用 GeometryReader，它破坏了自动布局。但自动布局不起作用，并且不会自动计算该视图的高度。 TestView 的高度未确定，所以我无法手动添加框架大小......

它应该是这样的（我所期望的TestView):

这就是我将视图放在列表上时的样子（货币查看):

测试视图.swift

struct TestView: View {
    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                VStack(alignment: .leading, spacing: 0.0) {
                    Text("Name 1\n Test second name 2")
                        .font(.system(size: 18))
                        .fontWeight(.bold)
                    HStack {
                        Text("123")
                        Text(" + 5")
                    }
                }
                .padding(.horizontal, 12.0)
                .padding(.vertical, 9.0)
                .frame(width: geometry.size.width / 2)
                .background(RoundedRectangle(cornerRadius: 8.0)
                .foregroundColor(Color.blue
                                    .opacity(0.2)))

                VStack(alignment: .leading, spacing: 0.0) {
                    Text("Name 1")
                        .font(.system(size: 18))
                        .fontWeight(.bold)
                    HStack {
                        Text("123")
                        Text(" + 5")
                    }
                }
                .padding(.horizontal, 12.0)
                .padding(.vertical, 9.0)
                .frame(width: geometry.size.width / 2)
                .background(RoundedRectangle(cornerRadius: 8.0)
                .foregroundColor(Color.blue
                                    .opacity(0.2)))
            }
        }

    }
}

货币视图.swift

struct CurrenciesView: View {

    @State private var items: [Str] = (0..<5).map { i in

       return Str(title: "Struct  #\(i)")

    }

    var body: some View {
        NavigationView {
                    List {
                        Section(header:
                        TestView().listRowInsets(EdgeInsets())
                        ) {
                            ForEach(items) { item in
                                Text("asd")
                            }
                        }.clipped()

                    }
                    .navigationBarTitle("Section Name")
                    .navigationBarItems(trailing: EditButton())
                }
    }
}

您可以创建一个自定义PreferenceKey以及计算它的视图：

struct ViewSizeKey: PreferenceKey {
    static var defaultValue: CGSize = .zero

    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

struct ViewGeometry: View {
    var body: some View {
        GeometryReader { geometry in
            Color.clear
                .preference(key: ViewSizeKey.self, value: geometry.size)
        }
    }
}

然后，您可以在您的视图中使用它们。请注意，您需要使用@Binding in the TestView and @State private var headerSize在父视图中。否则，父视图将不会刷新，并且列表将无法正确重新计算标题大小。

struct CurrenciesView: View {
    @State private var items: [String] = (0 ..< 5).map(String.init)
    @State private var headerSize: CGSize = .zero

    var body: some View {
        NavigationView {
            List {
                Section(header:
                    TestView(viewSize: $headerSize)
                ) {
                    ForEach(items, id: \.self) {
                        Text($0)
                    }
                }.clipped()
            }
            .navigationBarTitle("Section Name")
            .navigationBarItems(trailing: EditButton())
        }
    }
}

struct TestView: View {
    @Binding var viewSize: CGSize

    var body: some View {
        HStack(spacing: 0) {
            VStack(alignment: .leading, spacing: 0.0) {
                Text("Name 1\n Test second name 2")
                    .font(.system(size: 18))
                    .fontWeight(.bold)
                HStack {
                    Text("123")
                    Text(" + 5")
                }
            }
            .padding(.horizontal, 12.0)
            .padding(.vertical, 9.0)
            .frame(width: viewSize.width / 2)
            .background(RoundedRectangle(cornerRadius: 8.0)
                .foregroundColor(Color.blue
                    .opacity(0.2)))

            VStack(alignment: .leading, spacing: 0.0) {
                Text("Name 1")
                    .font(.system(size: 18))
                    .fontWeight(.bold)
                HStack {
                    Text("123")
                    Text(" + 5")
                }
            }
            .padding(.horizontal, 12.0)
            .padding(.vertical, 9.0)
            .frame(width: viewSize.width / 2)
            .background(RoundedRectangle(cornerRadius: 8.0)
                .foregroundColor(Color.blue
                    .opacity(0.2)))
        }
        .frame(maxWidth: .infinity)
        .background(ViewGeometry()) // calculate the view size
        .onPreferenceChange(ViewSizeKey.self) {
            viewSize = $0 // assign the size to `viewSize`
        }
    }
}