TabView tabItem 图像移到顶部答案

【问题标题】：TabView tabItem image move to topTabView tabItem 图像移到顶部
【发布时间】：2020-03-19 04:05:34
【问题描述】：

我学习了如何在 swiftUI 中创建一个类似于 UIKit tabBar 的 tabBar。我想将中心 tabItem 移动到 top 。有什么办法可以做到这一点？

标签视图代码

TabView {
        ViewTasks()
            .tabItem {
                Image(systemName: "list.bullet.below.rectangle")
                Text("View Tasks")
        }
        AddTask()
            .tabItem {
                Image(systemName: "plus.circle").font(.system(size: 60))
        }
        CategoriesTasks()
            .tabItem {
                Image(systemName: "square.grid.2x2")
                Text("Categories")
        }
    }

视觉示例

【问题讨论】：

标签： swiftui tabview tabitem

【解决方案1】：

第一个想法是使用ZStack，这样你就可以用你自己的可点击图像覆盖tabItem。这是一个例子：

struct TabViewModel: View {

    @State var showActionSheet: Bool = false

    var body: some View {


        ZStack {
            GeometryReader { geometry in
                TabView {

                            Text("list")
                                .tabItem {
                                    Image(systemName: "list.bullet.below.rectangle")
                            }

                            Text("plus")
                                .tabItem {
                                    Text(" ")
                            }

                            Text("categories")
                                .tabItem {
                                    Image(systemName: "square.grid.2x2")
                            }
                        }

                Image(systemName: "plus.circle")
                    .resizable()
                    .frame(width: 40, height: 40)
                    .shadow(color: .gray, radius: 2, x: 0, y: 5)
                    .offset(x: geometry.size.width / 2 - 20, y: geometry.size.height - 80)
                    .onTapGesture {
                        self.showActionSheet.toggle()
                }
            }

        }
        .actionSheet(isPresented: $showActionSheet) {
            ActionSheet(title: Text("some actions"))
        }

    }
}

所以一些图像会覆盖中心 tabView 项目，这将是不可见的 (Text(" "))：

更新

如果你仍然需要在这 3 个视图之间切换，你可以使用@State var selection（别忘了tag(...) tabItems）：

struct TabViewModel: View {

    @State var selection: Int = 0
    var body: some View {

        ZStack {
            GeometryReader { geometry in
                TabView(selection: self.$selection) {
    //...
                    Text("plus")
                        .tabItem {
                            Text(" ")
                    }.tag(1)
    //...
                .onTapGesture {
                        self.selection = 1
                }
    // ...
}

【讨论】：

【解决方案2】：

SWIFTUI 2

.onTapGesture 的使用有时会导致意外行为，例如不显示覆盖视图（警报、工作表或全屏）或在单击另一个选项卡时显示它。更安全的方法是使用.onChange(of:) 方法设置选择值：

struct TabViewModel: View {

@State var selection: Int = 0
var body: some View {

    ZStack {
        GeometryReader { geometry in
            TabView(selection: self.$selection) {
//...
                Text("plus")
                    .tabItem {
                        Text(" ")
                }.tag(1)
//...
            .onChange(of: selection) { _ in
                self.selection = 1
            }
// ...

}

【讨论】：