swiftUI中标签栏的圆角？

Posted 2023-02-24

【中文标题】swiftUI中标签栏的圆角？

【英文标题】：Rounded corners for Tab bar in swiftUI?

【发布时间】：2021-02-02 15:04:53

【问题描述】：

我正在尝试给我的标签栏一些圆角，这在 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 中做到这一点，而无需像从头开始创建整个标签栏一样重新设计***？

编辑：

【参考方案1】：

首先： 我创建了 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)
    

【讨论】：

这种工作方式符合我的需要，但粉色标签栏后面有白色背景！你看到了吗？如果 View 的背景是白色的，则看不到它。

我现在要回家了。先生，我会给你发短信。