扩展的 ListView 在 TabBarView 内不起作用

Question

这是我正在努力实现的目标的图片。

但是，我希望 TabBarView 中的两个列表都展开到屏幕底部。我现在可以让它工作的唯一方法是使用具有固定高度的容器。如果我使用MediaQuery.of(context).size.height，那么它会从页面底部展开，我会得到黄色黑色溢出的东西。

如果我将TabBarView 包装在Expanded 小部件中，而不是固定大小的Container，我会收到RenderFlex children have non-zero flex but incoming height constraints are unbounded. 错误。如果我将每个ListView 包装在Expanded 中（同时删除了固定高度的Container），我会收到Horizontal viewport was given unbounded height. 错误。知道接下来我应该尝试什么吗？

这是代码。

Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: const EdgeInsets.only(bottom: 15, top: 6),
              padding: const EdgeInsets.only(left: 15),
              child: const Text('Home'),
            ),
            DefaultTabController(
              length: 2,
              initialIndex: 0,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Container(
                    child: TabBar(
                      isScrollable: true,
                      tabs: [
                        Tab(text: 'Subscriptions'),
                        Tab(text: 'Recently Visited'),
                      ],
                    ),
                  ),
                  Container(
                    height: 500,
                    decoration: BoxDecoration(
                        border: Border(
                            top: BorderSide(color: Colors.grey, width: 0.5))),
                    child: TabBarView(
                      children: <Widget>[
                        buildAList(),
                        buildAList()
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildAList() {
    return ListView(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      children: List<Widget>.generate(
        100,
        (i) => Text(
          'Item $i',
          style: TextStyle(fontSize: 20),
        ),
      ).toList(),
    );
  }

Answer 1

我在下面的代码中所做的所有更改是我用Expanded 小部件包装了您的TabBarView 的Container 小部件，然后用另一个Expanded 小部件包装了DefaultTabController。如果您要将Expanded 小部件放在某个地方，那么如果它位于灵活的小部件（例如Row 或Column）内部，您也应该用Expanded 小部件包装它的父级。

我还将您的 buildAList 函数更改为使用 ListView.builder，这样您就不必“生成”列表。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              alignment: Alignment.centerLeft,
              margin: const EdgeInsets.only(bottom: 15, top: 6),
              padding: const EdgeInsets.only(left: 15),
              child: const Text('Home'),
            ),
            Expanded(
              child: DefaultTabController(
                length: 2,
                initialIndex: 0,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Container(
                      child: TabBar(
                        isScrollable: true,
                        tabs: [
                          Tab(text: 'Subscriptions'),
                          Tab(text: 'Recently Visited'),
                        ],
                      ),
                    ),
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border(
                            top: BorderSide(color: Colors.grey, width: 0.5),
                          ),
                        ),
                        child: TabBarView(
                          children: <Widget>[
                            buildAList(),
                            buildAList(),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildAList() {
    return ListView.builder(
      shrinkWrap: true,
      itemCount: 100,
      itemBuilder: (c, i) {
        return Text(
          "Item $i",
          style: TextStyle(fontSize: 20),
        );
      },
    );
  }