SwiftUI中的TabView如何取消选择所有标签项

时间:2019-11-22 11:59:32

标签: swift swiftui

是否可以在选项卡视图中取消选择所有选项卡项。 也许我应该以某种方式更改所选项目的颜色,以使其看起来像未突出显示

应该发生的情况是model.selection> = 5

 TabView(selection: $model.selection) {

更新

更多代码:

struct HamburgerTabView: View {

    @EnvironmentObject var model: HamburgerMenuModel

    var body: some View {
        TabView(selection: $model.selection) {
                NavigationView {
                    VStack {
                        Text("Lol").foregroundColor(.black)
                        NavigationLink(destination: Text("NAV").hamburgerButton() ) {
                            Text("Test").foregroundColor(.black)
                        }
                    }
                    .navigationBarTitle("Welcome", displayMode: .inline)
                    .hamburgerButton()


                }
                .tabItem {
                    VStack {
                        Image(systemName: "1.circle")
                        Text("Item 1")
                    }
                }.tag(0)

                NavigationView {
                    Text("Hello World 2").foregroundColor(.red)
                        .navigationBarTitle("Test 2", displayMode: .inline)
                        .hamburgerButton()

                }
                    .tabItem {
                        VStack {
                            Image(systemName: "2.circle")
                            Text("Item 2")
                        }
                    }.tag(1)

                NavigationView {
                    Text("Hello World 3")
                        .navigationBarTitle("Test 3", displayMode: .inline)
                        .hamburgerButton()

                }
                .tabItem {
                        VStack {
                            Image(systemName: "3.circle")
                            Text("Item 3")
                        }
                }.tag(2)

                NavigationView {
                    Text("Hello World 4")
                        .navigationBarTitle("Test 4", displayMode: .inline)
                        .hamburgerButton()

                }
                    .tabItem {
                        VStack {
                            Image(systemName: "4.circle")
                            Text("Item 4")
                        }
                    }.tag(3)

                NavigationView {
                    Text("Hello World 5")
                        .navigationBarTitle("Test 4", displayMode: .inline)
                        .hamburgerButton()

                }
                    .tabItem {
                       VStack {
                            Image(systemName: "5.circle")
                            Text("Item 5")
                        }
                    }.tag(4)
            }
            .onAppear() {
                //UITabBar.appearance().backgroundColor = .red
                //UITabBar.appearance().tintColor = (self.model.selection < 5) ? .green : .red
            }
        .accentColor( (self.model.selection < 5) ? Color.black : Color.black.opacity(0.5))
    }
}

1 个答案:

答案 0 :(得分:1)

因此,我找到了通过扩展名对其进行修改的最简单解决方案:

extension UITabBarController {
    override open func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let appearance = UITabBarAppearance()
        appearance.backgroundColor = .white
        appearance.shadowImage = UIImage()
        appearance.shadowColor = .white

        appearance.stackedLayoutAppearance.normal.iconColor = .black
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.black]

        appearance.stackedLayoutAppearance.selected.iconColor = .red
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.red]

        tabBar.standardAppearance = appearance
    }
}

应该有一个更好的选择,但是我只能在视图的构造函数中找到一些修改方法,但是它的局限性:

    init() {
        UITabBar.appearance().backgroundColor = UIColor.blue
    }

我希望这会有所帮助!

编辑

这是我根据自定义TabView制作的基本自定义NavigationView

struct TabViewItem<E: Comparable, Content>: View where Content: View {

    var id: E
    @Binding var selected: E
    let content: () -> Content

    @inlinable public init(id: E, selected: Binding<E>, @ViewBuilder content: @escaping () -> Content) {
        self.id = id
        self._selected = selected
        self.content = content
    }


    var body: some View {
        HStack {
            Spacer()
            self.content()
            Spacer()
        }
        .padding()
        .background(self.selected == self.id ? Color(UIColor.systemGray5) : Color.clear)
        .contentShape(Rectangle())
        .onTapGesture {
            self.selected = self.id
        }
    }
}

enum Tab : Int, Comparable {
    public static func < (a: Tab, b: Tab) -> Bool {
        return a.rawValue < b.rawValue
    }
    case Home, World, Settings
}



struct ContentView: View {
    @State var selection: Tab = .Home

    func containedView() -> AnyView {
          switch self.selection {
          case .Home: return AnyView(Text("Home"))
          case .World: return AnyView(Text("World"))
          case .Settings: return AnyView(Text("Settings"))
          }
      }

    var body: some View {
        GeometryReader { proxy in
            VStack {
                Spacer()
                self.containedView()
                Spacer()
                HStack(alignment: .bottom, spacing: 0) {
                    TabViewItem(id: Tab.Home, selected: self.$selection, content: {
                        VStack {
                            Image(systemName: "house")
                            Text("Home")
                        }
                    })
                    TabViewItem(id: Tab.World, selected: self.$selection, content: {
                        VStack {
                            Image(systemName: "globe")
                            Text("World")
                        }
                    })
                    TabViewItem(id: Tab.Settings, selected: self.$selection, content: {
                        VStack {
                            Image(systemName: "gear")
                            Text("Settings")
                        }
                    })
                }.frame(width: proxy.size.width, height: 50)
            }
        }
    }
}