Как я могу добавить прослушиватель onTap в режиме просмотра карточек в flutter

#flutter #actionlistener

#flutter #actionlistener

Вопрос:

Я новичок в flutter. В моем приложении я извлекаю данные из URL и просматриваю их. Теперь я хочу добавить прослушиватель onTap, который будет передавать идентификатор функции. Есть идеи, как я могу это сделать.

 return GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
              itemCount:snapshot.data.length,
              itemBuilder:(BuildContext context, int index) {
                final x = snapshot.data[index];
                return Card(
                  child: Column(
                    children: <Widget>[
                      Image.network(
                        'https://thegreen.studio/ecommerce/default/upload/'  x.Image,
                        width: 200.0,
                        height: 150.0,
                        fit: BoxFit.cover,
                      ),
                      Text(x.Description),
                      Text("Price: RM:134"),

                    ],
                    

                  ),
                );
              },
            );
 

Ответ №1:

Вы можете обернуть Card виджет с GestureDetector :

 GestureDetector(
    onTap: () {
      // Code
    },
    child: Card(
        ...
    ),
)
 

Ответ №2:

@BeHappy прав. Вы можете использовать GestureDetector для прослушивания функции onTap. Вы можете передать идентификатор индексируемого элемента в свой метод. Это будет выглядеть так:

 return GridView.builder(
  gridDelegate:
      SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemCount: snapshot.data.length,
  itemBuilder: (BuildContext context, int index) {
    final x = snapshot.data[index];
    return GestureDetector(
      onTap: () {
        // You can pass the id of indexed item.
        yourMethod(x.id);
      },
      child: Card(
        child: Column(
          children: <Widget>[
            Image.network(
              'https://thegreen.studio/ecommerce/default/upload/'   x.Image,
              width: 200.0,
              height: 150.0,
              fit: BoxFit.cover,
            ),
            Text(x.Description),
            Text("Price: RM:134"),
          ],
        ),
      ),
    );
  },
);