扑面按钮分页GridView Builder

Question

我使用 gridview.builder ，每次按下按钮时都想加载五个项目。我尝试过，不明白该怎么做。

当按下所有按钮时，每次显示五个以上的产品。当列表没有更多类别时，所有按钮都会消失。

设计示例我要做什么。请单击此处查看图片

class WidgetTest extends StatefulWidget {
  WidgetTest({Key? key,}) : super(key: key);

  // final String title;

  @override
  State<WidgetTest> createState() => _WidgetTestState();
}

class _WidgetTestState extends State<WidgetTest> {
  int present = 0;
  int perPage = 5;

  final originalItems = categoryData;

  var items = <String>[];

  @override
  void initState() {
   setState(() {
     present = present+perPage;

   });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GridView.builder(
            itemCount: 10,
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
            itemBuilder: (context, index) {
              return Container(
      child: Column(
        children: [
          Image.network(
             "https://firebasestorage.googleapis.com/v0/b/ebuy-1ac5b.appspot.com/o/pngegg%201.png?alt=media&token=fb4dd43b-c537-4471-b81b-e325724f0919",
            height:30,
            width: 90,
            fit: BoxFit.cover,
          ),
          Text("Man",
          overflow: TextOverflow.clip,
          style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w600,
  )),
        ],
      ),
    );;
            }));
  }
}

Answer 1

您可以维护一个物品列表的状态，并且可以操纵状态以增加列表的大小，以便网格的大小会自动增加。

以下是上述要求的示例：

import 'package:flutter/material.dart';

class WidgetTest extends StatefulWidget {
  WidgetTest({
    Key? key,
  }) : super(key: key);

  // final String title;

  @override
  State<WidgetTest> createState() => _WidgetTestState();
}

class _WidgetTestState extends State<WidgetTest> {
  int present = 0;
  int perPage = 5;

  int _count = 5;
  List<String> productList = [
    "Product 1",
    "Product 2",
    "Product 3",
    "Product 4",
    "Product 5",
    "Product 6",
    "Product 7",
    "Product 8",
    "Product 9",
    "Product 10",
    "Product 11",
    "Product 12",
    "Product 13",
    "Product 14",
    "Product 15",
    "Product 16",
    "Product 17",
    "Product 18",
    "Product 19",
    "Product 20",
    "Product 21",
  ];

  // final originalItems = categoryData;

  var items = <String>[];

  @override
  void initState() {
    setState(() {
      present = present + perPage;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        itemCount: _count + 1,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemBuilder: (context, index) {
          if (index == _count) {
            return InkWell(
              onTap: () {
                setState(() {
                  if (_count + 5 < productList.length) {
                    _count += 5;
                  } else {
                    _count += productList.length - _count;
                  }
                });
              },
              child: SizedBox(
                height: 100,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(100),
                        color: Colors.black,
                      ),
                      child: Icon(
                        Icons.add,
                        color: Colors.white,
                      ),
                      height: 50,
                      width: 50,
                    ),
                    const SizedBox(
                      height: 18,
                    ),
                    const Text(
                      "Show More",
                      overflow: TextOverflow.clip,
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ],
                ),
              ),
            );
          }
          return SizedBox(
            height: 100,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Image.network(
                  "https://firebasestorage.googleapis.com/v0/b/ebuy-1ac5b.appspot.com/o/pngegg%201.png?alt=media&token=fb4dd43b-c537-4471-b81b-e325724f0919",
                  height: 30,
                  width: 90,
                  fit: BoxFit.cover,
                ),
                Text(
                  productList[index],
                  overflow: TextOverflow.clip,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}