另一个 ListView.builder 中的 ListView.builder 颤动

Question

我有一个ListView.builder，它的右侧有一个下拉箭头，当点击它时，它会显示另一个listView.builder 及其项目。第一个列表运行良好，因为它占用了其子项的大小，但第二个列表没有发生相同的体验。我已经尝试了所有解决方案，但由于出现错误，它仍然无法正常工作。

代码

  Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(
                height: 30,
              ),
              Text(
                "SELECT A PACKAGE",
                textAlign: TextAlign.start,
                style: TextStyle(
                  fontSize: 12,
                  fontFamily: 'Lato',
                  color: textColor,
                  fontWeight: FontWeight.w700,
                ),
              ),
              SizedBox(
                height: 14,
              ),
              !isDataLoaded?ShimmerListView():
                  Expanded(
                    child: ListView.builder(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      itemCount: bloc.packages.length,
                      itemBuilder: (context, index){
                        return Container(
                          margin: EdgeInsets.only(bottom: 5),
                          child: Card(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.
                                all(Radius.circular(12)),
                                side: BorderSide(color:
                                borderColor, width: 1)
                            ),
                            child: Container(
                              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
                              child:  Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Column(
                                    mainAxisSize: MainAxisSize.min,
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        bloc.packages[index].title,
                                        textAlign: TextAlign.start,
                                        style: TextStyle(
                                          fontSize: 16,
                                          fontFamily: 'Lato',
                                          color: primaryColor,
                                          fontWeight: FontWeight.w700,
                                        ),
                                      ),
                                      SizedBox(
                                        height: 14,
                                      ),
                                      Text(
                                        bloc.packages[index].desc,
                                        textAlign: TextAlign.start,
                                        style: TextStyle(
                                          fontSize: 14,
                                          fontFamily: 'Lato',
                                          color: textColor,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      bloc.packages[index].isTapped?
                                      Container(
                                        height: 300,
                                        child: ListView.builder(
                                          physics: NeverScrollableScrollPhysics(),
                                          shrinkWrap: true,
                                          itemCount: bloc.packages[globalIndex].plans.length,
                                          itemBuilder: (context, index){
                                          return Container(
                                            width: 230,
                                            margin: EdgeInsets.only(top: 14),
                                            padding: EdgeInsets.symmetric
                                              (horizontal: 10, vertical: 10),
                                            decoration: BoxDecoration(
                                                color:containerBgColor,
                                                borderRadius: BorderRadius
                                                    .all(Radius.circular(12))
                                            ),
                                            child: Row(
                                              mainAxisSize: MainAxisSize.min,
                                              children: [
                                                Container(
                                                  width:24,
                                                  height:24,
                                                  decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    shape: BoxShape.circle,
                                                  ),
                                                ),
                                                SizedBox(
                                                  width: 16,
                                                ),
                                                Column(
                                                  mainAxisSize: MainAxisSize.min,
                                                  crossAxisAlignment: CrossAxisAlignment.start,
                                                  children: [
                                                    Text(
                                                      bloc.packages[index].desc,
                                                      textAlign: TextAlign.start,
                                                      style: TextStyle(
                                                        fontSize: 14,
                                                        fontFamily: 'Lato',
                                                        color: textColor,
                                                        fontWeight: FontWeight.w500,
                                                      ),
                                                    ),
                                                    SizedBox(
                                                      height: 10,
                                                    ),
                                                    Text(
                                                      'NGN ${12000}',
                                                      textAlign: TextAlign.start,
                                                      style: TextStyle(
                                                        fontSize: 16,
                                                        fontFamily: 'Lato',
                                                        color: normalText,
                                                        fontWeight: FontWeight.w700,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ],
                                            ),
                                          );
                                          },
                                        ),
                                      )
                                          :Container(),
                                    ],
                                  ),
                                  Spacer(),
                                  IconButton(icon:
                                  Icon(
                                   !bloc.packages[index].isTapped?
                                   Mdi.chevronDown:
                                   Mdi.chevronUp,
                                    color: textColor,
                                  ), onPressed:(){
                                    setState(() {
                                      globalIndex = index;
                                      bloc.packages[index].isTapped
                                      = !bloc.packages[index].isTapped;
                                    });
                                  })
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
            ],
          ),

错误

RenderBox was not laid out: RenderRepaintBoundary#87e06 relayoutBoundary=up27 NEEDS-PAINT

尝试用扩展包装第二个列表并给出固定高度但得到相同的错误。

Answer 1

ListView 需要一个有限的高度，但你内心的ListView 有一个无限的高度。
一种方法是用Container、SizedBox 或任何具有定义高度的小部件包裹内部ListView

例子

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('title'),
    ),
    body: ListView.builder(
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        if (index == 10) {
          return Container(
            height: 200,  // finite height
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 30,
                  color: Color.fromRGBO(10, 255, index * 10, 100),
                  child: Text(index.toString()),
                );
              },
            ),
          );
        }
        return Container(
          height: 36,
          color: Color.fromRGBO(index * 10, 20, 100, 100),
          child: Text(index.toString()),
        );
      },
    ),
  );
}

如果您想要更简洁的方式，请查看NestedScrollView 和this answer 来回答类似问题。

---

编辑：'constraints.hasBoundedWidth': is not true. 错误

您需要为ListView 提供有限宽度。你的ListView 是连续的，宽度是无限的。

要修复它，请按如下方式编辑第 39 行中的行。

Row(
  children: [
    Expanded( // 1- Wrap the Column with an Expanded
      child: Column(
        // ...
      ),
    ),
    // Spacer(), 2- Remove Spacer
    IconButton(
      // ...
    ),
  ],
)