1

I am developing a cross platform app in SwifUI. On iPhone / iPad this code works really well on MacOS instead when I insert a NavigationLink the ForecastCardView is totally cut off. When I remove the NavigationLink everything is rendered correctly.

With 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

Without NavigationLink

var FullSection: some View {
        LazyVGrid(columns: homeConfigurationUI.columns, alignment: .center, spacing: 20) {
                ForecastCardView(viewModel:  ForecastCardViewModel.initForTest())
            }
            .border(Color.yellow)
            .frame(minWidth: 300, idealWidth: 400, maxWidth: 600, minHeight: 0, idealHeight: 500, maxHeight: .infinity, alignment: .center)
    }

Image Without NavigationLink

Everything is inside a ScrollView, I tried to insert a List a VStack, but no results. I tried to put a static frame on every single component, but nothing to do.

Salvatore Milazzo
  • 25
  • 6

1 Answers1

5

You have to set buttonStyle to 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)
}
cluelessCoder
  • 948
  • 6
  • 19