Question

我有一个ListView.builder显示一个列表，当我单击一个项目时，它会在下一页（FlashcardDetailsPage）上显示该项目的详细信息。

当我点击类FlashcardDetailsPage中的IconButton时，我想显示下一个列表项。因此，我希望此按钮跳到下一个列表项。有任何想法吗？

class FlashcardListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: allFlashcards.length,
        itemBuilder: (context, int index) {
          return ListTile(
            title: Text(allFlashcards[index].actReg),
            subtitle: Text(allFlashcards[index].question),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => FlashcardDetailPage(
                      flashcardToShow: allFlashcards[index]),
                ),
              );
            },
          );
        });
  }
}

class FlashcardDetailPage extends StatefulWidget {
  final Flashcard flashcardToShow;

  FlashcardDetailPage({Key key, @required this.flashcardToShow})
      : super(key: key);

  @override
  _FlashcardDetailPageState createState() => _FlashcardDetailPageState();
}

class _FlashcardDetailPageState extends State<FlashcardDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(242, 242, 242, 1),
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.flashcardToShow.actReg),
      ),
      body: Column(
        children: <Widget>[
          Container(
            child: Card(
                margin: EdgeInsetsDirectional.fromSTEB(20, 20, 20, 0),
                child: Center(
                  child: Text(
                    widget.flashcardToShow.question,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 30),
                  ),
                )),
          ),
          Container(
            height: 100.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.skip_next),
                  iconSize: 32.0,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

您可以将屏幕替换为显示下一张卡片的另一个屏幕：

IconButton(
  icon: Icon(Icons.skip_next),
  iconSiz: 32,
  onTap: () {
    int currentIndex = allFlashcards.indexOf(widget.flashcardToShow);
    if (currentIndex >= allFlashcards.length) return;

    var nextFlashcard = allFlashcards[currentIndex + 1];
    Navigator.of(context).pushReplacement(MaterialPageRoute(
      builder: (ctx) => FlashDetailsPage(flashcardToShow: nextFlashcard)
    ));
  },
)

Answer 2

感谢马塞尔的指导！我用你的逻辑作为一种方法。为了避免每次按下按钮时都打开新页面，我这样做了，并且可以正常工作：

void _skipFlashcard () {
    setState(() {
      int currentIndex = allFlashcards.indexOf(widget.flashcardToShow);
      var nextFlashcard = allFlashcards[currentIndex + 1];
      widget.flashcardToShow = nextFlashcard;
    });
  }

IconButton(
                  icon: Icon(Icons.skip_next),
                  iconSize: 32.0,
                  onPressed: _skipFlashcard,

onTap转到下一个列表项（Flutter）

2 个答案: