如何在 Flutter 中创建无限平滑滚动的图像列表？

Question

我正在尝试将项目动态添加到 Flutter 中的列表中，以便此列表无限期运行。（我正在尝试使用 ListView.builder 和 Future class 来实现这一点）。

我寻求的最终效果是在屏幕上以平滑的速度无休止地自动滚动随机生成的图像（有点像新闻自动收报机）。

这可能吗？我已经修改了很长时间（尝试 AnimatedList 等），但似乎无法让它工作！

希望有任何帮助来解决这个问题或想法。


import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _anim;

  List<String> _list = ItemsList().createList;

  void addToList() {

    Future ft = Future((){});

    ft = ft.then((value) => Future.delayed(Duration(milliseconds: 200), (){
      setState(() {
        _list.insert(_list.length, 'Ant'); //This part will replace with a method to randomly select images
    });
    }));
  }

  void initState() {
    
    _controller = AnimationController(
        duration: Duration(milliseconds: 8000), vsync: this);

    _anim = Tween<Offset>(begin: Offset(0, 0), end: Offset(-5, 0))
        .animate(_controller)
          ..addStatusListener((status) {});

    _controller.forward();

    addToList();
    
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return SlideTransition(
                position: _anim,
                child: Center(
                  child: Padding(
                    padding: const EdgeInsets.all(58.0),
                    child: Container(
                      height: 50,
                      width: 100,
                      color: Colors.white54,
                      child:
                          Image.asset('assets/images/${_list[index]}.png'),
                    ),
                  ),
                ),
              );
            }));
  }
}

class ItemsList {
  List<String> createList = [
    'Ant',
    'Apple',
    'Artist',
    'Baby',
    'Bag',
//etc
  ];
}

Answer 1

在下面的示例代码中，您也可以在 DartPad 中运行，每两秒向列表添加一个新项目。 ScrollController 然后用于在一秒钟内滚动到列表的末尾。

计时器仅用于连续向列表中添加随机项目，您当然可以改为收听流（或类似流）。

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late Timer _timer;
  final _controller = ScrollController();
  final _rnd = Random();

  List<String> _list = ItemsList().createList;

  void initState() {
    _timer = Timer.periodic(Duration(seconds: 2), (timer) {
      setState(() {
        _list.add('Item ${_rnd.nextInt(100)}');
      });
      _controller.animateTo(
        _controller.position.maxScrollExtent,
        duration: Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
      );
    });

    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: ListView.builder(
        controller: _controller,
        itemCount: _list.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Center(
            child: Padding(
              padding: const EdgeInsets.all(58.0),
              child: Container(
                height: 50,
                width: 100,
                color: Colors.white54,
                child: Center(
                  child: Text(
                    _list[index],
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class ItemsList {
  List<String> createList = [
    'Ant',
    'Apple',
    'Artist',
    'Baby',
    'Bag',
//etc
  ];
}

如何在 Flutter 中创建无限平滑滚动的图像列表？

How to create an indefinite smooth-scrolling list of images in Flutter?

animation

flutter