Flutter 按钮分页GridView生成器

c3frrgcw  于 2023-01-18  发布在  Flutter
关注(0)|答案(1)|浏览(151)

我用了 * gridview.builder *,我想在每次按下按钮时加载五个项目。我试过了,但不知道怎么做。
当所有按钮都被按下时,每次显示的商品都超过5个,当列表中没有更多的类别时,所有按钮都消失了。
Design example exactly what to want I do. Please click here to see the picture

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,
  )),
        ],
      ),
    );;
            }));
  }
}
nnvyjq4y

nnvyjq4y1#

您可以维护项目列表的状态,并且可以操作该状态以增加列表的大小,以便网格的大小自动增加。
以下是上述要求的示例:

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,
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

相关问题