在 SwiftUI 中，如何为条形图创建动态矩形? [英] In SwiftUI, how do I create a dynamic rectangle for a bar chart?

问题描述

我正在尝试创建一个自定义百分比条形图，如下所示

I'm trying to create a custom percentage bar chart like the one below

但是，我无法以编程方式设置条宽，我做错了什么?

however, I'm unable to set the bar width programmatically, what am I doing wrong?

设置 .frame(width: UIScreen.main.bounds.width * percent, height:23) 会产生以下错误:对成员 'frame(width:height:alignment:)' 的不明确引用

Setting .frame(width: UIScreen.main.bounds.width * percent, height:23) produces the following error : Ambiguous reference to member 'frame(width:height:alignment:)'

import SwiftUI

struct BarChartView : View {
    @Binding var percent: Float

    init(percentage: Binding<Float>){
        self._percent = percentage
    }

    var body: some View {

            ZStack {
                Rectangle().fill(Color.yellow).frame(height: 30).border(Color.black, width:1)
                HStack {
                        RoundedRectangle(cornerRadius: 5)
                            .fill(Color.green).frame(width: 300, height:23).padding(2)
                    Spacer()
                }

                HStack {
                    Text("Bar Chart View").padding (2)
                    Spacer()
                    Text("\(String(format: "%02.f", arguments: [self.percent]))%")
                }

            }
        }

}

有没有办法确定 ZStack 中第一个矩形的宽度并计算其百分比.如果可能，我也希望它在横向模式下自动更新.

Is there a way to determine the width of the first rectangle in the ZStack and calc a percentage off of that. I would like this to automatically update in landscape mode too, if possible.

推荐答案

你可以使用 GeometryReader 来处理尺寸，但在这种情况下，我认为使用形状更合适:

You could use GeometryReader to play with dimensions, but in this case I think using a shape is a much better fit:

import SwiftUI

struct BarChartView : View {
    @Binding var percent: Float

    init(percentage: Binding<Float>){
        self._percent = percentage
    }

    var body: some View {

        HStack {
            Text("Bar Chart View").padding (5)
            Spacer()
            Text("\(String(format: "%02.f", arguments: [self.percent * 100]))%").padding(5)
        }
        .background(LeftPart(pct: CGFloat(percent)).fill(Color.green))
        .background(RightPart(pct: CGFloat(percent)).fill(Color.yellow))
        .padding(10)
    }

    struct LeftPart: Shape {
        let pct: CGFloat

        func path(in rect: CGRect) -> Path {
            var p = Path()
            p.addRoundedRect(in: CGRect(x: 0, y: 0, width: rect.size.width * pct, height: rect.size.height), cornerSize: .zero)
            return p
        }
    }

    struct RightPart: Shape {
        let pct: CGFloat

        func path(in rect: CGRect) -> Path {
            var p = Path()
            p.addRoundedRect(in: CGRect(x: rect.size.width * pct, y: 0, width: rect.size.width * (1-pct), height: rect.size.height), cornerSize: .zero)
            return p
        }
    }

}

struct ContentView: View {
    var body: some View {
        BarChartView(percentage: .constant(0.75))
    }
}

这篇关于在 SwiftUI 中，如何为条形图创建动态矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！