Flutter中的列表和GridView Builder

时间:2019-10-25 04:13:20

标签: flutter dart

我有一个gridview从列表中收集数据。我想在网格中显示数据,但按数据类型标识。所以我有这样的列表数据:

static List<Map<String, String>> productDataNames = [
    {
      'name': 'Tersesat',
      'type': 'Utility',
      'route': '/'
    },
    {
      'name': 'Transportasi',
      'type': 'Content',
      'route': '/transportasipage'
    },
    {
      'name': 'Lokasi',
      'type': 'Content',
      'route': '/lokasipage'
    },
    {
      'name': 'Penerjemah',
      'route': '/penerjemahpage'
    },
    {
      'name': 'Kurs',
      'type': 'Utility',
      'route': '/kurspage'
    },
    {
      'name': 'Kiblat',
      'type': 'Utility',
      'route': '/kiblatpage'
    },
    {
      'name': 'Beli Pulsa',
      'type': 'Payment',
      'route': '/belipulsapage'
    },
    {
      'name': 'Paket Internet',
      'type': 'Payment',
      'route': '/paketdatapage'
    },
    {
      'name': 'Bayar Dam',
      'type': 'Payment',
      'route': '/dampage'
    },
    {
      'name': 'MORE',
      'type': 'Menu',
      'route': 'more'
    },
  ];

我想获取一些数据并将其按类型附加到gridview构建器。我的问题是如何在gridview构建器中按类型获取itemCount的数据长度。

这是我的gridview代码

GridView.builder(
                itemCount: AppData.productDataNames.length,
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 5,
                  crossAxisSpacing: 3.0,
                  childAspectRatio: MediaQuery.of(context).size.height / 1000
                ),
                itemBuilder: (BuildContext context, int index) {
                  return GestureDetector(
                    onTap: () async {
                      await Navigator.of(context).pushNamed('${AppData.productDataNames[index]['route']}');
                    },
                    child: Column(
                      children: <Widget>[
                        Container(
                          height: ScreenUtil().setHeight(120),
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: AppData.productDataColors[index]['color'],
                          ),
                          child: Center(
                            child: Icon(
                              AppData.productDataIcons[index]['icon'],
                              size: ScreenUtil().setSp(60),
                              color: TemaApp.whiteColor,
                            ),
                          ),
                        ),
                        Text(
                          AppData.productDataNames[index]['name'],
                          style: TextStyle(color: TemaApp.smokyBlack, fontSize: ScreenUtil().setSp(30)),
                        ),
                      ],
                    ),
                  );
                },
              )

例如,我想仅在网格内容类型中显示数据

0 个答案:

没有答案