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

Posted 2023-02-24

【中文标题】SwiftUI如何制作圆角和屏幕底部上方的hstack？

【英文标题】：SwiftUI how to make hstack with rounded corners and above bottom side of screen?

【发布时间】：2021-09-14 07:48:33

【问题描述】：

我想做这样的按钮栏：

为此，我决定使用 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))

我有这样的结果：

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

【问题讨论】：

这是否回答了您的问题***.com/a/62040898/12299030？

部分是的，但我仍然不知道如何修复这个元素的填充

【参考方案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))
                
            
        
    

我的结果是：