如何制作自动滚动的列表视图？

Question

我想创建一个水平列表视图，它以一定的速度自动滚动，无需用户干预。另外，这个滚动应该无限地完成，并且列表视图应该重复。

在我进行的搜索中，通常自动滚动是滚动到特定项目，但我没有找到自动滚动到列表末尾。

Answer 1

以下是如何实现您想要的输出。

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
  });

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final ScrollController _scrollController;
  @override
  void initState() {
    _scrollController = ScrollController();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      double minScrollExtent2 = _scrollController.position.minScrollExtent;
      double maxScrollExtent2 = _scrollController.position.maxScrollExtent;
      animateToMaxMin(
        maxScrollExtent2,
        minScrollExtent2,
        maxScrollExtent2,
        4, ///How fast or slow your widget's should move
        _scrollController,
      );
    });
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  animateToMaxMin(
    double max,
    double min,
    double direction,
    int seconds,
    ScrollController scrollController,
  ) {
    scrollController
        .animateTo(
      direction,
      duration: Duration(seconds: seconds),
      curve: Curves.linear,
    )
        .then((value) {
      direction = direction == max ? min : max;
      animateToMaxMin(max, min, direction, seconds, scrollController);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            children: const [
              SizedBox(
                height: 100,
                width: 100,
                child: Text('1'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('2'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('3'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('4'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('5'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('6'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('7'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('8'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('9'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('10'),
              )
            ],
          ),
        ),
      ),
    );
  }
}