[英]Flutter - How to make PageView & ListView?
我正在嘗試從此水平滾動卡中使用PageView,PageController和ListView制作輪播,並在flutter中具有Snap效果 。 但這引發了異常...
渲染庫引起的異常CA ════════════════I / flutter(17678):在performResize()期間引發了以下斷言:I / flutter(17678):水平視口的高度不受限制。 I / flutter(17678):視口在橫軸上擴展以填充其容器,並約束其子項以匹配I / flutter(17678):其在橫軸上的范圍。 在這種情況下,水平視口將獲得無限量的I /顫振(17678):可在其中擴展的垂直空間。
有人可以幫我解決嗎?
我想在背景圖像,變換類和淡入淡出的堆棧中添加此輪播。
@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)),
),
),
);
正如您可能從錯誤中猜到的那樣,基本上,這意味着由於您沒有指定有限的高度,因此ListView
正在獲得無限的高度。 嘗試在ListView.builder
和ListView
內使用shrinkWrap: true
。
或者,您也可以嘗試將ListView
包裝在高度有限的Container
或SizedBox
中。
例-
Container(
height: 200.0,
child: ListView(
/*Remaining Code*/
),
)
您可以嘗試使用ListView.builder
進行相同的操作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.