[Dúvida] Carrossel ficando pequeno no ScrollView | iOS | Alura

Fiz o código conforme a aula, deixando o carrossel com altura fixa de 180, porém eu queria tentar colocar o carrossel para se ajustar conforme o tamanho da tela do dispositivo. Mas agora o carrossel fica assim minúsculo. Quando tiro o CarouselTabView da ScrollView funciona conforme esperado, mas preciso que ele esteja dentro da ScrollView, já que tem que haver a rolagem. Já tentei de tudo e não consegui resolver, o que pode ser?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

ContentView:

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            VStack{
                NavigationBarView()
                
                ScrollView(.vertical, showsIndicators: false) {
                    VStack(spacing: 32){
                        CategoryGridView()
                        
                        CarouselTabView()
                        
                        StoresListView()
                        
                    }
                }
            }
        }
    }
}

CarouselTabView:

struct CarouselTabView: View {
    
    var banners: [CategoryType] = [
    CategoryType(id: 1, name: "banner 1", image: "barbecue-banner"),
    CategoryType(id: 2, name: "banner 2", image: "brazilian-meal-banner"),
    CategoryType(id: 3, name: "banner 3", image: "pokes-banner")
    ]
    
    var body: some View {
        TabView{
            ForEach(banners) { mock in
                CarouselItemView(banner: mock)
            }
        }
       .frame(maxWidth: .infinity)
       .padding(.horizontal, 20)

       
        .tabViewStyle(.page(indexDisplayMode: .always))
    }
        
}

CarouselItemView:

struct CarouselItemView: View {
    
    let banner: CategoryType
    
    var body: some View {
        Image(banner.image)
            .resizable()
            .scaledToFit()
        
    }
}

Olá João.

Tudo bem?

Pelo que você descreveu, o problema parece estar relacionado à forma como o ScrollView e o TabView estão interagindo no layout do SwiftUI. Quando você coloca um TabView dentro de um ScrollView, o ScrollView não consegue determinar corretamente a altura do TabView, pois ele é intrinsecamente capaz de se expandir para acomodar seu conteúdo. Isso pode resultar no TabView sendo renderizado com uma altura mínima, como você observou.

Uma possível solução para isso é definir explicitamente a altura do TabView com base na altura da tela do dispositivo. Você pode fazer isso usando o GeometryReader para obter as dimensões da tela e, em seguida, aplicar essas dimensões ao frame do TabView. Aqui está como você pode ajustar seu código:

struct CarouselTabView: View {
    
    var banners: [CategoryType] = [
        CategoryType(id: 1, name: "banner 1", image: "barbecue-banner"),
        CategoryType(id: 2, name: "banner 2", image: "brazilian-meal-banner"),
        CategoryType(id: 3, name: "banner 3", image: "pokes-banner")
    ]
    
    var body: some View {
        GeometryReader { geometry in
            TabView {
                ForEach(banners) { banner in
                    CarouselItemView(banner: banner)
                }
            }
            .frame(width: geometry.size.width, height: geometry.size.height * 0.3) // Ajuste a fração de acordo com a necessidade
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
        }
        .frame(height: UIScreen.main.bounds.height * 0.3) // Ajuste a fração de acordo com a necessidade
    }
}

Neste exemplo, o TabView é colocado dentro de um GeometryReader, que fornece as dimensões da tela. O TabView então usa essas dimensões para definir sua própria altura como uma fração da altura da tela. Isso garante que o TabView tenha a altura adequada dentro do ScrollView.

Espero que essa solução ajude a resolver o problema do carrossel ficando pequeno. Experimente e ajuste a fração da altura conforme necessário para obter o layout desejado. Espero ter ajudado e bons estudos!

Mergulhe em programação