SwiftUI TabBar 省略号不垂直居中

Question

我刚刚开始使用 SwiftUI 应用程序，所以我要做的第一件事就是设置导航。

我从使用所有默认内容的非常简单的 TabBar 开始，包括图标的 SF 符号。

struct ContentView: View {
    var body: some View {
        TabView {
            ActivityView()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Activity")
                }
            
            DiscoverView()
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("Discover")
                }
            
            MoreView()
                .tabItem {
                    Image(systemName: "ellipsis")
                    Text("More")
                }
            
        }
    }
}

渲染成这样：

为什么省略号没有垂直居中？我认为 SF Symbols 的一大卖点是它们会相互排成一行。

我真的很困惑。

Answer 1

Xcode 12.5.1 和 13.0 测试版 1

'ellipsis' 符号仍然渲染到 tabItem 框架的顶部，无法在 SwiftUI 中直接修改框架和偏移量。我已经通过将图像包装在 UIImage 中并删除基线来解决它。

    MoreView()
        .tabItem {
            Image(uiImage: UIImage(systemName: "ellipsis")!.imageWithoutBaseline())
            Text("More")
        }

SwiftUI TabBar 省略号不垂直居中

SwiftUI TabBar Ellipsis Not Vertically Centered

ios

swiftui

sf-symbols