[英]Flutter - How to make PageView & ListView?
I'm trying to make a Carousel using PageView, PageController and ListView from this Horizontally scrollable cards with Snap effect in flutter . 我正在尝试从此水平滚动卡中使用PageView,PageController和ListView制作轮播,并在flutter中具有Snap效果 。 But it throwed this exception...
但这引发了异常...
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter (17678): The following assertion was thrown during performResize(): I/flutter (17678): Horizontal viewport was given unbounded height. 渲染库引起的异常CA ════════════════I / flutter(17678):在performResize()期间引发了以下断言:I / flutter(17678):水平视口的高度不受限制。 I/flutter (17678): Viewports expand in the cross axis to fill their container and constrain their children to match I/flutter (17678): their extent in the cross axis.
I / flutter(17678):视口在横轴上扩展以填充其容器,并约束其子项以匹配I / flutter(17678):其在横轴上的范围。 In this case, a horizontal viewport was given an unlimited amount of I/flutter (17678): vertical space in which to expand.
在这种情况下,水平视口将获得无限量的I /颤振(17678):可在其中扩展的垂直空间。
Can someone help me to fix it? 有人可以帮我解决吗?
I want to add this Carousel inside of Stack-filled with background image, transform class, and fade transition. 我想在背景图像,变换类和淡入淡出的堆栈中添加此轮播。
@override
void initState() {
super.initState();
controller = PageController(
initialPage: 0,
keepPage: true,
);
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
builder: (BuildContext context, Widget child) {
return Scaffold(
//BODY
body: ListView(children: <Widget>[
new Stack(
children: <Widget>[
new AspectRatio(...),
new Transform(...),
//THIS IS
new ListView.builder(
itemCount: 3,
scrollDirection: Axis.horizontal,
padding: EdgeInsets.symmetric(vertical: 16.0),
itemBuilder: (BuildContext context, int index) {
if (index % 3 == 0) {
return _buildCarousel(context, index ~/ 3);
} else {
return Divider();
}
},
),
}
}
}
Widget _buildCarousel(BuildContext context, int carouselIndex) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Carousel $carouselIndex'),
SizedBox(
// you may want to use an aspect ratio here for tablet support
height: 200.0,
child: PageView.builder(
// store this controller in a State to save the carousel scroll position
controller: PageController(viewportFraction: 0.8),
itemBuilder: (BuildContext context, int itemIndex) {
return _buildCarouselItem(context, carouselIndex, itemIndex);
},
),
)
],
);
Widget _buildCarouselItem(
BuildContext context, int carouselIndex, int itemIndex) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
),
);
This is the full code https://pastebin.com/xXRkaWuR 这是完整的代码https://pastebin.com/xXRkaWuR
As you might have guessed from the error, basically it means since you haven't specified a finite height, ListView
is getting infinite height. 正如您可能从错误中猜到的那样,基本上,这意味着由于您没有指定有限的高度,因此
ListView
正在获得无限的高度。 Try using shrinkWrap: true
inside your ListView.builder
and ListView
. 尝试在
ListView.builder
和ListView
内使用shrinkWrap: true
。
Or alternatively you can also try wrapping your ListView
s in a Container
or SizedBox
of finite height. 或者,您也可以尝试将
ListView
包装在高度有限的Container
或SizedBox
中。
Example- 例-
Container(
height: 200.0,
child: ListView(
/*Remaining Code*/
),
)
You can try doing the same with ListView.builder
您可以尝试使用
ListView.builder
进行相同的操作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.