在SwiftUI中实现自定义的高度灵活的标签栏

在SwiftUI中实现自定义的高度灵活的标签栏

标签栏组件是UI界面中非常重要的组件，它通过创建一组清晰的选项卡按钮（标签），使得用户能够轻松地识别并切换到不同的内容区域，从而在一个界面上展现多个不同主题的丰富内容 。

SwiftUI提供了一个内置的标签栏组件，即TabView组件，但这个组件不够灵活，虽然通过定制可以解决一些问题，但很难适应一些更复杂的场景。

这篇博文介绍一种完全自定义的高度灵活的标签栏实现方式，可以作为SwiftUI 的标签栏组件的补充。

设计思路

通常标签栏组件可以分解为三部分: 标签部分（Tab），标签栏部分（TabBar），以及标签内容部分，即TabPage。我们的思路是，将这三部分独立设计，让它们独立发展，从而可以提供各种组合以实现高度灵活性。 标签部分需要数据支持，可以是数组，也可以是枚举，或者其他类型的数据， 我们用协议实现；标签栏的主要功能是对一组标签进行布局排列，我们用定制的组件实现；标签内容部分主要显示当前标签的内容，这个和具体业务需求相关，无需任何设计，直接在业务代码中实现，但需要遵循一定规范。 如下是我们的设计代码：

//标签协议
protocol HDXTab
{
   
    associatedtype TAB:View
    @ViewBuilder  
    func makeTab(isSelected:Bool,action:@escaping ()->Void)->TAB
}

//标签栏组件 
struct HDXTabBar<Content:View>:View
{
   
    var content: ()->Content  
    var body:some View 
    {
   
        self.content() 
    }