Как каждый элемент в представлении сетки перемещается на определенную страницу в Flutter?

#flutter #dart

Вопрос:

У меня есть 3 страницы, первая из которых home_page , page1 , и page2 та home_page GridView , которая извлекает данные из a List , которая содержит 2 элемента, так что мой GridView сейчас отобразит 2 элемента, как на этом изображении

домашняя страница

И я делаю InkWell() так, чтобы мой Card() виджет был доступен для кликабельности.

Итак, когда я нажимаю на элемент страницы 1, я хочу перейти на page1 экран, также если я нажимаю на элемент страницы 2, я хочу перейти на другой экран, который является page2 экраном. Я использовал onTap(){} , но всегда ходил в page1

мой InkWell метод:

 InkWell gridItem(Category category) {  return InkWell(  child: Card(  shape:  RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),  child: Column(  mainAxisSize: MainAxisSize.min,  mainAxisAlignment: MainAxisAlignment.center,  children: [  Container(  //color: Colors.green,  width: 100,  height: 100,  padding: const EdgeInsets.all(8),  child: Image.asset(category.image),  ),  Text(  category.name,  style: const TextStyle(fontSize: 18),  ),  ],  ),  ),  onTap: () {  Navigator.push(context, MaterialPageRoute(builder: (context) {  return const Page1();   }));  },  );  }  

Как я достигаю этой цели, спасибо вам.

Редактировать:

 class Category {  late String name;  late String image;   Category({required this.name, required this.image}); }  

Ответ №1:

Вам просто нужно определить page , что относится к данной категории.

Итак, вместо того, чтобы напрямую устанавливать страницу на всегда, чтобы Page1() это нравилось:

 onTap: () {  Navigator.push(context, MaterialPageRoute(builder: (context) {  return const Page1();   })); },  

измените его на что-то вроде этого:

 onTap: () {  _goToPage(category.id); // or category number   // or anything to differentiate each item of category },  

с _goToPage(int number) помощью метода:

 void _goToPage(int number) {   Widget page;   // You can also use if else here.  switch(number) {  case 0:  page = Page1();  break;  case 1:  page = Page2();  break;  default:  page = Page1(); // default item when no matching category found  }   Navigator.push(context, MaterialPageRoute(builder: (context) {  return page;   })); }  

Комментарии:

1. Спасибо за ваш ответ, я просто обновляю свой пост, я надеюсь, вы посмотрите, я новее для flutter, я думаю, что буду использовать название, которое должно работать?

2. Вы можете попробовать внести небольшие изменения InkWell gridItem(Category category) {} в InkWell gridItem(int number, Category category) {}

3. затем вызовите метод с помощью _goToPage(number)