SwiftUI 如何制作圆角和屏幕底部上方的 hstack？

Question

我想制作这样的按钮栏：

为此，我决定使用 hstack（不确定这是否是个好主意）。我是这样做的：

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

我得到了这样的结果：

我做错了什么，因为我试图应用所需设计中的所有参数？

Answer 1

请尝试以下代码

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

我的结果是：

SwiftUI 如何制作圆角和屏幕底部上方的 hstack？

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

swiftui

hstack