Adding a Small Number to Each Button

Question

Tomato OP

Created Dec ’20

Replies 4

Boosts 0

Participants 2

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)
)

Boost

Answer 1

OOPer OP

Dec ’20

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)
    }
}

1

Answer 2

Tomato OP

Dec ’20

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.

0

Answer 3

Tomato OP

Dec ’20

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)
)

0

Answer 4

OOPer OP

Dec ’20

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

Please explain better if there is next chance.

0