LazyVGrid 中的 NavigationLink 在 swiftUI macOS 中未正确显示

问题描述

我正在用 SwifUI 开发跨平台应用。在 iPhone / iPad 上，这段代码在 MacOS 上运行得非常好，而当我插入 NavigationLink 时，ForecastCardView 完全被切断了。当我删除 NavigationLink 时，一切都会正确呈现。

使用导航链接

var FullSection: some View {
    LazyVGrid(columns: homeConfigurationUI.columns,alignment: .center,spacing: 20) {
            NavigationLink(destination: Text("test")) {
                  ForecastCardView(viewmodel:  ForecastCardviewmodel.initFortest())
            }.frame(width: 300,height: 300,alignment: .center)
        }
        .border(Color.yellow)
        .frame(minWidth: 300,idealWidth: 400,maxWidth: 600,minHeight: 0,idealHeight: 500,maxHeight: .infinity,alignment: .center)
}

Image With NavigationLink

没有导航链接

var FullSection: some View {
        LazyVGrid(columns: homeConfigurationUI.columns,spacing: 20) {
                ForecastCardView(viewmodel:  ForecastCardviewmodel.initFortest())
            }
            .border(Color.yellow)
            .frame(minWidth: 300,alignment: .center)
    }

Image Without NavigationLink

一切都在 ScrollView 中，我试图插入一个 List 一个 vstack，但没有结果。我试图在每个组件上放置一个静态框架，但无济于事。

解决方法

您必须将 buttonStyle 设置为 PlainButtonStyle()：

var FullSection: some View {
    LazyVGrid(columns: homeConfigurationUI.columns,alignment: .center,spacing: 20) {
            NavigationLink(destination: Text("test")) {
                  ForecastCardView(viewModel:  ForecastCardViewModel.initForTest())
            }
               .buttonStyle(PlainButtonStyle()) // <— HERE
               .frame(width: 300,height: 300,alignment: .center)
        }
        .border(Color.yellow)
        .frame(minWidth: 300,idealWidth: 400,maxWidth: 600,minHeight: 0,idealHeight: 500,maxHeight: .infinity,alignment: .center)
}