#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)