Question

我正在 SwiftUI （ Xcode 11.1 ， Swift 5.1 和 > iOS 13.1.3 ）。

对于我的 TabView ，我不需要任何图片-只是文本。这段代码很好地实现了这一点：

import SwiftUI

struct ContentView: View {
    var body: some View {

        TabView {
            Text("The First Tab")
                .tabItem {
                    Text("My Projects")
            }
            Text("Another Tab")
                .tabItem {
                    Text("Augmented Reality")
            }

            Text("The Last Tab")
                .tabItem {
                    Text("Products")
            }
        }
    }
}

但是，在这种情况下，文本最终与标签栏项的最底部对齐，如下所示：

我想要的是选项卡栏，不是，以便为图标保留空间，并使文本垂直居中-类似于此模型：

我尝试将其粘贴在 VStack 中并尝试调整对齐方式，但没有任何变化。

是否有一些聪明的方法可以做到这一点，或者我需要对特定数量的点进行某种补偿？

仅供参考，Apple的developer doc说：“ 标签视图仅支持文本，图像或图像后跟文本的选项卡项目。传递任何其他类型的视图都会导致可见但空白的标签项目。”

我应该补充一点，就是可以使用 .offset 来调整整个 TabView ，但这显然不是我们想要的。 .tabItem 本身会忽略给定的任何 .offset ， .tabItem 中的文本也是如此。

通过执行此操作，我可以更加接近-基本上，我将每个标签的内容视图下移40.0点，然后将整个 TabView 上移40。距离更近，但是选项卡后面的背景却被弄乱了：

代码如下：

struct ContentView: View {
    let vOffset: CGFloat = 40.0
    var body: some View {


        TabView {
            Text("The First Tab")
                .tabItem {
                    Text("My Projects")
            }.offset(CGSize(width: 0.0, height: vOffset))

            Text("Another Tab")
                .tabItem {
                    Text("Augmented Reality")
            }.offset(CGSize(width: 0.0, height: vOffset))

            Text("The Last Tab")
                .tabItem {
                    Text("Products")
            }.offset(CGSize(width: 0.0, height: vOffset))
        }
        .offset(CGSize(width: 0.0, height: -vOffset))
    }
}

是这样的：

我认为，尽管还没有弄清楚怎么做，但仍可以通过某种方式修复该背景。

另一种想法是，我想知道做这种“ hacky”事情是否是一个好主意。或者，即使这是一件骇人听闻的事情？我知道 SwiftUI 的声明性的整体思想是将实现与声明分开。考虑到这一点，可以预期将来的某些实现可能会看起来非常不同，因此可以通过我在此处所做的修改来使自己看起来很愚蠢。

此外，无论如何，我还是现在想要这样做。 ?

因此，到目前为止，我正在寻找一种修复标签栏区域背景颜色的方法，当然，并且，这是一种不那么棘手的解决原始问题的方法。

谢谢！

Answer 1

空白处是放置图标的空间。 TabView并不是真正可定制的。您可以将文本转换为图形，然后使用“图像”将其插入-应将其向上推。但是，它不会完全居中。

Answer 2

尝试

TabView(alignment: .center ,spacing: 20))
{
Text("The First Tab")
      .tabItem {
           Text("My Projects")
       }
}

如何在SwiftUI中将仅文本的TabBar按钮垂直居中？

2 个答案: