如何实现类似Little Snitch的MenuBarExtra文本与竖条动画效果

我们希望实现类似上图的菜单栏状态效果，展示自定义文本及竖条（而非横条）。

当前遇到的问题 #

在VStack中为状态图标添加文本时，字体无法缩小至所需尺寸；且无论是否使用VStack，仅能显示一个Text元素。当前实现的效果如下：

此问题与编号75659816的问题类似，我们考虑使用NSStatusItem，以下是当前代码：

struct BandwidthImageOverlay: View {
    var body: some View {
            HStack {
                Text("300 MB/s")
                    .font(.system(size: 1))
                    .padding(6)
                    .foregroundColor(.white)
                Text("200 MB/s")
                    .font(.system(size: 1))
                    .padding(6)
                    .foregroundColor(.white)
            }.background(Color.black)
            .opacity(0.8)
            .cornerRadius(10.0)
            .padding(6)
        }
}

struct ClientApp: App {
    var body: some Scene {
        MenuBarExtra {
        } label: {
            Image(CUSTOM_IMG)
                .renderingMode(.template)
                .overlay(BandwidthImageOverlay())
        }
    }
}

解决方法 #

最终我们通过使用NSStatusItem结合对应方案解决了问题。

内容的提问来源于stack exchange，提问作者Elijah