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

有无限的高度。
一种方法是用

ListView

、

Container

或任何具有定义高度的小部件包裹内部

SizedBox

。

示例

@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

，以及类似问题的这个答案。

---

编辑：

'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(
      // ...
    ),
  ],
)

Answer 2

我遇到了同样的问题，并通过在 CustomScrollView 中嵌套 ListView.builder 来解决它。注意将嵌套ListView.builder的shrinkwrap设置为true。

            return CustomScrollView(
              slivers: [
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    childCount: 5,
                    (BuildContext context, int index) {
                      return Column(
                        children: [
                          if (index == 0) ...[Text('PART ONE')],
                          if (index < 4) ...[
                            ListTile(
                              title: Text('Part one $index'),
                            ),
                          ],
                          if (index == 4) ...[
                            Text('PART TWO'),
                            ListView.builder(
                                shrinkWrap: true,
                                itemCount: 3,
                                itemBuilder: (context, index) {
                                  return ListTile(
                                    title:
                                        Text(' Part two ${index.toString()}'),
                                  );
                                }),
                          ],
                        ],
                      );
                    },
                  ),
                ),
              ],
            );