0

私はそのようなボタンバーを作りたい:

ここに画像の説明を入力

この目的のために、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))

そして私はそのような結果を持っています:

ここに画像の説明を入力

目的のデザインからすべてのパラメーターを適用しようとしたため、何が間違っていましたか?

4

1 に答える 1