颤振嵌套 ListView.separated

Question

我想要一个可以水平滚动的列的 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'

我不明白问题出在哪里。有人可以帮助我吗？

Answer 1

您收到此错误是因为您将小部件包装在 Expanded 小部件中，因此您的 ListView.separated 小部件视口的高度和宽度不受限制。 ListView.separated不知道要带多少space

尝试将您的 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,
    );
  }

screenshot

颤振嵌套 ListView.separated

Flutter nested ListView.separated

listview

nested

flutter