如何创建容器轮播,如下例所示？
我查看了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,);
}
}
