Блог

Я разрабатываю приложение, в котором я использую панель вкладок, используя HStack{} внутри нее функции кнопок, как показано здесь: 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))

}
  

Попробуйте применить .clipShape к Color() внутренней части .background() :

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

и удалите его с конца.

Попробуйте добавить отступ перед .clipShape(RoundedRectangle(cornerRadius:20)):

 .padding(.top)