我可以将 HStack 背景的角变圆而不剪掉其中的内容吗？

Question

我正在开发一个应用程序，其中我使用标签栏 brHStack{}与其中的按钮功能一起使用，如下所示： https: //i.stack.imgur.com/18Amd.png我正在尝试圆角酒吧。

我尝试过使用.clipShape(RoundedRectangle(cornerRadius:20))，但它会剪切掉背景边界之外的任何内容： https: //i.stack.imgur.com/zVZb6.png。

有没有办法将 HStack 背景的角变圆而不剪掉里面的按钮？

我正在使用 Xcode 12.0 和 SwiftUI。

我正在使用的代码在这里：

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

}

Answer 1

尝试将 应用于的.clipShape内部：Color().background()

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

并将其从末端移除。