Question

我正在开发一个应用程序，其中使用HStack{}标签栏br，其中包含按钮功能，如下所示：https://i.stack.imgur.com/18Amd.png，并且我试图绕过该栏的角落

我尝试使用.clipShape(RoundedRectangle(cornerRadius:20))，但是它将切出超出背景范围的所有内容：https://i.stack.imgur.com/zVZb6.png。

是否有一种方法可以消除HStack背景的角，而无需剪切其中的按钮？

我正在通过SwiftUI使用Xcode 12.0。

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

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

并从末端将其删除。

Answer 2

尝试在.clipShape（RoundedRectangle（cornerRadius：20））之前添加填充：

.padding(.top)

是否可以在不剪切HStack背景内容的情况下绕过HStack背景？

2 个答案: