SwiftUI中选项卡栏如何实现圆角？

Question

SwiftUI中选项卡栏如何实现圆角？

3

我想为我的选项卡栏添加圆角，但在SwiftUI中这证明是一项困难的任务。

我是这样创建选项卡栏的：

var body: some View {

TabView {
        homeView()
            .font(.system(size: 30, weight: .bold, design: .rounded))
            .tabItem {
                Image(systemName: "house.fill")
                Text("Home")
            }
     
        Text("Bookmark Tab")
            .font(.system(size: 30, weight: .bold, design: .rounded))
            .tabItem {
                Image(systemName: "bookmark.circle.fill")
                Text("Bookmark")
            }
     
        Text("Video Tab")
            .font(.system(size: 30, weight: .bold, design: .rounded))
            .tabItem {
                Image(systemName: "video.circle.fill")
                Text("Video")
            }
     
        Text("Profile Tab")
            .font(.system(size: 30, weight: .bold, design: .rounded))
            .tabItem {
                Image(systemName: "person.crop.circle")
                Text("Profile")
            }
    }.edgesIgnoringSafeArea(.top)

}

我进行了大量搜索，发现了很多关于UIKit的答案/解决方案，但对于SwiftUI并没有什么值得一提的。

虽然我找到了一些SwiftUI的解决方案，但它们似乎都是创建“自定义”选项卡栏，这似乎有些过度设计，并且显得像是重复造轮子！

在SwiftUI中是否有任何方法可以做到这一点，而不需要重新设计整个选项卡栏？

编辑：

- drago

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ufuk Köşker · Accepted Answer

首先： 我创建了TabBarView.swift文件。 代码：

import SwiftUI

struct TabBarView: View {
    
    @State var selectedTab = "Yeni Mesajlar"
    @Binding var pages: [TabBarPage]
    init(pages: Binding<[TabBarPage]>) {
        UITabBar.appearance().isHidden = true
        self._pages = pages
    }
    var body: some View {
        ZStack(alignment: .bottom) {
            
            TabView(selection: $selectedTab) {
                
                ForEach(pages) { item in
                    AnyView(_fromValue: item.page)
                        
                        .tabItem{
                            EmptyView()
                        }.tag(item.tag)
                }
            }
            
            HStack {
                ForEach(pages) { item in
                    Button(action: {
                        self.selectedTab = item.tag
                    }) {
                        ZStack {

                            
                            Image(systemName: item.icon)
                                .foregroundColor(item.color)
                                .imageScale(.large)
                                .padding(7)
                                .background(self.selectedTab == item.tag ? Color.gray : item.color )
                                .mask(Circle())
                        }
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .padding(5)
            .background(Color.orange)
            .cornerRadius(15)
            .padding()
        }
        
        
    }
}

struct TabBarView_Previews: PreviewProvider {
    static var previews: some View {
        TabBarView(pages: .constant([TabBarPage(page: HomeView(), icon: "arrow.up.message.fill", tag: "Yeni Mesajlar", color: .green),
                                     TabBarPage(page: DetailView(), icon: "message.fill", tag: "Mesajlar", color: .yellow),
                                     TabBarPage(page: ProfileView(), icon: "person.crop.circle.fill", tag: "Profil", color: .blue)]))
    }
}

struct TabBarPage: Identifiable {
    var id = UUID()
    var page: Any
    var icon: String
    var tag: String
    var color: Color
}

然后：

我将创建的TabView添加到ContentView中。 代码：

struct ContentView: View {
    @State var tabBarPages: [TabBarPage] = [TabBarPage(page: NewMessageView(), icon: "arrow.up.message.fill", tag: "Yeni Mesajlar", color: .green),
                                            TabBarPage(page: MessageView(), icon: "message.fill", tag: "Mesajlar", color: .yellow),
                                            TabBarPage(page: ProfileView(), icon: "person.crop.circle.fill", tag: "Profil", color: .blue)]
    var body: some View {
        TabBarView(pages: $tabBarPages)
    }
}