0

我正在使用两个 Stack 并且我有一个 UIViewRepresentable ,我想将它放在第一个堆栈中,但是对于宽度和高度,我使用 GeometryReader 来获取宽度和高度,以便 UIViewRepresentable 将在第一个堆栈中。同样在第二个堆栈中,我有一个 Rectangle,我还想将 Rectangle 的宽度大小设置为与第二个堆栈相同,因此我再次使用了 GeometryReader,现在这个影响了第一个堆栈中 UIViewRepresentable 的帧大小。

我正在使用iOS 13.4Xcode 11.4

第一个视图和第一个堆栈:

struct BAverage: View {
    @State var bAvg = [10.3, 13.4]

    var body: some View {

        VStack(alignment: .leading, spacing: 0) {

            // MARK: Card Header
            HStack {
                Text("B Average")
                    .bold()
                    .font(.headline)
                Spacer()
            }
            .padding([.top, .horizontal])


            // MARK: Chart
            HStack {
                Spacer()
                GeometryReader { p in
                    LineChartSwiftUI(bAvg: self.$bAvg)
                        .frame(width: p.size.width, height: p.size.height)
                }
                VStack {
                    Text("Average".uppercased())
                        .bold()
                        .font(.system(size: 12))
                        .padding(.top, 10)
                    Text(String(self.bAvg.max() ?? 0.0))
                        .padding()                        
                }
                Spacer()
            }

        }
        .background(Color.green)
        .padding(.horizontal)

    }
}

第二视图和第二堆栈:

struct CAverage: View {

    @State var valee = 80


    var body: some View {
        VStack(alignment: .leading, spacing: 0) {

            // MARK: Card Header
            HStack {
                Text("CAverage")
                    .bold()
                    .font(.headline)
                Spacer()
            }
            .padding()

            // MARK: Chart and Average Temp
            HStack {
                Spacer()
                Text("0")
                GeometryReader { (proxy) in
                    Rectangle()
                        .foregroundColor(Color("Main"))
                        .frame(width: proxy.size.width, height: 4)
                }
                Text("100")
                VStack {
                    Text("LINE")
                }
                Spacer()
            }

        }
        .background(Color.red)
        .padding(.horizontal)
    }
}

然后我在另一个视图中使用这两个视图:

struct ContentView: View {
    var body: some View {
        NavigationView {

            ScrollView {
                    VStack {
                        BAverage()


                        Spacer()
                    }

            }
                // NavigationView Settings
                .navigationBarTitle("Status", displayMode: .automatic)
                // Accent Color
                .accentColor(Color("Main"))
        }
    }
}

您还可以在下图中看到: 没有将Caverage() 放在 ContentView 中: 没有将 Caverage() 放在 ContentView 中

Caverage() 放入 ContentView 后: 将 Caverage() 放入 ContentView 后

4

0 回答 0