如何在Flutter中为转盘滑块的中间一个(放大中心页)进行不同于其他项目的设计

5lwkijsr  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(319)
CarouselSlider(
            items: packList.map((item){
                    return InkWell(
                      child: item,
                      onTap: (){

                      },
                    );
            }).toList(),
            carouselController: _controller,
            options: CarouselOptions(
                autoPlay: true,
                enlargeCenterPage: true,
                height: 230,
                autoPlayInterval: const Duration(seconds: 3),
                autoPlayAnimationDuration: const Duration(milliseconds: 800),
                autoPlayCurve: Curves.fastOutSlowIn,
                pauseAutoPlayOnTouch: true,
                viewportFraction: 0.51,
                onPageChanged: (index, reason) {
                  setState(() {
                    _current = index;
                  });
                }
                ),
          )
qv7cva1a

qv7cva1a1#

我假设您使用的是carousel_slider包,您可以在每次当前索引改变时更新items参数,使具有当前索引的项与其他项不同。因此,如果项的索引等于当前索引,则返回不同的widget,否则返回正常的widget。

items: [
    for (var index = 0; index < items.length; index++) ...[
      if (index == _current) ...[
        FancyWidget(),
      ] else ...[
        NormalWidget()
      ]
    ]
  ],

例如,如果您希望中心小部件用红色容器 Package ,那么您将得到以下CarouselSlider

CarouselSlider(
      options: CarouselOptions(
          autoPlay: true,
          enlargeCenterPage: true,
          height: 230,
          autoPlayInterval: const Duration(seconds: 3),
          autoPlayAnimationDuration: const Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,
          pauseAutoPlayOnTouch: true,
          viewportFraction: 0.51,
          onPageChanged: (index, reason) {
            setState(() {
              _current = index;
            });
          }),
      items: [
        for (var index = 0; index < items.length; index++) ...[
          if (index == _current) ...[
            Container(
              color: Colors.red,
              padding: EdgeInsets.all(15),
              child: Image.network(
                items[index],
              ),
            )
          ] else ...[
            Image.network(
              items[index],
            )
          ]
        ]
      ],
    ),

相关问题