另一個 ListView.builder 中的 ListView.builder flutter

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以及類似問題的答案。

---

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