SwiftUI中Link组件不遵循frame(maxWidth)设置的问题求助

我需要创建一组宽度一致的按钮/链接，不受文本内容长度影响，但SwiftUI的Link()组件不遵守.frame(maxWidth: .infinity)设置，无法实现统一宽度。以下是我的代码和当前效果：

VStack(alignment: .center) {
    Button {
        bypass.toggle()
    } label: {
        Text("Push to Bypass")
        .frame(maxWidth: .infinity)
    }
    .font(.title2)
    .fontWeight(.bold)
    .buttonStyle(.borderedProminent)
    .foregroundColor(Color(hue: 1.0, saturation: 1.0, brightness: 1.0, opacity: 0.825))
    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
    
    Link("Settings", destination: URL(string: "http://192.168.10.1/TSettings")!)
        .frame(maxWidth: .infinity)
        .font(.title2)
        .fontWeight(.bold)
        .buttonStyle(.borderedProminent)
        .foregroundColor(.white)
        .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
    
    Link("Recorder Settings", destination: URL(string: "http://192.168.10.1/VB")!)
        .frame(maxWidth: .infinity)
        .font(.title2)
        .fontWeight(.bold)
        .buttonStyle(.borderedProminent)
        .foregroundColor(.white)
        .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
    
    Link("Download Data", destination: URL(string: "http://192.168.10.1/ddownload")!)
        .frame(maxWidth: .infinity)
        .font(.title2)
        .fontWeight(.bold)
        .buttonStyle(.borderedProminent)
        .foregroundColor(.white)
        .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
    
    Link("Download Audio", destination: URL(string: "http://192.168.10.1/generate")!)
        .frame(maxWidth: .infinity)
        .font(.title2)
        .fontWeight(.bold)
        .buttonStyle(.borderedProminent)
        .foregroundColor(.white)
        .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
}.fixedSize(horizontal: true, vertical: false)

当前效果：

解决方案 #

问题核心有两点：

1. VStack的.fixedSize(horizontal: true, vertical: false)强制容器仅适配内容宽度，导致内部元素无法拉伸
2. Link的.frame设置未作用到内部文本容器，按钮宽度由文本长度决定

修改后的代码：

VStack(alignment: .center) {
    Button {
        bypass.toggle()
    } label: {
        Text("Push to Bypass")
            .frame(maxWidth: .infinity)
    }
    .font(.title2)
    .fontWeight(.bold)
    .buttonStyle(.borderedProminent)
    .foregroundColor(Color(hue: 1.0, saturation: 1.0, brightness: 1.0, opacity: 0.825))
    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
    
    Link(destination: URL(string: "http://192.168.10.1/TSettings")!) {
        Text("Settings")
            .frame(maxWidth: .infinity)
    }
    .font(.title2)
    .fontWeight(.bold)
    .buttonStyle(.borderedProminent)
    .foregroundColor(.white)
    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
    
    Link(destination: URL(string: "http://192.168.10.1/VB")!) {
        Text("Recorder Settings")
            .frame(maxWidth: .infinity)
    }
    .font(.title2)
    .fontWeight(.bold)
    .buttonStyle(.borderedProminent)
    .foregroundColor(.white)
    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
    
    Link(destination: URL(string: "http://192.168.10.1/ddownload")!) {
        Text("Download Data")
            .frame(maxWidth: .infinity)
    }
    .font(.title2)
    .fontWeight(.bold)
    .buttonStyle(.borderedProminent)
    .foregroundColor(.white)
    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
    
    Link(destination: URL(string: "http://192.168.10.1/generate")!) {
        Text("Download Audio")
            .frame(maxWidth: .infinity)
    }
    .font(.title2)
    .fontWeight(.bold)
    .buttonStyle(.borderedProminent)
    .foregroundColor(.white)
    .tint(Color(red: 0.005, green: 0.669, blue: 0.791))
}

关键修改说明 #

• 移除VStack的.fixedSize(horizontal: true, vertical: false)，允许容器拉伸至父视图可用宽度
• 将Link的字符串参数改为显式Text子视图，给Text设置.frame(maxWidth: .infinity)，确保文本区域填满按钮宽度
• 保持Button原有写法，与Link样式统一

修改后所有按钮/链接会自动适配VStack宽度，实现统一显示效果。

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