Flutter嵌套ListView.separated

我想要一個可以水平滾動的列的 ListView，并且在每個列中都有一個可以垂直滾動的行的 ListView。

這是我寫的代碼：

@override
Widget build(BuildContext context) {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          "AppName",
          textAlign: TextAlign.center,
        ),
        Expanded(
          //This is the first ListView, the itemBuilder returns a Column
          child: ListView.separated(
            scrollDirection: Axis.horizontal,
            controller: scrollController,
            itemCount: filesProvider.directories.length,
            itemBuilder: (BuildContext context, int index) {
              return buildColumn(context, index, filesProvider);
            },
            separatorBuilder: (BuildContext context, int index) {
              return SizedBox(
                width: 30,
              );
            },
          ),
        ),
      ],
    ),
  );
}

Column buildColumn(BuildContext context, int index, FilesProvider provider) {
  return Column(
    children: [
      Text(
        "Column " index,
        textAlign: TextAlign.center,
      ),
      Expanded(
        //This is the second ListView, the itemBuilder returns a Row
        child: ListView.separated(
          scrollDirection: Axis.vertical,
          controller: scrollController,
          itemCount: (provider.dirNames[index].length / colonnePerTipo).round(),
          itemBuilder: (BuildContext context, int rowIndex) {
            return buildRow(context, rowIndex, provider);
          },
          separatorBuilder: (BuildContext context, int rowIndex) {
            return SizedBox(
              width: 10,
            );
          },
        ),
      ),
    ],
  );
}

Row buildRow(BuildContext context, int index, FilesProvider provider) {
  List<Widget> sizedBoxes = [];

  for (int i = 0; i < buttonForRow; i  ) {
    sizedBoxes.add(
      SizedBox(
        width: 20,
        child: ElevatedButton(
          child: Text("Button"),
        ),
      ),
    );
  }

  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: sizedBoxes,
  );
}

這對我來說似乎很好，但是當我運行它時，我收到了這個錯誤：

======== Exception caught by rendering library =====================================================
The following assertion was thrown during paint():
RenderBox was not laid out: RenderRepaintBoundary#29de6 relayoutBoundary=up2 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1929 pos 12: 'hasSize'

我不明白問題可能是什么。有人能幫我嗎？

uj5u.com熱心網友回復：

您收到此錯誤是因為您已將小部件包裝在小Expanded部件中，因此您的ListView.separated小部件視口的高度和寬度不受限制。ListView.separated不知道要占用多少空間。

嘗試包裝你的ListView.separated小部件SizedBox而不是Expanded給它們高度和寬度限制

試試這個代碼

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              "AppName",
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: 300,
              //This is the first ListView, the itemBuilder returns a Column
              child: ListView.separated(
                scrollDirection: Axis.horizontal,
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return buildColumn(context, index);
                },
                separatorBuilder: (BuildContext context, int index) {
                  return const SizedBox(
                    width: 30,
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Column buildColumn(BuildContext context, int index) {
    return Column(
      children: [
        Text(
          "Column "   index.toString(),
          textAlign: TextAlign.center,
        ),
        SizedBox(
          height: 200,
          width: 180,
          //This is the second ListView, the itemBuilder returns a Row
          child: ListView.separated(
            scrollDirection: Axis.vertical,
            itemCount: 5,
            itemBuilder: (BuildContext context, int rowIndex) {
              return buildRow(context, rowIndex);
            },
            separatorBuilder: (BuildContext context, int rowIndex) {
              return const SizedBox(
                height: 10,
              );
            },
          ),
        ),
      ],
    );
  }

  Row buildRow(BuildContext context, int index) {
    List<Widget> sizedBoxes = [];

    for (int i = 0; i < 3; i  ) {
      sizedBoxes.add(
        SizedBox(
          width: 60,
          child: ElevatedButton(
            onPressed: () {  },
            child: const Text("cta"),
          ),
        ),
      );
    }

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: sizedBoxes,
    );
  }

截屏

標籤：扑 列表显示 嵌套的

上一篇：從串列中洗掉（）影響串列由提供者獲得！[撲]

下一篇：嵌套在ListView中的GridView的cacheExtent被忽略