SwiftUI

Question

我想将多个值显示为从 0 到 1 的连续值。我希望它们从下往上增长，从 0 显示无值，到 1 显示完整高度。

但是，我无法让它“从底部生长”。我不确定用什么更好的术语来形容它 - 这是一个非常简单的垂直仪表，就像汽车中的油表一样。我能够让它从中间长出来，但似乎找不到让它从底部长出来的方法。我玩过 mask 和 clipShape 以及 overlay - 但必须可以通过简单的 View 和计算其高度来做到这一点。我特别希望能够显示重叠的仪表，如下图所示。

我的ContentView.swift如下：

import SwiftUI

struct ContentView: View {

  // binding values with some defaults to show blue over red
  @State var redPct: CGFloat = 0.75
  @State var bluePct: CGFloat = 0.25

  let DISP_PCT = 0.8 // quick hack - the top "gauge" takes this much so the sliders display below

  var body: some View {
    GeometryReader { geom in
      VStack {
        ZStack {

          // neutral background
          Rectangle()
            .fill(Color.gray)
            .frame(width: geom.size.width, height: geom.size.height * DISP_PCT)

          // the first gauge value display
          Rectangle()
            .fill(Color.red)
            .frame(width: geom.size.width, height: geom.size.height * DISP_PCT * redPct)

          // the second gauge value, on top of the first
          Rectangle() 
            .fill(Color.blue)
            .frame(width: geom.size.width, height: geom.size.height * DISP_PCT * bluePct)
        }

        HStack {
          Slider(value: self.$redPct, in: 0...1)
          Text("Red: \(self.redPct, specifier: "%.2f")")
        }

        HStack {
          Slider(value: self.$bluePct, in: 0...1)
          Text("Red: \(self.bluePct, specifier: "%.2f")")
        }
      }
    }
  }
}

当您使用滑块时，red/blue 视图会从中间“向外”延伸。我希望它们从包含视图的底部“向上”生长。

我觉得这句话措辞不当 - 如果需要任何说明，请随时提问！

如有任何帮助，我们将不胜感激！

Answer 1

您不能将它们全部放在同一个堆栈中。最简单的方法是让你的灰色矩形成为你的案例视图，然后在 VStacks 中用 Spacers 覆盖其他顶部，如下所示：

            // neutral background
            Rectangle()
                .fill(Color.gray)
                .frame(width: geom.size.width, height: geom.size.height * DISP_PCT)
                .overlay (
                    ZStack {
                        VStack {
                            Spacer()
                            
                            // the first gauge value display
                            Rectangle()
                                .fill(Color.red)
                                .frame(width: geom.size.width, height: geom.size.height * DISP_PCT * redPct)
                        }
                        VStack {
                            Spacer()
                            // the second gauge value, on top of the first
                            Rectangle()
                                .fill(Color.blue)
                                .frame(width: geom.size.width, height: geom.size.height * DISP_PCT * bluePct)
                        }
                    }
                )

叠加层包含它们，垫片将您的矩形向下推到堆栈的底部。

SwiftUI - 从框架底部展开视图

SwiftUI - view expand from the bottom of frame

swiftui-state

swiftui-view