[英]Flutter : how to Horizontal scroll moving left and right when clicking previous and forward button
I added two button in a ListView.我在 ListView 中添加了两个按钮。 It will be horizontal scroll moving left and right when I will click preview and forward button.
当我单击预览和前进按钮时,它将左右移动水平滚动。 I want to left side scrolling on click left button, and I want to right side scrolling on click right side button.
我想在单击左侧按钮时向左滚动,我想在单击右侧按钮时向右滚动。 but I do not have an idea how to do it.
但我不知道该怎么做。 here is source code.
这是源代码。
class ScrolllingOnClickButton extends StatefulWidget {
@override
_ScrolllingOnClickButtonState createState() => _ScrolllingOnClickButtonState();
}
class _ScrolllingOnClickButtonState extends State<ScrolllingOnClickButton> {
@override
Widget build(BuildContext context) {
var sizeDevice = MediaQuery.of(context).size;
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
color: Colors.green,
)),
Expanded(
flex: 2,
child: Row(
children: <Widget>[
ClipOval(
child: Material(
color: Colors.blue,
child: InkWell(
splashColor: Colors.red,
child: SizedBox(
width: 56,
height: 56,
child: Icon(Icons.arrow_back)),
onTap: () {},
),
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.transparent,
)),
ClipOval(
child: Material(
color: Colors.blue,
child: InkWell(
splashColor: Colors.red,
child: SizedBox(
width: 56,
height: 56,
child: Icon(Icons.arrow_forward)),
onTap: () {},
),
),
),
],
)),
Expanded(
flex: 16,
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
physics: PageScrollPhysics(),
itemCount: word_data.drink.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Column(
children: <Widget>[
Expanded(
flex: 6,
child: GestureDetector(
onTap: () {},
child: Container(
color: Colors.purple,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Image.asset(
"asset/drink_images/" +
word_data.drink[index] +
".png",
fit: BoxFit.contain,
),
),
),
)),
],
),
width: sizeDevice.width,
);
}),
color: Colors.yellow,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.lightBlueAccent,
))
],
),
),
);
}
}
I recommend using this package carousel_slider .我推荐使用这个包carousel_slider 。 It would save you a lot of time implementing the slider behavior.
它会为您节省大量时间来实现滑块行为。
I've created a sample app here for you to test:我在这里创建了一个示例应用程序供您测试:
import 'package:carousel_slider/carousel_options.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() => runApp(CarouselDemo());
class CarouselDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: BasicDemo());
}
}
class BasicDemo extends StatelessWidget {
final controller = CarouselController();
@override
Widget build(BuildContext context) {
List<int> list = [1, 2, 3, 4, 5];
return Scaffold(
appBar: AppBar(title: Text('Basic demo')),
body: Container(
height: 400,
child: Column(
children: [
Expanded(
child: CarouselSlider(
carouselController: controller,
options: CarouselOptions(),
items: list
.map((item) => Container(
child: Center(child: Text(item.toString())),
color: Colors.green,
))
.toList(),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () => controller.previousPage()),
IconButton(
icon: Icon(Icons.arrow_forward_ios),
onPressed: () => controller.nextPage())
],
)
],
)),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.