我正在使用Ffltter中的CarouselSlider来显示一系列图像.我想要的行为是:
中心图像应放大并突出显示. 中央图像左侧和右侧的图像应该是部分可见的,基本上显示了其中的一半. 问题:右边的图像与放大的中心图像重叠,这是我想避免的.
以下是我的实现的一个版本:
Widget build(BuildContext context) {
double imageWidth = MediaQuery.of(context).size.width * 0.4;
return Column(
children: [
Container(
width: MediaQuery.of(context).size.width *
0.8, // This sets the width of the carousel.
child: CarouselSlider.builder(
itemCount: imageList.length,
itemBuilder: (BuildContext context, int itemIndex, int realIndex) {
bool isCurrentPage = itemIndex == _currentIndex;
double scale = isCurrentPage ? 1.5 : 1.0;
return Center(
child: Transform.scale(
scale: scale,
child: Opacity(
opacity: 1.0,
child: Image.asset(
imageList[itemIndex],
fit: BoxFit.fill,
width: isCurrentPage ? imageWidth * 0.8 : imageWidth,
height: 250,
),
),
),
);
},
options: CarouselOptions(
height: MediaQuery.of(context).size.height *
(widget.isMobile ? 0.4 : 0.6),
autoPlay: true,
enlargeCenterPage: true,
viewportFraction: 0.333,
aspectRatio: 16 / 9,
onPageChanged: (index, reason) {
setState(() {
_currentIndex = index;
});
},
),
),
),
const SizedBox(
height: 50,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buildIndicator(_currentIndex - 1),
buildIndicator(_currentIndex),
buildIndicator(_currentIndex + 1),
],
),
],
);
}
我想实现的目标是: