在 Flutter 中创建图像轮播

发布于11月18日

我怎样才能像下面的例子一样创建一个容器的 carousel 呢？

我查看了Pageview类，但它只显示一个容器，而隐藏了其他容器.但我想看看集装箱的左右两侧.在《颤栗》中有这样做的方法吗？

注意:当前容器应始终位于中心位置

Example

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

以下ArgumentError被抛出 AnimatedBuilder(动画:PageController#fc5f0(一个客户端，偏移 0.0)，脏，状态:_AnimatedState#1ea5c):无效参数(LowerLimit):不是数字:NULL-

这将被抛出到他调用Controler.page的位置.有人知道我怎么解决这个问题吗？

推荐答案

实际上你想要的是isPageView.

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,
      ),
    );
  }
}