如何在 SwiftUI 中垂直居中纯文本 TabBar 按钮？

Question

我正在SwiftUI（Xcode 11.1、Swift 5.1和iOS 13.1.3）中制作一些TabView按钮。

对于我的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 的开发人员文档说，“选项卡视图仅支持文本、图像或图像后跟文本类型的选项卡项。传递任何其他类型的视图会导致可见但空的选项卡项。 ”

我应该补充一点，我可以使用.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”的事情是否是个好主意。或者，如果这甚至是一个hacky的事情？我知道SwiftUI的声明性质的整个想法是将实现与声明分开。考虑到这一点，可以想象未来的某些实现可能看起来非常不同，因此通过我在这里所做的 hacky offsets 看起来很愚蠢。

除此之外，我仍然想这样做，无论如何现在。

所以现在我正在寻找一种方法来修复标签栏区域的背景颜色，当然，还有一种解决原始问题的不那么笨拙的方法。

谢谢！

Answer 1

空白区域是放置图标的空间。TabView 并不是真正可定制的。您可以将文本转换为图形并使用图像插入它 - 这应该将其向上推。但它不会\xe2\x80\x99 完全居中。

\n