SwiftUI 中似乎不支持 UITabBar。解决方法？答案

【问题标题】：There doesn't appear to be support for UITabBar in SwiftUI. Workarounds?SwiftUI 中似乎不支持 UITabBar。解决方法？
【发布时间】：2019-06-19 15:17:51
【问题描述】：

SwiftUI 似乎不支持 UITabBar。如何集成该功能？

仅仅像（例如）MKMapView 一样包装视图是行不通的，因为它需要与 NavigationView 深度集成。使用 UINavigationView 太不符合 SwiftUI 风格了。

【问题讨论】：

我假设您了解如何集成 UIKit classes with SwiftUI` 视图结构。如果没有，请观看关于它的 WWDC 会话 231。如果您确实知道我在说什么，那么也请理解它还处于 beta 2 中。您可能会很幸运，TabBar() 可能会由 GM 提供。
实际上 SwiftUI 有 'TabbedView' ，它们的行为几乎相同。它目前不支持所有 UITabbar 功能，但可能会在 9 月最终发布之前。

标签： uitabbar swiftui

【解决方案1】：

“TabbedView”是最接近的东西。它可以类似于以下使用：

    struct TabView : View {

        @State private var selection = 1

        var body: some View {
            TabbedView (selection: $selection) {
                InboxList()
                    .tabItemLabel(selection == 1 ? Image("second") : Image("first"))
                    .tag(1)

                PostsList()
                    .tabItemLabel(Image("first"))
                    .tag(2)

                Spacer()
                    .tabItemLabel(Image("first"))
                    .tag(3)

                Spacer()
                    .tabItemLabel(Image("second"))
                    .tag(4)
            }
        }
    }

【讨论】：

这是我问题的正确答案。不幸的是，当我在寻找工具栏而不是 TabBar 时，我错误地陈述了这个问题。感谢您的帮助
@Rumbles ：因为这是正确答案，如果您将其标记为正确答案并接受我的答案，我将非常高兴:-)

【解决方案2】：

如果您对TabbedView 不满意，您随时可以自己动手！这是一个快速的基本实现：

import SwiftUI

struct ContentView : View {

    let tabs = [TabItemView(title: "Home", content: { Text("Home page text") }), TabItemView(title: "Other", content: { Text("Other page text") }), TabItemView(title: "Pictures", content: { Text("Pictures page text") })]

    var body: some View {
        TabBar(tabs: tabs, selectedTab: tabs[0])
    }
}

struct TabItemView<Content> : Identifiable where Content : View {
    var id = UUID()
    var title: String
    var content: Content

    init(title: String, content: () -> Content) {
        self.title = title
        self.content = content()
    }


    var body: _View { content }

    typealias Body = Never
}

struct TabBar<Content>: View where Content : View {
    let tabButtonHeight: Length = 60

    var tabs: [TabItemView<Content>]
    @State var selectedTab: TabItemView<Content>

    var body: some View {
        GeometryReader { geometry in
        VStack(spacing: 0) {
            self.selectedTab.content.frame(width: geometry.size.width, height: geometry.size.height - self.tabButtonHeight)

            Divider()
            HStack(spacing: 0) {
                    ForEach(self.tabs) { tab in
                        Button(action: { self.selectedTab = tab}) {
                            Text(tab.title)
                        }.frame(width: geometry.size.width / CGFloat(Double(self.tabs.count)), height: self.tabButtonHeight)

                    }
                }
                .background(Color.gray.opacity(0.4))
            }
            .frame(width: geometry.size.width, height: geometry.size.height)

        }
    }
}

【讨论】：

谢谢你，但这不就是一个 TabbedView 吗？我不需要/不想改变内容。但是，你给了我滚动你自己的 TabBar 的本质......唯一的问题是 UITabBar 有一些特殊的行为，它与它所在/与之协调的 UINavigationView 相比。
TabBar，我的意思是工具栏......因此我得到了答案。对不起！
有史以来最好的答案！ swiftui 有很多事情要做，但我需要更多的文档

【解决方案3】：

我在尝试制作工具栏时错误地陈述了这个问题......下面是我最终得到的代码......谢谢大家。

struct ToolBarItem : Identifiable {
    var id = UUID()
    var title : String
    var imageName : String
    var action: () -> Void
}

struct TooledView<Content> : View where Content : View{
    var content :  Content
    var items : [ToolBarItem]
    let divider = Color.black.opacity(0.2)

    init(items : [ToolBarItem], content: () -> Content){
        self.items = items
        self.content = content()
    }
    var body : some View{
        VStack(spacing: 0){
            self.content
            self.divider.frame(height: 1)
            ToolBar(items: self.items).frame(height: ToolBar.Height)
        }
    }
}

struct ToolBar : View{
    static let Height : Length = 60
    var items : [ToolBarItem]
    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0){
                ForEach(self.items){ item in
                    Button(action: item.action){
                        Image(systemName: item.imageName).imageScale(.large)
                        Text(item.title).font(.caption)
                    }.frame(width: geometry.size.width / CGFloat(Double(self.items.count)))

                }

            }
                .frame(height: ToolBar.Height)
                .background(Color.gray.opacity(0.10))
        }
    }
}

【讨论】：