1

我有一些卡片（可以翻转，我为此使用了 flip_card）。现在我想使用carousel_slider展示这些卡片。

但是如果我使用 aFlipCardController来翻转卡片（当包裹在 carousel_slider 下时），它会翻转错误的卡片（在我的情况下，是下一张卡片）。此控制器由当前卡的按钮控制。

我正在使用这段代码：

child: CarouselSlider(
  items: [0, 1, 2].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return FlipCard(
          controller: controller,  //FlipCardController
          fill: Fill.fillBack,
          flipOnTouch: false,
          direction: FlipDirection.HORIZONTAL,
          front: ExperienceCardFront(  //this is my custom widget
            image: data[i][4],
            title: data[i][0]),
          back: ExperienceCardBack(),  //another custom widget
       );
     });
   }).toList(),
   options: CarouselOptions(),
),

这是卡片的前面小部件，其中包含包含控制器的按钮：

//import statements

class ExperienceCardFront extends StatefulWidget {
  //contents
}

class _ExperienceCardFrontState extends State<ExperienceCardFront> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          //other widgets
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: MaterialButton(
              child: text('Read More', 15, Colors.blueGrey),
              onPressed: () {
                controller.toggleCard();  //here is the controller
              },
            ),
          ),
        ],
      ),
    );
  }
}

我附上相同的屏幕录像：

我还发现，如果控制器被移除并flipOnTouch设置为 true，则可以在触摸时翻转所需的卡片。我仅在使用控制器时遇到此问题。

4

0 回答 0