Adding a Small Number to Each Button

Let me suppose that I have a horizontal stack of six buttons like the following.

Code Block
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
VStack {
HStack(spacing: 0.0) {
Button("1") {
}
.buttonStyle(BorderlessButtonStyle())
.frame(width: 48, height: 48, alignment: .center)
.background(
RoundedRectangle(cornerRadius: 2)
.fill(Color.white)
.shadow(color: Color.black.opacity(0.4), radius: 2, x: 0, y: 0)
)
...
...
...
Button("6") {
}
.buttonStyle(BorderlessButtonStyle())
.frame(width: 48, height: 48, alignment: .center)
.background(
RoundedRectangle(cornerRadius: 2)
.fill(Color.white)
.shadow(color: Color.black.opacity(0.4), radius: 2, x: 0, y: 0)
)
}
}
}.frame(minWidth: 360, idealWidth: 360, maxWidth: 360, minHeight: 240, idealHeight: 240, maxHeight: 240, alignment: .center)
}
}


In the scenario above, each button is a size of 48 points x 48 points. And I want to add a small number at the top-left corner of each button. ('Small number' means a smaller font size than the button text size.) In Cocoa, it would be like adding (addSubView) an NSTextField object to an NSButton object. In SwiftUI, how can I add a small number to each button? Thank you.
Answered by Tomato in 652433022
Interestingly, there is a function called overlay.

Code Block
Button("1") {
}
.overlay(Text("4").font(.footnote).foregroundColor(.blue).offset(x: -16, y: -16))
.buttonStyle(BorderlessButtonStyle())
.frame(width: 48, height: 48, alignment: .center)
.background(
RoundedRectangle(cornerRadius: 2)
.fill(Color.white)
.shadow(color: Color.black.opacity(0.4), radius: 2, x: 0, y: 0)
)

How is this?
Code Block
struct ContentView: View {
@State var smallNumbers: [Int?] = [1, 2, 3, 4, 5, nil] //<- small number not shown for `nil`
var body: some View {
ZStack {
VStack {
HStack(alignment: .top, spacing: 0.0) { //<- Please do not miss
if let smallNumber = smallNumbers[0] {
Text("\(smallNumber)")
//Arrange your text as you like
.font(.footnote)
}
Button("1") {
}
.buttonStyle(BorderlessButtonStyle())
.frame(width: 48, height: 48, alignment: .center)
.background(
RoundedRectangle(cornerRadius: 2)
.fill(Color.white)
.shadow(color: Color.black.opacity(0.4), radius: 2, x: 0, y: 0)
)
//...
//...
//...
if let smallNumber = smallNumbers[5] {
Text("\(smallNumber)")
.font(.footnote)
}
Button("6") {
}
.buttonStyle(BorderlessButtonStyle())
.frame(width: 48, height: 48, alignment: .center)
.background(
RoundedRectangle(cornerRadius: 2)
.fill(Color.white)
.shadow(color: Color.black.opacity(0.4), radius: 2, x: 0, y: 0)
)
}
}
}.frame(minWidth: 360, idealWidth: 360, maxWidth: 360, minHeight: 240, idealHeight: 240, maxHeight: 240, alignment: .center)
}
}


Thank you, OOPer. The concern that I had with Text is that the string won't be necessarily placed inside the corresponding button. If I use your code, a small number will appear to the left of the corresponding button, not inside the corresponding button. I'm sorry if I failed to explain my needs initially.
Accepted Answer
Interestingly, there is a function called overlay.

Code Block
Button("1") {
}
.overlay(Text("4").font(.footnote).foregroundColor(.blue).offset(x: -16, y: -16))
.buttonStyle(BorderlessButtonStyle())
.frame(width: 48, height: 48, alignment: .center)
.background(
RoundedRectangle(cornerRadius: 2)
.fill(Color.white)
.shadow(color: Color.black.opacity(0.4), radius: 2, x: 0, y: 0)
)

I'm sorry if I failed to explain my needs initially.

Please explain better if there is next chance.
Adding a Small Number to Each Button
 
 
Q