onTap轉到下一個列表項（Flutter）

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,