ios - 如何在 SwiftUI 中创建此 View ？

Question

我正在尝试在 SwiftUI 中创建这样的 View (对不起，它太大了):


具体来说，我正在尝试在屏幕的顶部四分之一中构建标签/条形图栏的滚动行。对我来说，它看起来像一个水平滚动的 ScrollView，包含一些 X 的 barGraphItem，每个都是一个带有标签和彩色矩形的 VStack。然后将 VStack 旋转 270 度。

这是我到目前为止的代码:

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .bottom, spacing: 0) {
            Spacer()
            VStack(alignment: .leading, spacing: 0) {
                Text("Demo")
                    .font(.caption)
                    .fontWeight(.bold)

                Rectangle().foregroundColor(.orange)
                    .frame(width: 84, height: 10)
            }
            .rotationEffect(Angle(degrees: 270.0))

            VStack(alignment: .leading, spacing: 0) {
                Text("Demo")
                    .font(.caption)
                    .fontWeight(.bold)

                Rectangle().foregroundColor(.orange)
                    .frame(width: 84, height: 10)
            }
            .rotationEffect(Angle(degrees: 270.0))

            VStack(alignment: .leading, spacing: 0) {
                Text("Demo")
                    .font(.caption)
                    .fontWeight(.bold)

                Rectangle().foregroundColor(.orange)
                    .frame(width: 84, height: 10)
            }
            .rotationEffect(Angle(degrees: 270.0))

            VStack(alignment: .leading, spacing: 0) {
                Text("Demo")
                    .font(.caption)
                    .fontWeight(.bold)

                Rectangle().foregroundColor(.orange)
                    .frame(width: 84, height: 10)
            }
            .rotationEffect(Angle(degrees: 270.0))

            VStack(alignment: .leading, spacing: 0) {
                Text("Demo")
                    .font(.caption)
                    .fontWeight(.bold)

                Rectangle().foregroundColor(.orange)
                    .frame(width: 84, height: 10)
            }
            .rotationEffect(Angle(degrees: 270.0))

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这是它产生的东西(抱歉它太大了):


我怎样才能让 barGraphItems 更接近？
如何添加“预算”行？
如何在不滚动预算行的情况下使整个业务可滚动？

我认为屏幕上的其他元素我可以猜出来，但我整个下午都在摆弄这个条形图小部件，我很难过。

Answer 1

对有很多 View 的复杂容器应用旋转效果的问题是容器的布局没有改变，所以所有其他 View 都受到旋转容器的影响

它看起来更合适不同的方法。这个想法是将绘图条作为矩形，其中高度或矩形显示值，标签是此类矩形的转换叠加层，因此矩形形成布局，叠加层不会影响任何东西(几乎)。

使用 Xcode 11.4/iOS 13.4 测试

注意:预算线可以通过将两者都包裹到 ZStack 中来添加到绘图 ScrollView 上方。 .

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("Title above").font(.largeTitle)
            ContentView()
            Text("comment below")
        }
    }
}


struct ContentView: View {
    var plotHeight: CGFloat = 120

    // test with different lenth labels
    let demos = ["Demo", "Demoos", "Demoooos", "Demooooooos"]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(alignment: .bottom, spacing: 24) {
                ForEach(0..<20) {_ in
                    Rectangle().foregroundColor(.orange)
                        .frame(width: 14, height: CGFloat.random(in: 0..<self.plotHeight)) // values for demo
                        .overlay(
                            Text(self.demos.randomElement()!) // values for demo
                                .font(.caption)
                                .fontWeight(.bold)
                                .fixedSize()
                                .rotationEffect(Angle(degrees: 270.0), anchor: .leading)
                                .offset(x: -8, y: 6)  // align as/if needed here
                        , alignment: .bottomLeading)
                }
            }
            .frame(height: plotHeight, alignment: .bottom)
            .padding(.leading) // required offset for first label in scrollview
        }
    }
}