Flutter - 如何制作 PageView 和 ListView？

Posted 2023-02-23

【中文标题】Flutter - 如何制作 PageView 和 ListView？

【英文标题】：Flutter - How to make PageView & ListView?

【发布时间】：2019-05-26 21:42:05

【问题描述】：

我正在尝试使用来自 Horizontally scrollable cards with Snap effect in flutter 的 PageView、PageController 和 ListView 制作轮播。但是它抛出了这个异常......

══╡渲染库╞═══════════════════════════════ ══════════════════════ I/flutter (17678)：在 performResize() 期间引发了以下断言： I/flutter (17678)：水平视口的高度没有限制。 I/flutter (17678)：视口在交叉轴上扩展以填充其容器并约束其子项以匹配 I/flutter (17678)：它们在横轴上的范围。在这种情况下，水平视口被赋予了无限量的 I/flutter (17678)：要扩展的垂直空间。

有人可以帮我解决吗？

我想在 Stack 中添加这个 Carousel，其中填充了背景图像、变换类和淡入淡出过渡。

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

这是完整代码https://pastebin.com/xXRkaWuR

【问题讨论】：

请分享一个工作代码，你的代码有很多格式问题...

这是完整代码pastebin.com/xXRkaWuR

【参考方案1】：

正如您可能从错误中猜到的那样，基本上这意味着由于您没有指定有限高度，ListView 正在获得无限高度。 尝试在 ListView.builder 和 ListView 中使用 shrinkWrap: true。

或者，您也可以尝试将ListViews 包装在有限高度的Container 或SizedBox 中。

例子-

Container(
  height: 200.0,
  child: ListView(
   /*Remaining Code*/
  ),
)

你可以尝试对ListView.builder做同样的事情