在 Flutter 中创建图像轮播

Posted 2023-02-23

【中文标题】在 Flutter 中创建图像轮播

【英文标题】：Creating Image Carousel in Flutter

【发布时间】：2018-05-01 04:18:26

【问题描述】：

如何像下面的示例一样创建容器轮播？

我查看了 Pageview 类，但这只显示了一个容器并隐藏了其他容器。但我也想在左右部分看到容器。无论如何在 Flutter 中可以做到这一点以及如何做到这一点？

注意：当前 Container 应始终位于中心

编辑：Darky 给出了一个非常好的示例，但我对他给出的代码有一个问题：

以下 ArgumentError 被抛出构建 AnimatedBuilder（动画：PageController#fc5f0（一个客户端，偏移量 0.0), 脏, 状态: _AnimatedState#1ea5c): 无效参数 (lowerLimit): 不是数字: null –

这会被扔到他调用controller.page的位置。有谁知道我该如何解决这个问题？

【问题讨论】：

值 = 值1.0？ 1.0：价值；

【参考方案1】：

其实你想要的是PageView.

PageView 接受 PageController 作为参数。该控制器拥有一个viewportFraction 属性（默认为 1.0），它以百分比表示显示页面的主要大小。

这意味着 viewportFraction 为 0.5 时，主页将居中。你会在左右两边看到半页（如果有的话）

例子：

class Carroussel extends StatefulWidget 
  @override
  _CarrousselState createState() => new _CarrousselState();


class _CarrousselState extends State<Carroussel> 
  PageController controller;
  int currentpage = 0;

  @override
  initState() 
    super.initState();
    controller = PageController(
      initialPage: currentpage,
      keepPage: false,
      viewportFraction: 0.5,
    );
  

  @override
  dispose() 
    controller.dispose();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
        child: Container(
          child: PageView.builder(
              onPageChanged: (value) 
                setState(() 
                  currentpage = value;
                );
              ,
              controller: controller,
              itemBuilder: (context, index) => builder(index)),
        ),
      ),
    );
  

  builder(int index) 
    return AnimatedBuilder(
      animation: controller,
      builder: (context, child) 
        double value = 1.0;
        if (controller.position.haveDimensions) 
          value = controller.page - index;
          value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
        

        return Center(
          child: SizedBox(
            height: Curves.easeOut.transform(value) * 300,
            width: Curves.easeOut.transform(value) * 250,
            child: child,
          ),
        );
      ,
      child: Container(
        margin: const EdgeInsets.all(8.0),
        color: index % 2 == 0 ? Colors.blue : Colors.red,
      ),
    );
  

【讨论】：

在构建 AnimatedBuilder（动画：PageController#fc5f0（一个客户端，偏移量 0.0），脏，状态：_AnimatedState#1ea5c）时引发以下 ArgumentError：无效参数（lowerLimit）：不是数字：null

如果我执行 controller.page 我不明白为什么会出现这些错误

我通过捕获 ArgumentError 并将值设置为 1.0 来避免错误。

在调用pageController.page之前应该检查pageController.position.haveDimensions是否为真，否则可能会抛出NPE。

我不明白动画是如何工作的。我看到在 PageView 滚动时调用了构建器函数。但这怎么可能？感谢 AnimatedBuilder 小部件？还是为了控制器？ ://

【参考方案2】：

这解决了我的问题：

Future.delayed(const Duration(milliseconds: 20), () 

  setState(() 
    _pageController.animateToPage(0, duration: Duration(milliseconds: 1), curve: Curves.bounceIn);
  );

);

【讨论】：

也为我解决了这个问题。我认为使用 AnimationController 的上述解决方案很好，但不确定如何将其集成到示例中，因为它使用的是 PageController