android – 在Flutter中创建图像轮播

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

我查看了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,则主页面将居中.你会看到左右两半的页面(如果有的话)

示例：

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

总结

以上是内存溢出为你收集整理的android – 在Flutter中创建图像轮播全部内容，希望文章能够帮你解决android – 在Flutter中创建图像轮播所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。