(The fix-ish was to move the .frame()
modifier below .background()
modifier. The full fix would involve me getting a Hogwart's certificate in SwiftUI. Jeez this stuff is confusing.)
I just want the two sliders to sit at the bottom of the square. If I put a frame with alignment: .bottom
, nothing happens. If I put a .frame(maxHeight: .infinity, alignment: .bottom)
, the sliders go where I want them, but then the background covers up the rest of the square. So, I have three primary questions:
- Is there an easy way to put the sliders at the bottom without calculating sizes and absolute positioning?
- Am I totally going about this all wrong? Usually when something is 10x harder than it should be, I find that I'm missing some important concept about the way the tools work
- What's your personal favorite "How do you do this thing that should be trivial?" site for SwiftUI?
struct TrundleCharacteristicsView: View {
@State private var wheelRadius = 0.75
@State private var wheelRotation = 1.0
@State private var penPosition = 1.0
var wheelIndicatorAngle: Angle {
let a = wheelRotation / 5.0
let b = a * Double.pi
let c = b / 2.0
return Angle(radians: c)
}
let darkBlue = Color(NSColor.blue.withAlphaComponent(0.5))
var body: some View {
ZStack {
Circle() // Full-scale indicator
.strokeBorder(darkBlue, lineWidth: 2)
.aspectRatio(1.0, contentMode: .fit)
Circle() // Current scale indicator
.strokeBorder(Color.blue, lineWidth: 3)
.aspectRatio(1.0, contentMode: .fit)
.scaleEffect(wheelRadius)
Rectangle() // Pen position indicator
.fill(Color.blue)
.cornerRadius(5)
.border(darkBlue, width: 1)
.frame(width: 4, height: 100)
.offset(y: -50)
.scaleEffect(CGSize(width: 1, height: penPosition), anchor: .init(x: 0.5, y: 0.5))
.rotationEffect(wheelIndicatorAngle, anchor: .init(x: 0.5, y: 0.5))
VStack {
Slider(value: $wheelRadius, in: 0...1.0)
.controlSize(.mini)
Slider(value: $penPosition, in: 0...1.0)
.controlSize(.mini)
}
// .frame(maxHeight: .infinity, alignment: .bottom)
.background(Color.black)
}
.frame(width: 200, height: 200)
}
}