Я хочу создать горизонтальное представление списка, которое автоматически прокручивается без вмешательства пользователя с определенной скоростью. Кроме того, эта прокрутка должна выполняться бесконечно, а просмотр списка должен повторяться.
В поиске, который я делал, обычно автоматическая прокрутка была для перехода к конкретному пункту, но автоматической прокрутки до конца списка я не нашел.
Вот как вы можете достичь желаемого результата.
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,
),
),
],
),