Insert Image into RoundedRectangle()

Question

Created Feb ’22

Replies 1

Boosts 0

Views 3.3k

Participants 2

So, I have a RoundedRectangle() embedded inside a NavLink (see below) however I am trying to add a system Image to the RoundedRectangle() so the image appears in the center of the rectangle. If I place Image(systemName: "heart.fill") in any line between NavLink and .Fill, the heart shows up on the left / right of the rectangle or completely off screen. Any suggestions? Thanks.

 NavigationLink(destination: EmptyView()) {
            RoundedRectangle(cornerRadius: 25)
                                .fill(Color.newRed)
}

Answered by robnotyou in 704075022

There are a number of ways you could do this...

I would drop the RoundedRectangle, and use the Image as the navigation link

Give it some padding
Set the background color
Set the corner radius

NavigationLink(destination: EmptyView()) {
    Image(systemName: "heart.fill")
        .padding(100)
        .background(Color.red)
        .cornerRadius(25)
}

Alternatively, if you want to keep the RoundedRectangle (for some other reason) use a ZStack, like this:

NavigationLink(destination: EmptyView()) {
    ZStack {
        RoundedRectangle(cornerRadius: 25)
            .fill(Color.red)
        Image(systemName: "heart.fill")
    }
}

Boost

Answer 1

robnotyou OP

Feb ’22

Accepted Answer

There are a number of ways you could do this...

I would drop the RoundedRectangle, and use the Image as the navigation link

Give it some padding
Set the background color
Set the corner radius

NavigationLink(destination: EmptyView()) {
    Image(systemName: "heart.fill")
        .padding(100)
        .background(Color.red)
        .cornerRadius(25)
}

Alternatively, if you want to keep the RoundedRectangle (for some other reason) use a ZStack, like this:

NavigationLink(destination: EmptyView()) {
    ZStack {
        RoundedRectangle(cornerRadius: 25)
            .fill(Color.red)
        Image(systemName: "heart.fill")
    }
}

1