在 SwiftUI 中，如何为条形图创建动态矩形？

Posted 2023-02-25

【中文标题】在 SwiftUI 中，如何为条形图创建动态矩形？

【英文标题】：In SwiftUI, how do I create a dynamic rectangle for a bar chart?

【发布时间】：2019-07-18 17:48:34

【问题描述】：

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

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

设置 .frame(width: UIScreen.main.bounds.width * percent, height:23) 会产生以下错误：对成员'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 中第一个矩形的宽度并计算一个百分比。如果可能的话，我希望它也能以横向模式自动更新。

【参考方案1】：

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

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

【讨论】：

哇，感谢您的快速响应，效果非常好！

似乎 Beta 5 在这个优雅的解决方案中打破了“var p = Path()”这一行。

是的，但我不会担心。他们已经在他们的发行说明中承认了这一点，所以我希望它会回到 beta 6。

太棒了！感谢您的信息。

有条形图库，你也可以看看github.com/dawigr/BarChart