Flutter:如何制作可重用gridView小部件

mlmc2os5  于 2022-12-14  发布在  Flutter
关注(0)|答案(2)|浏览(191)

我有一个gridview小部件,但是我想让它可以重用,这样我就可以在很多地方重用它,而不用一次又一次地写它。我已经写了它,但是我面临一个问题,
这是我写的小部件,

class GridViewSelection extends StatelessWidget {
  GridViewSelection(
      {super.key,
      required this.menuList,
      required this.onTap,
      this.imageList,
      this.nameList,});

  VoidCallback onTap;
  int menuList;
  List? imageList;
  List? nameList;
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(15),
        child: GridView.builder(
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 10),
            itemCount: menuList,
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onTap: onTap,
                child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          SvgPicture.asset(
                            imageList![index],
                            fit: BoxFit.contain,
                            width: MediaQuery.of(context).size.width * 0.15,
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          Text(
                            textAlign: TextAlign.center,
                            nameList![index],
                            style: TextStyle(
                                fontSize: 14,
                                color: AppTheme.colors.greyFontColor),
                          ),
                        ]),
                  ),
                ),
              );
            }));
  }
}

我面临的问题是,我有一个列表,其中我定义了名称和图像的网格视图。问题是,我将如何使用该列表。这是我如何重用小部件,但它抛出了一个错误。

GridViewSelection(
   menuList: oldMenu.length, 
   imageList: oldMenu, 
   nameList: oldMenu,
      onTap: (){}),

我不能像这样使用它,但它说**[索引]**没有为列表定义。

GridViewSelection(
   menuList: oldMenu.length, 
   imageList: oldMenu[index].image, 
   nameList: oldMenu[index].name,
      onTap: (){}),

任何帮助都将不胜感激。

vlju58qv

vlju58qv1#

GridViewSelection的构造函数需要List?作为名称和图像,但您试图提供一个元素。为了解决此问题,您必须从列表oldMenu中分别提取nameimage的列表,然后将其提供给构造函数。
修订代码:

GridViewSelection(
   menuList: oldMenu.length, 
   imageList: oldMenu.map((element) => element.image).toList(), 
   nameList: oldMenu.map((element) => element.name).toList(),
      onTap: (){}),

希望能有所帮助!

uwopmtnx

uwopmtnx2#

确保在itemBuilder中返回的小部件是一个列表,要为其提供索引以使用它。

相关问题