Can I round the corners of an HStack's background without clipping the content inside of it?

Viewed 2085

I'm developing an app in which I use a tab bar br using HStack{} with Button functions inside of it as shown here: https://i.stack.imgur.com/18Amd.png and I'm trying to round the corners of the bar.

I've tried using .clipShape(RoundedRectangle(cornerRadius:20)) but it will cut out any content outside of the bounds of the background: https://i.stack.imgur.com/zVZb6.png.

Is there a way to round the corners of the HStack background without clipping out the buttons inside of it?

I'm using Xcode 12.0 with SwiftUI.

The code that I'm using is here:

struct TabBar: View {

@Binding var selectedTab : Int

//To assign item color when selected
@State var icon = "unSelect"

var body: some View {
   
    //Icon Design
    HStack(alignment: .center) {
        Group {

            //Home Icon
            Button(action: {
                self.selectedTab = 0
            }) {
                HStack(spacing: 5) {
                    Image("Home").resizable()
                        .frame(width: 40, height: 40)
                }
                .padding(5)
            }
            .foregroundColor(self.selectedTab == 0 ? Color("Select") : Color("unSelect"))
            
            //Chart Icon
            Button(action: {
                self.selectedTab = 1
            }) {
                HStack(spacing: 5) {
                    Image("Chart").resizable()
                        .frame(width: 40, height: 40)
                }
                .padding(5)
            }
            .foregroundColor(self.selectedTab == 1 ? Color("Select") : Color("unSelect"))

            //Add Icon
            Button(action: {
                self.selectedTab = 2
            }) {
                HStack(spacing: 5) {
                    Image("Add")
                        .resizable()
                        .frame(width: 83.52, height: 83.52, alignment: .top)
                        .overlay(Circle().stroke(Color("Tab"), lineWidth: 8))
            
                }
                .offset(y: -17)
                .edgesIgnoringSafeArea(.all)
            }
            
            //Log Icon
            Button(action: {
                self.selectedTab = 3
            }) {
                HStack(spacing: 54) {
                    Image("Log").resizable()
                        .frame(width: 50, height: 50)
                }
                .padding(4)
            }
            .foregroundColor(self.selectedTab == 3 ? Color("Select") : Color("unSelect"))
            
            //Settings Icon
            Button(action: {
                self.selectedTab = 4
            }) {
                HStack(spacing: 5) {
                    Image("Settings").resizable()
                        .frame(width: 40, height: 40)
                }
                .padding(5)
            }
            .foregroundColor(self.selectedTab == 4 ? Color("Select") : Color("unSelect"))
        }
    }
    .padding(.vertical, -10)
    .padding(.horizontal, 30)
    .background(Color("Tab"))
    .padding(.top)
    .padding(.top)
    .clipShape(RoundedRectangle(cornerRadius:20))

}
2 Answers

Try applying the .clipShape to the Color() inside of .background():

.background(Color("Tab").clipShape(RoundedRectangle(cornerRadius:20)))

and remove it from end.

Try adding padding before .clipShape(RoundedRectangle(cornerRadius:20)):

.padding(.top)
Related