Início / coding / Perguntas / 79160647
Accepted
Toxic Prince
Asked: 2024-11-06 04:52:30 +0800 CST

Flutter GridView com PageScrollPhysics: Impedir que itens da grade sejam cortados na rolagem da página

  • 772

Estou trabalhando em um aplicativo Flutter onde preciso exibir itens em um de rolagem horizontal . Quero que o [tag:GridView ]se comporte como uma visualização paginada, onde cada "página" rola exatamente por um conjunto de itens (como um ), mas estou tendo problemas com itens sendo cortados.

Visualização de páginaRolagem física para item problema de corte de imagem

Configurei minha com para obter um efeito de rolagem paginada, e minha grade está configurada para exibir itens em um formato 3x3. No entanto, quando eu rolo, a próxima "página" começa no meio de um item, resultando em itens sendo parcialmente cortados no lado esquerdo.

Aqui está meu código atual:

GridView.builder(
            // controller: controller,
            physics: PageScrollPhysics(),
            scrollDirection: Axis.horizontal,
            itemCount: 9,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: 2 / 8.80,
              mainAxisSpacing: 10,
              crossAxisSpacing: 0,
              crossAxisCount: 3,
            ),
            itemBuilder: (context, index) {
              return Row(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: Image(
                      image: AssetImage('assets/images/appicon.png'),
                      height: 50,
                      width: 50,
                    ),
                  ),
                  SizedBox(width: 5),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "App Name",
                        style: TextStyle(
                          fontSize: 16,
                          height: 1,
                        ),
                      ),
                      Text(
                        "App Type",
                        style: TextStyle(
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  )
                ],
              );
            },
          ),

Comportamento esperado

Quero que cada rolagem de "página" no GridView exiba exatamente 3 colunas por página e se encaixe perfeitamente no início do próximo conjunto de itens da grade, sem que nenhum item seja cortado ou exibido parcialmente.

flutter

1 respostas

  1. Best Answer

    O que você procura, eu acho, é um PageView. PageViewanima entre páginas de forma semelhante ao exemplo no link que você forneceu.

    Envolva seu GridViewcom um PageView"curtir" neste exemplo.

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal GridView Pagination',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal GridView Pagination'),
        ),
        body: PaginatedHorizontalGrid(),
      ),
    );
  }
}

class PaginatedHorizontalGrid extends StatelessWidget {
  // Sample list of items for the grid
  final List<String> items = List.generate(20, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    // Calculate the number of pages needed, with 3 items per page
    int pageCount = (items.length / 3).ceil();

    return PageView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: pageCount,
      itemBuilder: (context, pageIndex) {
        // Calculate the starting index for each page
        int startIndex = pageIndex * 3;
        // Get the subset of items for the current page
        List<String> pageItems = items.skip(startIndex).take(3).toList();

        return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1, // 1 row
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 1.5, // Adjust as needed for item size
          ),
          itemCount: pageItems.length,
          padding: EdgeInsets.all(20),
          itemBuilder: (context, index) {
            return Container(
              color: Colors.blueAccent,
              alignment: Alignment.center,
              child: Text(
                pageItems[index],
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
            );
          },
        );
      },
    );
  }
}

    • 0

relate perguntas