如何像Little Snitch一样在MenuBarExtra中添加文本和栏动画？

Question

小飞贼的菜单栏状态如下：

我们正在尝试做类似的事情，我们有自己的文本，然后是垂直条而不是水平条。现在的主要问题是弄清楚如何向 VStack 中的状态图标添加文本。当我尝试使用 Text 时，字体不会变这么小，并且无论我是否使用 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())
        }
    }
}

Answer 1

我尝试重新创建 Little Snitch 菜单栏。我希望这对你有用。

struct ContentView: View {
    var body: some View {
        ZStack {
            HStack {
                VStack(spacing: 2) {
                    HStack(spacing: 5) {
                        Text("0.2 KB/s")
                            .foregroundStyle(.pink)
                        ForEach(1..<6) { i in
                            if i==1 {
                                Rectangle().fill(Color.pink)
                                    .cornerRadius(5.0)
                                    .frame(width: 4, height: 10, alignment: .center)
                            } else {
                                Rectangle().fill(Color.gray)
                                    .cornerRadius(5.0)
                                    .frame(width: 4, height: 10, alignment: .center)
                            }
                        }
                     }
                    HStack(spacing: 5) {
                        Text("0.1 KB/s")
                            .foregroundStyle(.blue)
                        ForEach(1..<6) { i in
                            if i==1 {
                                Rectangle().fill(Color.blue)
                                    .cornerRadius(5.0)
                                    .frame(width: 4, height: 10, alignment: .center)
                            } else {
                                Rectangle().fill(Color.gray)
                                    .cornerRadius(5.0)
                                    .frame(width: 4, height: 10, alignment: .center)
                            }
                        }
                    }
                }
                
                Image(systemName: "checkmark.circle")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 20,height: 20)
            }.padding(5)
            .overlay {
                Rectangle()
                    .fill(.gray).opacity(0.4)
                             .cornerRadius(5)
            }
        }

    }
}

预览：