Hello there, I am working on a calculator app in SwiftUI, nor following any course, just on my own, and I have some super bad code for it, lol! You see I wanted the equals sign on the last row to be bigger where there are only 3 buttons, and I have achieved this:
The code stores a 2D array of button labels and makes them with the ForEach in a VStack and in a HStack. I literally just check if the current row == the last row (where this is happening) and then manually add it!
Here is the code:
import SwiftUI
struct CalculatorView: View {
@State private var calculation = "2+5x10"
@State private var answer: String? = "= 52"
private let gridSpacing: CGFloat = 10
private let buttonLabels: [[String]] = [
["x10ˣ", "²", "³", "√"],
["AC", "DEL", "( )", "+"],
["7", "8", "9", "-"],
["4", "5", "6", "/"],
["1", "2", "3", "*"],
["0", ".", "="]
]
var body: some View {
VStack(spacing: 30) {
//MARK: - Screen
ZStack(alignment: .topTrailing) {
RoundedRectangle(cornerRadius: 20)
.fill(.gray)
.opacity(0.2)
ScrollView(.horizontal) {
Text(calculation)
.padding()
}
if let answer = answer {
VStack {
Spacer()
HStack {
Spacer()
Text(answer)
.padding()
.fontWeight(.black)
}
.minimumScaleFactor(0.8)
}
}
}
.font(.largeTitle)
.frame(height: 200)
//MARK: - Buttons
VStack(spacing: gridSpacing) {
ForEach(buttonLabels, id: \.self) { row in
if row == ["0", ".", "="] {
HStack(spacing: gridSpacing) {
HStack(spacing: gridSpacing) {
ForEach(0..<row.count - 1, id: \.self) { i in
Button(row[i]) {
buttonPressed(row[i])
}
}
}
Button(row.last!) {
buttonPressed(row.last!)
}
}
} else {
HStack(spacing: gridSpacing) {
ForEach(row, id: \.self) { buttonLabel in
Button(buttonLabel) {
buttonPressed(buttonLabel)
}
}
}
}
}
}
.buttonStyle(CalculatorButtonStyle())
}
.padding(.horizontal, 30)
}
private func buttonPressed(_ label: String) {
}
}
struct CalculatorButtonStyle: ButtonStyle {
var cornerRadius: CGFloat = 10
func makeBody(configuration: Configuration) -> some View {
ZStack {
RoundedRectangle(cornerRadius: 10)
.fill(.green)
.opacity(configuration.isPressed ? 0.8 : 1)
configuration.label
.foregroundStyle(.white)
}
}
}
#Preview {
CalculatorView()
}
What I am wondering is if there is any better way to make the desired UI, without following my approach (manually adding the last row to the screen).
Thank you so much to any person willing to help me out, it is really appreciated!