android – 在Flutter中创建图像轮播

发布时间：2020-12-14 14:55:32 所属栏目：百科来源：网络整理

导读：如何创建容器轮播,如下例所示？我查看了Pageview类,但这只显示一个Container并隐藏其他Container.但是我想看看Container左右部分也是如此.反正有没有在Flutter这样做？注意：当前容器应始终位于中心编辑：Darky给出了一个非常好的示例,但我对他给定的代码

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

我查看了Pageview类,但这只显示一个Container并隐藏其他Container.但是我想看看Container左右部分也是如此.反正有没有在Flutter这样做？

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

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

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

这会被调到控制controller.page的位置.有谁知道我怎么解决这个问题？

解决方法

其实你想要的是PageView.

PageView接受PageController作为参数.并且该控制器拥有一个viewportFraction属性(默认为1.0),它以百分比表示显示页面的主要大小.

这意味着,如果viewportFraction为0.5,则主页面将居中.你会看到左右两半的页面(如果有的话)

示例：

example_gif

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!