Question

如何创建容器轮播，如下例所示？

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

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

Example

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

抛出以下ArgumentError构建AnimatedBuilder（animation：PageController＃fc5f0（一个客户端，偏移0.0），脏，状态：_AnimatedState＃1ea5c）：无效参数（lowerLimit）：不是数字：null -

这会在他调用controller.page的位置抛出。有谁知道我怎么解决这个问题？

Answer 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 = new PageController(
      initialPage: currentpage,
      keepPage: false,
      viewportFraction: 0.5,
    );
  }

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

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

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

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

Answer 2

这解决了我的问题：

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

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

});

在颤振中创建图像轮播

2 个答案: