如何在 SwiftUI 中垂直居中纯文本 TabBar 按钮?
Posted
技术标签:
【中文标题】如何在 SwiftUI 中垂直居中纯文本 TabBar 按钮?【英文标题】:How can I vertically center text-only TabBar buttons in SwiftUI? 【发布时间】:2020-02-18 02:42:53 【问题描述】:我正在 SwiftUI(Xcode 11.1、Swift 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")
但是,在这种情况下,文本最终会与标签栏项目的最底部对齐,如下所示:
我想要的是标签栏不为图标保留空间,并将文本垂直居中 - 类似于这个模型:
我尝试将其粘贴在 VStack 中并尝试调整对齐方式,但没有任何变化。
有什么聪明的方法可以做到这一点,还是我需要通过特定数量的点进行某种偏移?
另外仅供参考,Apple 的developer doc 说,“选项卡视图仅支持文本、图像或图像后跟文本类型的选项卡项。传递任何其他类型的视图会导致可见但为空的选项卡项。 "
我应该补充一点,我可以使用 .offset 来调整整个 TabView,但这显然不是我们想要的。 .tabItem 本身会忽略任何给定的 .offset,.tabItem 中的 Text 也是如此。
通过这样做,我能够更接近 - 基本上我将每个选项卡的内容视图向下移动 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 偏移看起来很愚蠢。
除此之外,我仍然想这样做,反正现在。 ????
所以现在我正在寻找一种方法来修复标签栏区域的背景颜色,当然还有一种不那么老套的方法来解决原始问题。
谢谢!
【问题讨论】:
标签栏区域的背景颜色,可以使用appearance
。 UITabBar.appearance().backgroundColor = UIColor.green
.
@KetanOdedra Hm.. 也许我会诉诸于此,但如果可能的话,我希望完全留在 SwiftUI 世界中。
【参考方案1】:
空白空间是图标的空间。 TabView 不是真正可定制的。您可以将文本转换为图形并使用 Image 将其插入 - 这应该将其向上推。但它不会完全居中。
【讨论】:
对,我知道空白是给图标的,但我不想有空白。我可以使用 .offset 来调整整个 TabView,但这显然不是我们想要的。 .tabItem 本身会忽略任何给定的 .offset,就像 .tabItem 中的 Text 一样。 您在 tabItem() 内的 Image 或 Text 上放置的任何样式都将被忽略。唯一的方法是将文本变成图形并使用 Image 将其放置在更高的位置。【参考方案2】:试试
TabView(alignment: .center ,spacing: 20))
Text("The First Tab")
.tabItem
Text("My Projects")
【讨论】:
TabView 有两个初始化器,既没有对齐也没有间距。以上是关于如何在 SwiftUI 中垂直居中纯文本 TabBar 按钮?的主要内容,如果未能解决你的问题,请参考以下文章