ListView.seperated
работает аналогично ListView.builder
, потому что вы получаете флаттер индекса, который выполняет сопоставление для вас, просто предоставив виджет, которому вы хотите, чтобы он отображался, как это.
List<Image> images = [
Image.asset("assets/images/logo.png"),
Image.asset("assets/images/logo.png"),
Image.asset("assets/images/logo.png"),
];
Widget myImage(int index) {
return Container(
height: MediaQuery.of(context).size.width / 2,
width: MediaQuery.of(context).size.width / 1.4,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
image: DecorationImage(image: images[index].image, fit: BoxFit.cover),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: new ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return SizedBox(
width: 10,
);
},
scrollDirection: Axis.horizontal,
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return myImage(index);
},
),
),
);
}
}