带有 GeometryReader 和填充的 SwiftUI HStack

Question

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

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

它应该是这样的（我期望 TestView）：

这是我将视图放在列表中时的样子 (CurrenciesView)：

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

    }
}

CurrenciesView.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())
                }
    }
}

Answer 1

您可以创建自定义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)
        }
    }
}

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

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