Flutter调用CarouselSlider出现RenderFlex底部无限像素溢出报错

• 主屏幕的HomeScreen外层用了无高度约束的Column，内部嵌套的轮播组件自带可滚动视图，Flutter无法计算无限高度的视图布局，导致溢出
• 封装的轮播组件ImageSlider额外嵌套了Scaffold和ListView，作为子组件调用时会占用无限高度，不符合组件封装逻辑

第一步：修改轮播组件代码 #

去掉不必要的Scaffold和ListView，直接返回CarouselSlider即可：

// 修正后的轮播组件build方法
@override
Widget build(BuildContext context) {
  return CarouselSlider(
    items: [
      //1st ImageSlider
      Container(
        padding: EdgeInsets.only(bottom: 20),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          image: DecorationImage(
            image: AssetImage("assets/images/13.jpg"),
            fit: BoxFit.cover,
          ),
        ),
      ),
      //2nd Image of Slider
      Container(
        padding: EdgeInsets.only(bottom: 20),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          image: DecorationImage(
            image: AssetImage("assets/images/15.jpg"),
            fit: BoxFit.cover,
          ),
        ),
      ),
      //3rd Image of Slider
      Container(
        margin: EdgeInsets.all(6.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          image: DecorationImage(
            image: AssetImage("assets/images/3.jpg"),
            fit: BoxFit.cover,
          ),
        ),
      ),
    ],
    //Slider Container properties
    options: CarouselOptions(
      height: 50,
      autoPlay: true,
      reverse: true,
      enlargeCenterPage: true,
      autoPlayInterval: Duration(seconds: 2),
    ),
  );
}

第二步：修改主屏幕代码 #

根据需求二选一即可：

方案1：首页内容需要滚动 #

把Column外层套SingleChildScrollView，同时去掉轮播外层多余的Row包裹：

@override
Widget build(BuildContext context) {
  return AnimatedContainer(
    duration: Duration(milliseconds: 250),
    color: Colors.blueGrey.shade100,
    child: SingleChildScrollView( // 新增滚动容器
      child: Column(
        children: [
          SizedBox(
            height: 40,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween, // 可直接开启实现两端对齐，无需手动写left padding
            children: [
              IconButton(
                icon: SvgPicture.asset(
                  "assets/icons/menu.svg",
                ),
                onPressed: () {},
              ),
              Container(
                width: _folded ? 52 : 250,
                height: getProportionateScreenHeight(50),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(32),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.brown.shade300.withOpacity(0.3),
                        spreadRadius: 0,
                        blurRadius: 8,
                        offset: Offset(-4, 0),
                      ),
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.3),
                        spreadRadius: 0,
                        blurRadius: 8,
                        offset: Offset(4, 0),
                      ),
                    ]),
                child: Row(
                  children: [
                    Expanded(
                      child: Container(
                        padding: EdgeInsets.only(left: 16),
                        child: !_folded
                            ? TextField(
                                decoration: InputDecoration(
                                  hintText: 'Search Book, Author,Genre ',
                                  hintStyle: TextStyle(
                                    color: Colors.black54,
                                    fontFamily:
                                        GoogleFonts.oregano().fontFamily,
                                  ),
                                  border: InputBorder.none,
                                ),
                              )
                            : null,
                      ),
                    ),
                    AnimatedContainer(
                      duration: Duration(milliseconds: 400),
                      child: Material(
                        type: MaterialType.transparency,
                        child: InkWell(
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(_folded ? 32 : 0),
                              topRight: Radius.circular(32),
                              bottomLeft: Radius.circular(_folded ? 32 : 0),
                              bottomRight: Radius.circular(32),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.all(16.0),
                              child: SvgPicture.asset(
                                  _folded
                                      ? "assets/icons/search.svg"
                                      : "assets/icons/close1.svg",
                                  height: getProportionateScreenHeight(18),
                                  color: Colors.black54),
                            ),
                            onTap: () {
                              setState(() {
                                _folded = !_folded;
                              });
                            }),
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
          ImageSlider() // 去掉多余的Row包裹
        ],
      ),
    ),
  );
}

方案2：首页内容固定不需要滚动 #

给轮播组件外层套Expanded，让它填充Column的剩余可用空间即可。

内容的提问来源于stack exchange，提问作者jasmine