Как сделать просмотр списка с автоматической прокруткой?

Я хочу создать горизонтальное представление списка, которое автоматически прокручивается без вмешательства пользователя с определенной скоростью. Кроме того, эта прокрутка должна выполняться бесконечно, а просмотр списка должен повторяться.

В поиске, который я делал, обычно автоматическая прокрутка была для перехода к конкретному пункту, но автоматической прокрутки до конца списка я не нашел.


124
2

Ответы:

Решено

Вот как вы можете достичь желаемого результата.

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'),
              )
            ],
          ),
        ),
      ),
    );
  }
}


вы можете использовать carousel_slider

carousel_slider: ^2.3.1

Пример

ListView( 
        children: [ 
          CarouselSlider( 
              items: [ 
                  
              Container( 
                  margin: EdgeInsets.all(6.0), 
                  decoration: BoxDecoration( 
                  color: Colors.grey,
                    borderRadius: BorderRadius.circular(8.0), 
                  ), 
                ), 
                  
              Container( 
                  margin: EdgeInsets.all(6.0), 
                  decoration: BoxDecoration( 
                  color: Colors.grey,
                    borderRadius: BorderRadius.circular(8.0), 
                  ), 
                ),  
                  
                  Container( 
                  margin: EdgeInsets.all(6.0), 
                  decoration: BoxDecoration( 
                  color: Colors.grey,
                    borderRadius: BorderRadius.circular(8.0), 
                  ), 
                ), 
                  
                Container( 
                  margin: EdgeInsets.all(6.0), 
                  decoration: BoxDecoration( 
                  color: Colors.grey,
                    borderRadius: BorderRadius.circular(8.0), 
                  ), 
                ), 
                Container( 
                  margin: EdgeInsets.all(6.0), 
                  decoration: BoxDecoration( 
                  color: Colors.grey,
                    borderRadius: BorderRadius.circular(8.0), 
                  ), 
                ), 
  
          ], 
              options: CarouselOptions( 
                height: 180.0, 
                enlargeCenterPage: true, 
                autoPlay: true, 
                aspectRatio: 16 / 9, 
                autoPlayCurve: Curves.fastOutSlowIn, 
                enableInfiniteScroll: true, 
              autoPlayAnimationDuration: Duration(milliseconds: 800), 
                viewportFraction: 0.8, 
              ), 
          ), 
        ], 
      ),

Интересные вопросы для изучения