在 Flutter 中放大中心页面时,如何使 Carousel Slider 中的文本和图标大小响应?

问题描述 投票:0回答:0

我在 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. 固定框小部件内的文本,但没有用。还没有用图标尝试过一些东西,因为我想它会是类似的解决方案,但我还找不到文本。我期望的是每页的高度(每个容器的项目)将会改变,文本也会改变。但是后来文字保持不变,如果我把它们做得更大一点,它们就会溢出容器,只有那些不在中心的,因为它们更小。

flutter dart text carousel responsive
© www.soinside.com 2019 - 2024. All rights reserved.