SwiftUI中似乎不支持UITabBar。解决方法?

时间:2019-06-19 15:17:51

标签: uitabbar swiftui

SwiftUI似乎不支持UITabBar。如何整合该功能?

仅像MKMapView这样包装视图就不能了,因为它需要与NavigationView进行深度集成。使用UINavigationView太不适合Swift了。

3 个答案:

答案 0 :(得分: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)
            }
        }
    }

答案 1 :(得分:1)

如果您对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)

        }
    }
}

答案 2 :(得分:0)

在尝试制作ToolBar时,我错过了这个问题……下面是我最终得到的代码……感谢所有人。

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))
        }
    }
}