将网格视图的索引发送到另一个屏幕

Question

我正在制作一个有 3 个屏幕的应用程序，前 2 个有网格视图，我想发送从前两个到第三个的索引，我已经尝试过官方文档，但我有在我的代码中实现时遇到问题（因为我是flutter的新手，已经这样做了一个月）

这是第一个屏幕的代码

import 'package:flutter/material.dart';

class Disciplina {
  final String? id;
  final String? title;
  final Color color;

  const Disciplina({
    @required this.id, //identificação o campo na pagina Disciplinas
    @required this.title, //titulo de cada butão na pagina disciplinas
    this.color = Colors.orange, //cor do background de cada botao
  });
}

 
import 'package:flutter/material.dart';
import '../data/dummy_data.dart';
import 'disciplina_item.dart';

class DisciplinasScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //segunda base da app
      appBar: AppBar(
        //cria uma barra na parte superior da app
        title: const Text('Disciplinas'), //titulo da appbar
        toolbarHeight: 50,
      ),
      body: GridView(
        //fazer com que os buttons fiquem organizados e scrollable^
        padding: const EdgeInsets.all(25),
        children: DUMMY_DISCIPLINA //chama a lista da pagina dummy_data
            .map(
              //chama uma lista
              (dicData) => DisciplinaItem(
                //guarda na variavel 'dicData' as variveis da função DisciplinaItem da disciplina_item.dart
                dicData.id.toString(),
                dicData.title.toString(), //aponta para o title da função
                dicData.color, //aponta para a cor da função
              ),
            )
            .toList(),
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          //função do flutter que deixa mexer com a grid autonomamente
          maxCrossAxisExtent:
              200, //o maximo de width que a grid toma é de 200 pixeis
          childAspectRatio: 3 / 2, //cada grid toma o ratio de 3/2
          crossAxisSpacing: 20, //espaçamento maximo é de 20 pixeis
          mainAxisSpacing: 20, //espaçamento maximo é de 20 pixeis
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';
import '../modulos/disciplina_modulos_screen.dart';

class DisciplinaItem extends StatelessWidget {
  //widget que não muda UI
  final String id; //id da disciplina
  final String title; //nome da disciplina
  final Color color; //cor do background do "botão"

  DisciplinaItem(
    this.id,
    this.title,
    this.color,
  ); //aponta as variaveis para a propria class

  void selectDisciplina(BuildContext ctx) {
    Navigator.of(ctx).pushNamed(
      DisciplinaModuloScreen.routeName, //route situada no main
      arguments: {
        //argumentos que vão ser passados para a outra pagina sem o utilizador ver
        'id': id,
        'title': title,
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () =>
          selectDisciplina(context), //chama a função só quando é carregado
      splashColor: Theme.of(context).primaryColor, //cor de quando é carregado
      // borderRadius: BorderRadius.circular(15), //borda redonda
      child: Container(
        padding: const EdgeInsets.all(
          15,
        ), //padding ao container de 15 pixeis em todos os lados
        child: Text(
          title,
          style: Theme.of(context).textTheme.headline6,
        ), //mostra o title no container
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              color.withOpacity(
                0.7,
              ), //cor que vai buscar ao ficheiro mas com opacidade reduzida
              color,
            ],
            begin: Alignment.center,
            end: Alignment.center,
          ),
          borderRadius: BorderRadius.circular(15), //botoes com bordas redondas
        ),
      ),
    );
  }
}

，这是第二个屏幕的代码

import 'package:flutter/material.dart';

class Modulo {
  final String? modId;
  final List<String>? modDisciplinaId;
  final String? modTitle;
  final Color color;

  const Modulo({
    @required this.modId, //identificação o campo na pagina Disciplinas
    @required this.modDisciplinaId,
    @required this.modTitle, //titulo de cada butão na pagina disciplinas
    this.color = Colors.orange, //cor do background de cada botao
  });
}


import 'package:flutter/material.dart';
import '../download/download_resumos_screen.dart';

class ModuloItem extends StatelessWidget {
  final String modTitle;
  final Color color;

  ModuloItem(
    @required this.modTitle,
    @required this.color,
  );

  void selectModulo(BuildContext context) {
    Navigator.of(context).pushNamed(DownloadScreen.routeName);
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => selectModulo(context), //chama a função só quando é carregado
      splashColor: Theme.of(context).primaryColor,
      child: Container(
        padding: const EdgeInsets.all(15),
        child: Text(
          modTitle,
          style: Theme.of(context).textTheme.headline6,
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              color.withOpacity(0.7),
              color,
            ],
            begin: Alignment.center,
            end: Alignment.center,
          ),
          borderRadius: BorderRadius.circular(15), //botoes com bordas redondas
        ),
      ),
    ); //mostra o title no container
  }
}

import 'package:flutter/material.dart';
import '../data/modulo_data.dart';
import '../modulos/modulo_item.dart';

class DisciplinaModuloScreen extends StatelessWidget {
  static const routeName = '/disciplina-modulos';
  //final String moduloId;
  //final String moduloTitle;

  //DisciplinaModuloScreen(
  //this.moduloId,
  //this.moduloTitle,
  //);

  @override
  Widget build(BuildContext context) {
    final routeArgs =
        ModalRoute.of(context)?.settings.arguments as Map<String, String>;
    final disciplinaId = routeArgs['id'];
    final disciplinaTitle = routeArgs['title'];
    final disciplinaModulo = DUMMY_MODULO.where((modulo) {
      return modulo.modDisciplinaId!.contains(disciplinaId.toString());
    }).toList();

    return Scaffold(
      appBar: AppBar(
        title: Text('Módulos da disciplina ' + disciplinaTitle.toString()),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(25),
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          //função do flutter que deixa mexer com a grid autonomamente
          maxCrossAxisExtent:
              200, //o maximo de width que a grid toma é de 200 pixeis
          childAspectRatio: 3 / 2, //cada grid toma o ratio de 3/2
          crossAxisSpacing: 20, //espaçamento maximo é de 20 pixeis
          mainAxisSpacing: 20, //espaçamento maximo é de 20 pixeis
        ),
        itemBuilder: (ctx, index) {
          return ModuloItem(
            disciplinaModulo[index].modTitle.toString(),
            disciplinaModulo[index].color,
          );
        },
        itemCount: disciplinaModulo.length,
      ),
    );
  }
}

Answer 1

如果我正确理解您的问题，那么实现的一种方法是使用getruestector＆amp; navigator.push每个网格项目。

在源小部件（您要通过索引）中，编写一个实用程序功能以使用navigator.push来推动目标组件。请注意，目标组件需要接受道具中的索引。请参阅下面的示例：

源窗口小部件

class SourceWidget extends StatelessWidget {
  const SourceWidget({Key? key}) : super(key: key);

  void navigateToTarget(BuildContext context, int index) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) {
        return TargetWidget(index: index);
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: 2,
      itemBuilder: (_, index) {
        return GestureDetector(
          onTap: () => navigateToTarget(context, index),
          child: Container(), // Place your content here.
        );
      },
    );
  }
}

目标小部件

class TargetWidget extends StatelessWidget {
  final int index;

  const TargetWidget({
    Key? key,
    required this.index,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use index here.
  }
}