Блог

Я создал виджет GridView и добавил простую навигацию к виджету чернильницы. Я хочу переходить на каждую другую страницу при нажатии на разные элементы сетки, но я создал свой вид сетки следующим образом :

  Widget _buildGrid(BuildContext context) => GridView.extent(
      maxCrossAxisExtent: 150,
      padding: const EdgeInsets.all(4),
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: _buildGridTileList(30, context));

  List<Widget> _buildGridTileList(int count, BuildContext context) =>
      List.generate(
        count,
        (i) => InkWell(
          onTap: () => Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) =>
                  ParaScreen(), //you can pass the index (i) in the constructor of YourWidget(i) something like this if needed
            ),
          ),
          child: Container(
            decoration: BoxDecoration(border: Border.all(color: Colors.black)),
            child: Image.asset('images/pic$i.jpg'),
          ),
        ),
      );
}
 

Итак, как вы можете видеть , сетки создаются List.generate следующим образом: Примечание: я пытался передать индекс, но это не слишком хорошо получается.

Спасибо

Вы можете добавить функцию, которая возвращает другую страницу, когда она имеет другой индекс, функция может выглядеть следующим образом:

     Widget _pageByIndex(int index){
      switch(index){
      case 0:{
       return Page1(); // page that should be navigated to when chose the GridTile number 1 
   
} 
      case 1: {
      return Page2();
    }
    //you can add as much cases as you want
    }
    } 
 

А затем добавьте его в свой обратный вызов onTap следующим образом:

 onTap: () => Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) =>
                 _pageByIndex(index),
            ),
          ),