SwiftUI中MenuBarExtra内Linear ProgressView无法显示问题求助

我无法让线性ProgressView在MenuBarExtra中显示，它完全不出现。目前没有迹象表明这是不可实现的，但我始终无法完成部署。以下是最简代码结构：

import SwiftUI
import AppKit

@main
struct Menubar_InfoApp: App {
    @State private var pct: String = "34%"

    var body: some Scene {
        MBE()
    }

    @SceneBuilder
    func MBE() -> some Scene {
        MenuBarExtra() {
            VStack {
                Text("Percentage: \(pct)")
                    .padding()
                
                ProgressView(value: Double(pct.dropLast(1)) ?? 0, total: 100)
                    .progressViewStyle(LinearProgressViewStyle())
                    .padding([.leading, .trailing])
                    .frame(width: 100)
            }
            
        } label: {
            Text("sample")
        }
    }
}

我希望在MenuBarExtra中实现一个线性ProgressView（至少外观和行为一致），我的应用包含多个MenuBarExtra元素，要避免它们重叠，效果类似：

• 我认为问题与数值无关，因为我试过设置固定值，但仍无效。
• 问题似乎与MenuBarExtra通过单独函数调用无关，即使将其移至body中也无法解决。

MenuBarExtra的下拉菜单布局约束较为严格，系统的LinearProgressView可能因缺少明确的高度设置被压缩至不可见，你可以通过以下两种方式解决：

方案1：强制设置进度条高度 #

给系统的进度条显式添加高度约束，确保它有足够的显示空间：

import SwiftUI
import AppKit

@main
struct Menubar_InfoApp: App {
    @State private var pct: String = "34%"

    var body: some Scene {
        MenuBarExtra() {
            VStack(spacing: 12) {
                Text("百分比: \(pct)")
                    .padding(.horizontal, 16)
                
                ProgressView(value: Double(pct.dropLast(1)) ?? 0, total: 100)
                    .progressViewStyle(LinearProgressViewStyle())
                    .frame(width: 120, height: 8) // 显式设置高度
                    .padding(.horizontal, 16)
            }
            .padding(.vertical, 8)
        } label: {
            Text("示例")
        }
    }
}

方案2：自定义进度条（更稳定） #

如果系统组件仍然无法正常渲染，使用自定义进度条可以完全控制外观和布局，不受系统约束限制：

import SwiftUI
import AppKit

@main
struct Menubar_InfoApp: App {
    @State private var pct: String = "34%"

    var body: some Scene {
        MenuBarExtra() {
            VStack(spacing: 12) {
                Text("百分比: \(pct)")
                    .padding(.horizontal, 16)
                
                CustomLinearProgressView(progress: Double(pct.dropLast(1)) ?? 0)
                    .frame(width: 120, height: 8)
                    .padding(.horizontal, 16)
            }
            .padding(.vertical, 8)
        } label: {
            Text("示例")
        }
    }
}

// 自定义线性进度条组件
struct CustomLinearProgressView: View {
    var progress: Double
    
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: .leading) {
                // 进度条背景
                RoundedRectangle(cornerRadius: 4)
                    .fill(Color.gray.opacity(0.3))
                
                // 进度填充部分
                RoundedRectangle(cornerRadius: 4)
                    .fill(Color.accentColor)
                    .frame(width: geo.size.width * (progress / 100))
            }
        }
    }
}

说明 #

• 给整个VStack添加上下内边距可以避免内容过于拥挤，同时确保MenuBarExtra的下拉菜单有合适的尺寸。
• 自定义进度条的样式可以根据需求调整颜色、圆角、高度等，完全适配你的UI设计。

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