我在 Flutter 中使用 Carousel Slider 并启用了 enlargeCenterPage,如下所示。旋转木马的项目是一个容器,包括图像、左侧下方的一些文本和右侧的“收藏夹”图标。我想要做的是当下一页来到中心时,随着它的放大,我希望文本和图标能够顺畅地跟随并自己也放大。然后当我滚动并且页面离开中心时,文本和图标再次跟随并且平滑地变得像以前一样小。有什么办法可以做到这一点?
https://files.fm/u/tt2xdvnr7 有一个视频,说明我想要实现的目标,正如下面的评论所要求的。
代码如下:
class MyCarousel extends StatefulWidget {
const MyCarousel({super.key});
@override
State<MyCarousel> createState() => _MyCarouselState();
}
class _MyCarouselState extends State<MyCarousel> {
final controller = CarouselController();
@override
Widget build(BuildContext context) {
return Center(
child: CarouselSlider.builder(
carouselController: controller,
options: CarouselOptions(
aspectRatio: 1.6,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 6),
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
enableInfiniteScroll: true,
),
itemCount: items.length,
itemBuilder: (context, index, realIndex) => _buildItem(index),
),
);
}
Widget _buildItem(int index){
Item current_item = items[index];
return Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(9)),
child: Container(
width: 370,
height: 200,
color: LightPurple,
child: Column(
children: [
Image.asset(current_item.image,
fit: BoxFit.fill,
height: 180,
width: 370,),
Row(
children: [
Column(
children: [
AutoSizeText(
current_item.name,
style: TextStyle(fontSize: 20),
),
AutoSizeText(
current_item.surname,
style: TextStyle(fontSize: 20),
),
],
),
// Here comes the icon with alignment "space.between" so it will go to the right
],
),
],
),
),
),
);
}
}
Item是我做的一个类,里面有图片,名字和姓氏。
我已经尝试过 1. 文本小部件,2. 自动调整文本小部件,3. 固定框小部件内的文本,但没有用。还没有用图标尝试过一些东西,因为我想它会是类似的解决方案,但我还找不到文本。我期望的是每页的高度(每个容器的项目)将会改变,文本也会改变。但是后来文字保持不变,如果我把它们做得更大一点,它们就会溢出容器,只有那些不在中心的,因为它们更小。