swift - 如何在 SwiftUI 中垂直居中纯文本 TabBar 按钮?

标签 swift swiftui tabview tabitem

我正在 SwiftUI(Xcode 11.1Swift 5.1 中制作一些 TabView 按钮>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")
            }
        }
    }
}

但是,在这种情况下,文本最终会与选项卡栏项目的最底部对齐,如下所示: tab bar with labels at the bottom

不过,我想要的是让标签栏为图标保留空间,并使文本垂直居中——类似于这个模型:

tab bar mock-up showing desired layout

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

是否有一些聪明的方法可以做到这一点,或者我是否需要通过特定数量的点进行某种偏移?

另外仅供引用,Apple 的 developer doc说,“选项卡 View 仅支持文本、图像或图像后跟文本类型的选项卡项。传递任何其他类型的 View 会导致可见但为空的选项卡项。

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

通过这样做,我能够更接近 - 基本上我将每个选项卡的内容 View 向下移动 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))
    }
}

这是它的样子:

TabView and tab content views offset in opposite directions vertically

我认为可以通过某种方式修复该背景,但还没有完全弄清楚如何做。

另一个想法是,我想知道做这种“hacky”的事情是否是个好主意。或者,如果这甚至是 一件怪事?我知道 SwiftUI 的声明性质的整个想法是将实现与声明分开。考虑到这一点,可以想象 future 的某些实现可能看起来非常不同,因此通过我在这里做的 hacky 偏移看起来很愚蠢。

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

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

谢谢!

最佳答案

更新:Xcode 13.3/iOS 15.4

未输入 Text(可以认为是 PO 的修复)...

demo1

...但是图像总是显示在中心的顶部(独立于是否有文本):

demo2

demo3

关于swift - 如何在 SwiftUI 中垂直居中纯文本 TabBar 按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58495954/

相关文章:

swift - 如何创建词典扩展

ios - 方法不能标记为@objc,因为它的结果类型不能在 Objective-C 中表示

swift - 如何在 Swift 中访问 KMMShared MutableStateFlow 对象

android - 底部的选项卡,顶部的 map View

JSF/PrimeFaces : Navigate from one tab to another

swift - 在某些设备(尤其是 ios_10.3.1)中收到推送通知后,我的 iPhone 应用程序崩溃了

ios - 在 uiwebview 中进行身份验证后调用 func

ios - SwiftUI:无限滚动水平ScrollView

ios - 防止 SwiftUI 系统镜像动态更改导航栏项目的大小

对话框内选项卡布局中的Android ListView 无法显示滚动条