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

当您使用滑块时，红色/蓝色视图会从中间“向外”增长。我希望他们从包含视图的底部“长大”。

我觉得这措辞不好 - 如果需要任何澄清，请不要犹豫！

任何帮助将不胜感激！

Answer 1

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

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

叠加层包含它们，并且间隔将您的矩形向下推到堆栈的底部。