如何像下面的示例一样创建容器轮播?
我查看了 Pageview 类,但这只显示了一个容器并隐藏了其他容器。但我也想在左右部分看到容器。无论如何在 Flutter 中可以做到这一点以及如何做到这一点?
注意:当前 Container 应始终位于中心
编辑:Darky 给出了一个非常好的示例,但我对他给出的代码有一个问题:
The following ArgumentError was thrown building AnimatedBuilder(animation: PageController#fc5f0(one client, offset 0.0), dirty, state: _AnimatedState#1ea5c): Invalid argument (lowerLimit): not a number: null –
这会被扔到他调用controller.page的位置。有谁知道我该如何解决这个问题?
最佳答案
其实你想要的是 PageView
.
PageView
接受 PageController
作为参数。该 Controller 拥有一个 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,
),
);
}
}
https://stackoverflow.com/questions/47349784/