SwiftUI - 视图从框架底部展开

Posted 2023-02-24

【中文标题】SwiftUI - 视图从框架底部展开

【英文标题】：SwiftUI - view expand from the bottom of frame

【发布时间】：2021-12-21 01:43:42

【问题描述】：

我想将多个值显示为从 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")")
        
      
    
  

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

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

任何帮助将不胜感激！

【参考方案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)
                        
                    
                )

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

【讨论】：

我得告诉你，我上周做了“与 SwiftUI Engineering 的对话”，有人问了“对齐与间隔”的问题。 SwiftUI 工程师喜欢间隔...