如何使用动画滚动到 Flutter 中的下一行位置

Question

我有一个问题清单，当我检查一个问题时，我想滚动到下一个问题。 这在 Flutter 中怎么可能？或者我应该使用什么小部件？ 或者也许有一个图书馆已经在做我需要的？

非常感谢任何帮助或建议！

这是我的代码：

Widget _buildBody() {
    var dbHelper = DBHelper();
    return ListView.builder(
      padding: EdgeInsets.all(10),
      itemCount: 1,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Column(
            children: questionsList
                    ?.map(
                      (question) => Row(
                        children: [
                          Expanded(
                            flex: 4,
                            child: Text(
                              "${question.questionNumber}. ${question.questionDescription}",
                              style: TextStyle(fontSize: 20),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: IconButton(
                              icon: Icon(Icons.check_circle_outline),
                              color: question.questionAnswer == 1
                                  ? Colors.green
                                  : Colors.grey,
                              iconSize: 60,
                              onPressed: () {
                                setState(
                                  () {
                                    question.questionAnswer = 1;
                                    dbHelper.updateQuestion(question);

                                    print('Yes');
                                  },
                                );
                              },
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: IconButton(
                              icon: Icon(Icons.close),
                              color: question.questionAnswer == 0
                                  ? Colors.red
                                  : Colors.grey,
                              iconSize: 60,
                              onPressed: () {
                                setState(
                                  () {
                                    question.questionAnswer = 0;
                                    dbHelper.updateQuestion(question);
                                    print('No');
                                  },
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    )
                    ?.toList() ??
                [],
          ),
        );
      },
    );
  }

提前致谢！

Answer 1

我是这样解决的：

import 'package:scroll_to_index/scroll_to_index.dart';

final scrollDirection = Axis.vertical;
AutoScrollController controller;
int scrollCounter = -1;

@override
  void initState() {
    super.initState();
    
    controller = AutoScrollController(
        viewportBoundaryGetter: () =>
            Rect.fromLTRB(0, 0, 0, MediaQuery.of(context).padding.bottom),
        axis: scrollDirection);
  }

Future _scrollToNextQuestion() async {
    setState(() {
      scrollCounter++;

      if (scrollCounter >= questionsList.length) scrollCounter = 0;
    });

    await controller.scrollToIndex(scrollCounter,
        preferPosition: AutoScrollPosition.begin);
    controller.highlight(scrollCounter);
  }

Widget _wrapScrollTag({@required int index, @required Widget child}) =>
      AutoScrollTag(
        key: ValueKey(index),
        controller: controller,
        index: index,
        child: child,
        highlightColor: Colors.black.withOpacity(0.1),
      );

Widget _buildBody() {
    var dbHelper = DBHelper();
    return ListView.builder(
      padding: EdgeInsets.all(10),
      itemCount: 1,
      controller: controller,
      scrollDirection: scrollDirection,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Column(
            children: questionsList?.map<Widget>(
                  (question) {
                    return Row(
                      children: [
                        Expanded(
                          flex: 4,
                          child: Text(
                            "${question.questionNumber}. ${question.questionDescription}",
                            style: TextStyle(fontSize: 20),
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: _wrapScrollTag(
                            index: question.questionNumber - 1,
                            child: IconButton(
                              icon: Icon(Icons.check_circle_outline),
                              color: question.questionAnswer == 1
                                  ? Colors.green
                                  : Colors.grey,
                              iconSize: 60,
                              onPressed: () {
                                setState(
                                  () {
                                    question.questionAnswer = 1;
                                    dbHelper.updateQuestion(question);

                                    print('Yes');
                                  },
                                );
                                _scrollToNextQuestion();
                              },
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: _wrapScrollTag(
                            index: question.questionNumber - 1,
                            child: IconButton(
                              icon: Icon(Icons.close),
                              color: question.questionAnswer == 0
                                  ? Colors.red
                                  : Colors.grey,
                              iconSize: 60,
                              onPressed: () {
                                setState(
                                  () {
                                    question.questionAnswer = 0;
                                    dbHelper.updateQuestion(question);
                                    print('No');
                                  },
                                );
                                _scrollToNextQuestion();
                              },
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                )?.toList() ??
                [],
          ),
        );
      },
    );
  }