如何在Flutter中创建swiper轮播?

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

如何使用 Flutter 创建类似于下图中的轮播滑块。

我尝试使用card_swiper,如下所示,但它仍然不像图像。我希望有人能帮忙。

@override
  Widget build(BuildContext context) {
    return Swiper(
      layout: SwiperLayout.CUSTOM,
      customLayoutOption: CustomLayoutOption(startIndex: -1, stateCount: 3)
        ..addScale([0.8, 1, 0.8], Alignment.center)
        ..addRotate([-25.0 / 180, 0.0, 25 / 180])
        ..addTranslate([
          const Offset(-300.0, -40.0),
          const Offset(0.0, 0.0),
          const Offset(300.0, -40.0)
        ]),
      itemWidth: 270.0,
      itemHeight: 329.0,
      itemBuilder: (context, index) {
        return AppKeepAlive(
          child: Container(
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(width: 1, color: Colors.black)),
          ),
        );
      },
      outer: false,
      itemCount: 3,
    );

enter image description here

flutter slider carousel card flutter-swiper
1个回答
0
投票

添加

..addRotate([-20.0 / 180 * 3.14, 0.0, 20.0 / 180 * 3.14]) // Slight rotation for angled cards
旋转角度较小(±20 度),为侧卡提供微妙的角度布局。

© www.soinside.com 2019 - 2024. All rights reserved.