SwiftUI iOS14 - NavigationView + List - Não preenche espaço

Sep 17 2020

Estou tendo problemas com uma lista dentro de um NavigationView desde a atualização do iOS 14.

Aqui está uma divisão simples do código - eu listrei tudo que não mostra o problema

struct ContentView: View {
    
    var views = ["Line 1", "Line 2", "Line 3"]
    
    var body: some View {
        
        NavigationView {
            
            VStack {
                
                List {
                    
                    ForEach(views, id: \.self) { view in
                       
                        VStack {
                        Text("\(view)")
                        }
                        .background(Color.red)
                        
                    }
                    
                }
                
            }
            
        }
        
    }
}

Isso produz o seguinte resultado:

Não consigo entender por que a lista está pairando no centro da visualização de navegação assim. Pelo que eu posso dizer, isso deve produzir uma visualização de lista que ocupa todo o espaço disponível (com exceção do topo onde a barra de navegação estaria).

Na verdade, quando executado no iOS 13.5, esse é o resultado que obtenho conforme ilustrado abaixo:

Eu li a documentação, mas não consigo entender por que esse comportamento está acontecendo de repente.

Qualquer ajuda seria muito apreciada.

obrigado

Respostas

21 pawello2222 Sep 17 2020 at 13:33

Problema

Parece que os estilos padrão de a Listou NavigationViewno iOS 14 podem, em alguns casos, ser diferentes do iOS 13.

Solução # 1 - listStyle explícito

Já não é sempre o PlainListStyle(como no iOS 13), mas às vezes InsetGroupedListStyletambém.

Você precisa especificar explicitamente o listStylepara PlainListStyle:

.listStyle(PlainListStyle())

Exemplo:

struct ContentView: View {
    var views = ["Line 1", "Line 2", "Line 3"]

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(views, id: \.self) { view in
                        VStack {
                            Text("\(view)")
                        }
                        .background(Color.red)
                    }
                }
                .listStyle(PlainListStyle()) // <- add here
            }
        }
    }
}

Solução nº 2 - navigationViewStyle explícito

Parece que o estilo padrão do NavigationView às vezes pode ser o DoubleColumnNavigationViewStyle(mesmo em iPhones).

Você pode tentar definir o navigationViewStylepara StackNavigationViewStyle(como no iOS 13):

.navigationViewStyle(StackNavigationViewStyle())

Exemplo:

struct ContentView: View {
    var views = ["Line 1", "Line 2", "Line 3"]

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(views, id: \.self) { view in
                        VStack {
                            Text("\(view)")
                        }
                        .background(Color.red)
                    }
                }
            }
        }
        .navigationViewStyle(StackNavigationViewStyle()) // <- add here
    }
}