代码之家 › 专栏 › 技术社区 › user1944491

如何在静态基线上绘制SwiftUI矩形?

baseline rectangles graphics swiftui

0

user1944491 · 技术社区 · 3 年前

我试图使用两个矩形来创建一个平衡控件,这两个矩形表示声音的左右平移值。首先,我使用滑块来输入值。无论我对几何体、基线和对齐做了什么,我都无法将矩形放在地板上。他们坚持要在太空中漂浮。我想改变高度,但不能从中间向外!

import Foundation
import SwiftUI

struct PanView: View {
  @Binding var value: Double
    
    var body: some View {
        HStack(spacing: 10) {
          leftBar
          rightBar
        }
    }
    
    private var leftBar: some View {
      Rectangle()
        .fill(Color(.green))
        .frame(width: barWidth,
               height: abs(value - 50),
               alignment: .bottom)
    }
    
    private var rightBar: some View {
      Rectangle()
        .fill(Color(.red))
        .frame(width: barWidth,
               height: abs(value + 50),
               alignment: .bottom)
    }
    
    private var barWidth: CGFloat {
      return 50 // Adjust the width as per your preference
    }
  }

struct PanView_Used: View {
  @State private var barValue:Double = 0.0
  
  var body: some View {
    VStack {
      Text("Bar Graph at \(Int(barValue))")
        .font(.title)
      
      PanView(value: $barValue)
      
      Slider(value: $barValue, in: -50...50, step:Double.Stride(1), onEditingChanged: {e in})
    }
  }
}

struct  PV_Previews: PreviewProvider {
  static var previews: some View {
    PanView_Used()
  }
}

可怕的结果如下所示。我怎样才能让这些东西静止不动??

1 回复 | 直到 3 年前

1

Yrb 3 年前

你没有给它任何对齐,所以它默认了。对于HStack,这意味着垂直居中。V定位默认为水平居中。添加适当的路线可以缓和视图。代码中的注释:

struct PanView: View {
    @Binding var value: Double
    
    var body: some View {
        // bottom align this HStack
        HStack(alignment: .bottom, spacing: 10) {
            leftBar
            rightBar
        }
    }
    
    ...

}

struct PanView_Used: View {
    @State private var barValue:Double = 0.0
    
    var body: some View {
        VStack {
            Text("Bar Graph at \(Int(barValue))")
                .font(.title)
            
            PanView(value: $barValue)
                // Frame this since you know the max height already, and bottom align it.
                .frame(height: 100, alignment: .bottom)
            
            Slider(value: $barValue, in: -50...50, step:Double.Stride(1), onEditingChanged: {e in})
        }
    }
}

编辑:

在平移视图中的HStack上也可以。

struct PanView: View {
    @Binding var value: Double
    
    var body: some View {
        // bottom align this HStack
        HStack(alignment: .bottom, spacing: 10) {
            leftBar
            rightBar
        }
                // Frame this since you know the max height already, and bottom align it.
                .frame(height: 100, alignment: .bottom)

    }