SwiftUI how to make hstack with rounded corners and above bottom side of screen?

Question

I would like to make such buttons bar:

for this purpose I decided to use hstack (not sure whether it is a good idea). I did it in such way:

HStack{
                    ForEach(playerMenuControllers,id: \.self ){img in
                        let pos = playerMenuControllers.firstIndex(of: img)
                        let likeImg = liked ? "heart.fill" : img
                        let bookMarkImg = bookmark ? "bookmark.fill" : img
                        
                        Button(action: {
                            switch pos{
                            case 0:
                                
                                break
                            case 1:
                                liked.toggle()
                                break
                            case 2:
                                bookmark.toggle()
                                break
                            case 3:
                                showingSheet.toggle()
                                break
                            default:
                                break
                            }
                        }) {
                            HStack {
                                switch pos{
                                case 0:
                                    Image(systemName: img).foregroundColor(Color.white)
                                case 1:
                                    Image(systemName: likeImg).foregroundColor(Color.white)
                                case 2:
                                    Image(systemName: bookMarkImg).foregroundColor(Color.white)
                                case 3:
                                    Image(systemName: img).foregroundColor(Color.white)
                                default:
                                    Image(systemName: img).foregroundColor(Color.white)
                                }
                            }
                        }.sheet(isPresented: $showingSheet) {
                            SheetView(model: episode)
                        }
                        .padding(EdgeInsets(top: 17, leading: 33, bottom: 17, trailing: 33))
                    }
                }
                .cornerRadius(15)
                .background(Color(red: 54 / 255, green: 54 / 255, blue: 54 / 255))
                .padding(EdgeInsets(top: 17, leading: 33, bottom: 17, trailing: 33))

and I have such result:

what I did wrong, because I tried to apply all params from the desired design?

Answer 1

Try please the following code

struct Bottombar: View {
    
    let examples: [String] = ["1", "2", "3","4"]

    
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()
            VStack {
                Spacer()
                HStack{
                    HStack {
                        ForEach(examples, id: \.self) { color in
                            HStack {
                                Image(systemName: "checkmark").foregroundColor(Color.white)
                            }
                        }.padding(EdgeInsets(top: 17, leading: 33, bottom: 17, trailing: 33))
                    }
                    .background(Color(red: 54 / 255, green: 54 / 255, blue: 54 / 255))
                    .cornerRadius(15)
                    .padding(EdgeInsets(top: 17, leading: 33, bottom: 17, trailing: 33))
                }
            }
        }
    }
}

My result is :